У меня проблема с 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>
Спасибо большое заранее за ваши предложения.
Я попытался использовать векторные слои, но пока не добился успеха. Мои маркеры работают отлично, за исключением того, что иконки не могут меняться «на лету» без эффектов, которые я описал. Интересно, возможно ли это сделать? – Julio