标记为的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

回答

相关问题