標記爲的OpenLayers

動態彩色圖標我有一個動態通過PHP創建上的OpenLayers動態標記代碼：標記爲的OpenLayers

$shapeStyle="\"$shapeName\":{\"graphicName\": \"triangle\",fillColor:\"$color\",pointRadius:$size,label:\"$label\",labelYOffset:7+$size}"

現在我想升級此方法做同樣的事情用圖標而不是，僅限於Openlayer提供的幾個選項：「圓形」，「方形」，「星形」，「x」，「十字形」和「三角形」。

我知道這可以用OpenLayers.Marker完成，但由於我將有N種顏色類型，所以對M圖標着色N次的操作對我來說似乎太昂貴了。而且也不太靈活。

我不知道我是否可以玩imageDiv（OpenLayers.Icon.imageDiv），所以我可以添加一些插入引導程序的Font Awesome圖標的html。此圖標可以通過css進行着色，如本文中所述：「Can I add color to bootstrap icons only using CSS?」。

這種替代方法有什麼希望嗎？

來源

2013-03-19 Xavier Peña

「我知道它可以與OpenLayers.Marker完成」。實際上，你不需要像@xamamano所說的那樣使用vectorGraphic和vectorGraphic。 – capdragon 2013-03-19 18:35:58

當我說我可以通過OpenLayers.Marker做到這一點時，我正在考慮讓每個png單獨着色，然後選擇它們作爲/red/myIcon.png或/blue/myIcon.png等： ' var icon = new OpenLayers.Icon（'/ $ selectedColor/myIcon.png'，size，offset）; markers.addMarker（new OpenLayers.Marker（new OpenLayers.LonLat（0,0），icon））;' 這將是我的「蠻力」方式... – 2013-03-19 19:56:29

我看起來沒問題。 gotcha – capdragon 2013-03-19 20:24:44

如果您繼續使用矢量功能和樣式，則可以執行此操作。使用"externalGraphic"與"graphicWidth"和"graphicHeight"

查看選項可在：

http://dev.openlayers.org/releases/OpenLayers-2.12/doc/apidocs/files/OpenLayers/Feature/Vector-js.html#OpenLayers.Feature.Vector.OpenLayers.Feature.Vector

來源

2013-03-19 17:32:56

該文件說：「externalGraphic：{String}網址到將用於渲染點的外部圖形。」。我看到的所有例子都在Url中使用了.png，所以如果我鏈接到圖片，我將無法更改此圖片的顏色。這就是爲什麼我想使用能夠這樣做的引導程序圖標。除非我錯了，我可以以某種方式使用div作爲外部圖形... – 2013-03-19 19:50:47

您可以將矢量形狀用作外部圖形。 – capdragon 2013-03-19 20:25:32

這似乎很有希望。所以，我的猜測是：如果我插入'externalGraphic：「\ path_to \ myIcon.svg」'，那麼我將能夠將'fillColor：＃FF0000'設置爲相應的openlayers形狀樣式，這將使它變成紅？ – 2013-03-19 22:13:54

標記爲的OpenLayers

回答

相關問題