更改 OpenLayers 标记图标答案

【问题标题】：Changing OpenLayers marker icon更改 OpenLayers 标记图标
【发布时间】：2025-12-04 03:00:02
【问题描述】：

我对 OpenLayers 有疑问。如果我想动态更改某个标记的图标（例如，用另一种颜色绘制标记以指示状态更改），则标记开始出现错误，未显示在正确的位置，甚至半随机定位自身的副本，在放大或缩小地图时很明显。

我已经意识到，当我从一些可以正常工作的预加载图标图像重新分配 marker.icon 属性时，就会出现问题。我已经尝试过使用和不使用 icon.clone() 来重绘。

这是一个完整但简化的示例，它随机移动标记并且也应该修改其图标。如果把“麻烦的代码”sn-p注释掉就可以了，除了图标变了：

<!DOCTYPE HTML>

<HTML>
    <HEAD>
        <TITLE>Mapa</TITLE>
        <SCRIPT language="javascript" type="text/javascript" src="OpenLayers.js"></SCRIPT>
        <SCRIPT language="javascript" type="text/javascript">
            var vMapa;
            var prj0 = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
            var prj1 = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
            var vLon = 12.568142;
            var vLat = 55.676320;
            var vTimer = null;
            var vCont = 0;
        </SCRIPT>
    </HEAD>
    <BODY onClose="vTimer = null; vLon = null; vLat = null;">
        <DIV id="demoMap" style="height: 700px; width: 1000px;"></DIV><DIV id="Contador">0</DIV>
        <SCRIPT>
            var options = {
                controls: [
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                ]
            };

            vMapa = new OpenLayers.Map("demoMap", options);
            vMapa.addLayer(new OpenLayers.Layer.OSM());
            vMapa.setCenter(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), 15, false, false);

            var Navigation = new OpenLayers.Control.Navigation( { defaultDblClick: function(event) { return; } } );

            vMapa.addControl(Navigation);           

            var markers = new OpenLayers.Layer.Markers("Markers");
            vMapa.addLayer(markers);

            var size    = new OpenLayers.Size(12, 12);
            var offset  = new OpenLayers.Pixel(-6, -6);
            var iconOff = new OpenLayers.Icon('img/CircOff.png', size, offset);
            var iconOn  = new OpenLayers.Icon('img/CircOn.png', size, offset);

            var marker = new OpenLayers.Marker(new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1), iconOff.clone());
            marker.setOpacity(1.0);
            marker.events.register('mousedown', marker, function(evt) { vMapa.panTo(marker.lonlat); OpenLayers.Event.stop(evt); });
            marker.pfInfo = 'Vel: 0.0 km/h';
            markers.addMarker(marker);
            vTimer = setTimeout('TimerEvent()', 1000);

            function TimerEvent() {
                vLon += ((Math.random() - 0.5) / 500);
                vLat += ((Math.random() - 0.5) / 500);

                // ------- Troublesome code -------
                var ixIcon = Math.round(Math.random());
                if (ixIcon == 0) {
                    marker.icon = iconOff.clone();
                } else {
                    marker.icon = iconOn.clone();
                }
                // --------------------------------

                var newLonLat = new OpenLayers.LonLat(vLon, vLat).transform(prj0, prj1);
                var newPx = marker.map.getLayerPxFromViewPortPx(marker.map.getPixelFromLonLat(newLonLat));
                marker.moveTo(newPx);

                marker.draw();

                vCont ++;
                document.getElementById('Contador').innerHTML = vCont;

                vTimer = setTimeout('TimerEvent()', 1000);
            }
        </SCRIPT>
    </BODY>
</HTML>

非常感谢您的建议。

【问题讨论】：

标签： javascript icons openlayers marker

【解决方案1】：

我从不使用 Marker 来创建标记。我创建了一个矢量图层，并添加了点对象。然后为这些点设置样式。

这样效果更好，功能也更多。

【讨论】：

我尝试过使用矢量图层，但到目前为止没有成功。我的标记工作正常，除了图标不能在没有我描述的效果的情况下动态更改。我想知道到底有没有可能做到？

【解决方案2】：

您可以创建一个可以将 SVG 作为字符串返回的静态 Web 服务。传递的参数将告诉服务图标上必须更改的内容。该服务将读取模板 SVG 并对其进行适当更改并返回。

【讨论】：