是否可以將圖標符號添加到多邊形

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」在我的樣式函數中設置了正確的圖標。