Question

我目前正在开发一个openlayers 3项目，为了更好的可视化，我需要同时展示它们。多边形形状（基于属性的颜色），它在多边形位置上运行良好且具有图标。我知道多边形包含多个坐标，因此定义图标的位置并不容易。现在我有一些解决方法，创建一个单独的覆盖与多边形的内部点来标记图标的位置。为了使项目更简单，我想结合这两种样式。有谁知道它是否可能？

亲切的问候

Answer 1

我假设您使用ol.source.serversource作为数据。诀窍是测试所有要素作为多边形。如果是，则创建添加到源的点要素。

首先创建源和图层：

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      
});

图层有一个样式功能来设置右图标。

主要是装载机：

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（）的方法。它有，但我可以让它工作。所以我计算了多边形范围的中心点。

我使用“StyleName”在我的样式函数中设置右图标。

是否可以向多边形添加图标符号

1 个答案: