是否可以向多边形添加图标符号 [英] Is it possible to add a icon symbol to a polygon

问题描述

我目前正在研究openlayers 3项目，为了更好地进行可视化，我需要同时展示两者.效果很好的多边形形状(基于属性的颜色)，多边形位置上有一个图标.我知道多边形包含多个坐标，因此很难为图标定义位置.现在，我有了某种解决方法，可以用多边形的内部点创建一个单独的覆盖层，以标记图标的位置.为了使项目更简单，我想将这两种样式结合起来.有人知道它是否可能吗?

I am currently working on a openlayers 3 project and for better visulaizing i need to show both. The Polygon shape(attribute based color) which works great and an icon on the polygon position. I know that the polygon contains multiple coordinates and so its not so easy to define a position for the icon. Now i have some kind of workaround that creates an seperate overlay with the interior Points of the polygon to mark the position of the icons. To make the project more simple i want to combine these two styling. Does anyone know if its possible?

亲切的问候

推荐答案

我假设您使用ol.source.serversource作为数据. 诀窍是测试所有要素是否为多边形.如果是这样，则创建一个点要素，然后将其添加到源中.

I presumes that you use a ol.source.serversource for your data. The trick is to test all your features for being a polygon. If it is, you create a point feature you add to your source.

首先创建源和图层:

var avlVectorSource = new ol.source.ServerVector({
  format: new ol.format.GeoJSON(),
  loader: function(extent, resolution, projection) {
    myLoader(resolution);
  }
});

var myLayer = new ol.layer.Vector({
   source: myVectorSource,
   style: myStyleFunction      
});

该图层具有用于设置右侧图标的样式功能.

The layer has a style function to set the right icon.

主要是装载程序:

var myLoader = function(resolution){
    $.ajax({
        url: "http://myJsonSource.com",
        timeout: 1000,
        success: function(response) {
            var layerJSONString = $.parseJSON(response);
            var newFeatures = [];
            j= 0;
            var size=layerJSONString.features.length;
            for (i = 0; i < size; i++){
                var feat = layerJSONString.features[i];
                var geom = feat.geometry;
                var type = geom.type;
                if(type == "Polygon")
                {
                    var poly = new ol.geom.Polygon(geom.coordinates);
                    var extent = poly.getExtent();
                    var coord = [];
                    coord[0] = (extent[2]-extent[0])/2 + extent[0];
                    coord[1] = (extent[3]-extent[1])/2 + extent[1];
                    var point = new ol.geom.Point(coord);
                    newFeatures[j++] = new ol.Feature({
                        geometry : point,
                        StyleName : feat.properties.StyleName
                    });
                } 
            }           
            avlVectorSource.addFeatures(myVectorSource.readFeatures(response));
            avlVectorSource.addFeatures(newFeatures);
        },
        error: myLoadError
    });
}
};

文档说ol.geom.Polygon有一个名为getInteriorPoint()的方法.它有，但我可以使它工作.因此，我计算了多边形范围的中心点.

The documentation says that ol.geom.Polygon has a method called getInteriorPoint(). It has but I can get it to work. So I calculate the center point of the extent of the polygon.

我使用"StyleName"在样式功能中设置右侧的图标.

I use "StyleName" to set the right icon in my style function.

这篇关于是否可以向多边形添加图标符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！