更改OpenLayers標記圖標

Question

我對OpenLayers有問題。 如果我想即時更改某些標記的圖標（例如，用另一種顏色繪制標記以指示狀態變化），則標記開始表現為越野車，沒有顯示在正確的位置，甚至半隨機地位於本身的副本，在放大或縮小地圖時值得注意。

我已經意識到，當我從一些預加載的圖標圖像中重新分配marker.icon屬性時，就會出現問題，否則效果會很好。 我嘗試使用和不使用icon.clone（）重繪。

這是一個完整但經過簡化的示例，該示例隨機移動標記，並且也應該修改其圖標。 如果您注釋掉“麻煩的代碼”代碼段，則除了圖標更改外，它都可以正常工作：

<!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>

提前非常感謝您的建議。

Answer 1

我從不使用標記來創建標記。 我創建一個Vector層，並添加Point對象。 然后設置這些點的樣式。

這樣效果更好，並且具有更多功能。

Answer 2

您可以創建一個寧靜的Web服務，該服務可以將SVG作為字符串返回。 傳遞的參數將告訴服務圖標上必須更改的內容。 該服務將在模板SVG中讀取適當地更改它並返回它。

更改OpenLayers標記圖標

問題描述

2 個解決方案

解決方案1
1 2013-12-13 12:52:39

解決方案2
1 2014-03-13 11:46:57

更改OpenLayers標記圖標

問題描述

2 個解決方案

解決方案1 1 2013-12-13 12:52:39

解決方案2 1 2014-03-13 11:46:57

解決方案1
1 2013-12-13 12:52:39

解決方案2
1 2014-03-13 11:46:57