Question

我正在使用OpenLayers和Google Layer，我对地图上的标记有一种奇怪的行为。

在移动设备上，当进行缩放以缩放地图时，标记会随着夹点的移动而移动和缩放但是当夹点完成时，标记会回落到正确的位置并且具有实际尺寸。

var map;
var markers_array=new Array();
var markers;
var proj = new OpenLayers.Projection("EPSG:4326");
var markersJSON;


function initlize()
{

map = new OpenLayers.Map('map', {
    projection: 'EPSG:3857',
maxResolution: "auto",
zoomDuration:0,
    layers: [
        new OpenLayers.Layer.Google(
            "Google Streets", // the default
            {numZoomLevels: 20,transitionEffect:"resize"}
        ),

    ],
      center: new              OpenLayers.LonLat(parseFloat(markersJSON[0].lon),parseFloat(markersJSON[0].lat))
.transform('EPSG:4326', 'EPSG:3857'),
        // Google.v3 uses web mercator as projection, so we have to
        // transform our coordinates


    zoom: 12,
        controls: [
      new OpenLayers.Control.TouchNavigation({
          dragPanOptions: {
              enableKinetic: true
          }
      }),
      new OpenLayers.Control.Zoom()
      ]
});

function addMarker(lat,lng,id,map_icon)
 {



markers = new OpenLayers.Layer.Markers( "Markers" );
//markers_array[id]=markers;
var lonlat = new OpenLayers.LonLat(lat,lng);
lonlat.transform('EPSG:4326', 'EPSG:3857');
map.addLayer(markers);
markers.id=id;
var size = new OpenLayers.Size(40,60);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('server_address'+map_icon, size, offset);
markers.addMarker(new OpenLayers.Marker(lonlat,icon));
markers.events.register( 'touchstart', markers,clickMarker);
//markers_array[id]=markers;
}

function clickMarker(evt){
  //{some code here}
  }

提前致谢

Answer 1

在OpenLayers 2中，在缩放/移动完成之前，不会重绘矢量要素。如果您在Map source中查看moveTo的代码，您会看到所有图层都调用了自己的moveTo事件，实际上会重新绘制向量，请参阅Layer Vector source。如果您绘制一个大的多边形然后将其拖动到屏幕的一半，释放鼠标，然后将其拖回到屏幕上，则会更加明显，在您释放鼠标之前，您将看到它不会重绘。

 if (inRange && layer.visibility) {
      layer.moveTo(bounds, zoomChanged, options.dragging);
      options.dragging || layer.events.triggerEvent(
      "moveend", {zoomChanged: zoomChanged}
       );
 }

在OpenLayers 3中，渲染器功能更强大，并且在地图缩放或平移时矢量会更新。我创建了此jsFiddle来回答不同的问题，但您会看到图标立即更新。

注意：我测试过的只是在Android手机和Linux桌面上测试过，但两者都按预期工作。

Note: OpenLayers 3 is still in beta, 所以虽然看起来它将是一个非常令人印象深刻的重写，具有许多新功能，但我现在不一定推荐它用于生产。

标记移动时捏缩放以打开图层和谷歌地图

1 个答案: