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

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”在我的样式函数中设置了正确的图标。