更改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标记图标

回答

相关问题