更改OpenLayers標記圖標

我遇到了OpenLayers的問題。如果我想在飛行中更改某個標記的圖標（例如，用另一種顏色繪製標記以指示狀態更改），則標記會開始表現錯誤，不會顯示在適當的位置，甚至會留下半隨機位置本身的副本，在放大或縮小地圖時顯着。更改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>

非常感謝提前對你的建議。

來源

2013-12-12 Julio

我從不使用標記創建標記。我創建一個矢量圖層，並添加Point對象。然後設計這些點。

這工作得更好，功能更多。

來源

2013-12-13 12:52:39 Knarf

我試圖使用矢量圖層，但目前爲止沒有成功。我的標記正常工作，除了圖標不能在沒有我描述的效果的情況下即時更改。我想知道是否有可能做到這一點？ – Julio

您可以創建一個可以將SVG作爲字符串返回的寧靜Web服務。傳遞的參數將告訴服務在圖標上需要更改哪些內容。該服務會讀入模板SVG，然後將其返回。

來源

2014-03-13 11:46:57 rideintothesun

更改OpenLayers標記圖標

回答

相關問題