打开图层 - 缩放时标记消失

Openlayers - Marker disappears when zooming

本文关键字：消失 缩放 图层      更新时间：2023-09-26

我需要在地图接近/离开时，不要擦除标记。

我的脚本是这样的：

Js

 $(document).ready(function() {
   //init 
   var map;
   var posMarcador; // Posicion del marcador
   var options = {
     restrictedExtent: extent,
     controls: [
       new OpenLayers.Control.Navigation(),
       new OpenLayers.Control.PanZoomBar(),
       new OpenLayers.Control.Attribution()
     ]
   };
   var position = new OpenLayers.LonLat(lon, lat).transform( fromProjection, toProjection);
   map = new OpenLayers.Map( 'map', options);
   layerBase = new OpenLayers.Layer.OSM();
   map.addLayer(layerBase);
   map.setCenter(extent.getCenterLonLat(), zoom);
   map.isValidZoomLevel = function(zoomLevel) {
     return ( (zoomLevel != null) &&
              (zoomLevel >= 11) && // set min level here, could read from property
              (zoomLevel < 17) );
   }
   var iconImage = //url image

   /**
    * Marcador
    * @type {OpenLayers.Layer.Markers}
    */
   var layerMarkers = new OpenLayers.Layer.Markers( "Markers" );
   map.addLayer(layerMarkers);
   map.events.register("click", map, function(e) {
     layerMarkers.clearMarkers();
     var position = map.getLonLatFromViewPortPx(e.xy);
     posMarcador = new OpenLayers.LonLat(position.lon, position.lat);
     var size = new OpenLayers.Size(50,50);
     var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
     var icon = new OpenLayers.Icon(iconImage(tipoIcono), size, offset);
     layerMarkers.addMarker(new OpenLayers.Marker(posMarcador, icon));
     posMarcador =   posMarcador.transform(toProjection  , fromProjection );
     $('input[name="geopunto.latitud"]').val(posMarcador.lat);
     $('input[name="geopunto.longitud"]').val(posMarcador.lon);
  });
});

我的观点是：

<div id="map"></div>

当我放置一个静态点（取消注册点击事件）时，它工作正常。希望你能帮上忙。

您正在保存新标记在posMarcador中的位置。这应该在缩放地图后重复使用。我做了一个单独的函数来重用来放置标记，在您的情况下，它可能像这样：

function addNewMarker(pos) {
    posMarcador = pos;     // save pos
    var size = new OpenLayers.Size(50,50);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon(iconImage(tipoIcono), size, offset);
    layerMarkers.addMarker(new OpenLayers.Marker(posMarcador, icon));            
    var np = pos.transform(map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
    $('input[name="geopunto.latitud"]').val(np.lon.toFixed(6));
    $('input[name="geopunto.longitud"]').val(np.lat.toFixed(6));
}

单击标记时，放置了：

map.events.register('click', map, function(ev) {
    layerMarkers.clearMarkers();
    var position = map.getLonLatFromViewPortPx(ev.xy);
    addNewMarker(position);
});

现在将函数绑定到 map 的zoomend事件。

map.events.register('zoomend', map, function(ev){
    if (posMarcador != undefined) {
        var np = new OpenLayers.LonLat(posMarcador.lon, posMarcador.lat).transform(
            new OpenLayers.Projection("EPSG:4326"),  // from WGS 1984
            map.getProjectionObject()  // Spherical Mercator
        );
        addNewMarker(np);
    }
});

为了这个例子，我使用了适当的投影，如new OpenLayers.Projection("EPSG:4326")代替变量toProjection和fromProjection。也许这会有所帮助。

相关文章：