缩小时打开图层功能会移动

Question

编辑：我之前通过用户输入改变了地图的中心，但为了测试改变了这个。为我的地图使用固定中心，一切都很好。现在的问题是：为什么？

我正在遍历具有某些特征的 JSON，提取每个特征的坐标，并将它们添加到地图中。到目前为止一切正常，但我只是注意到当我缩放 out/in 或 moe left/right 时，功能或更好的图标在移动。特征位置应该仍然是真实的，因为我可以将鼠标悬停在地图上并显示叠加层（如预期的那样）。

我不知道为什么徽标会这样，也许有人可以帮助我。这是我对其中一层的代码：

///////////////
// Forst
var Forststyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: 'images/tree.png'
})
});
var Forstsource = new ol.source.Vector();
$.getJSON('config/Forst.json', function (data) {
  $.each(data, function(key, val){
     var newMarker = new ol.Feature({
        geometry: new ol.geom.Point([this.long, this.lat]),
            pointAttributes: {            
                'Name': this.name, 
                'Strasse':this.Straße,
            }        
    });
    Forstsource.addFeature(newMarker);
    });
});
var Forst = new ol.layer.Vector({
        title: "Forst",
        visible: false,
        zIndex: 5,
        style: Forststyle,
        source: Forstsource});

我正在将 Forst-Layer 添加到地图的图层中。

我认为我的 projection/view 定义可能会有帮助。

var projection25832 = new ol.proj.Projection({
code: 'EPSG:25832',
    // The extent is used to determine zoom level 0. Recommended values for a
    // projection's validity extent can be found at https://epsg.io/.
extent: [-1877994.66, 3932281.56, 836715.13, 9440581.95],
units: 'm'
});

我正在添加我的整个地图调用。中心和缩放由用户输入定义。

var map = new ol.Map({
    target: 'map',
    layers:[          
        new ol.layer.Tile({
            title: 'OSM (grau)',
            visible: true,
            source: new ol.source.TileWMS({
                url: 'https://ows.terrestris.de/osm/service?',
                    params: {
                        'LAYERS': "OSM-WMS",
                        'VERSION': '1.1.0',
                        'FORMAT': 'image/png',
                        'TILED': false
                         }
            })
            }),
            Schaefer,
            KMR,
            GaLaBauSA, 
            GaLaBauBBG,
            Forst,
            Lohnunternehmen
            ],   
    view: new ol.View({
            projection: projection25832,
            center: center,
            zoom: zoom
        })
});

我正在添加一些图片，view1 和 view2 只能通过滚动来改变 left/right，view3 被放大了。

更多编辑：如上所述，当我使用固定中心时，一切都按预期工作。但是，根据用户输入更改它是行不通的。

var D = $.ajax({
    type: "GET",
    url: url,
    dataType: "json"
    }).done(function(){
       var Coords = D.responseJSON.results[0].locations[0].latLng;
       var utm = "+proj=utm +zone=32";
       var new_center = [proj4("WGS84",utm,[Coords.lng, Coords.lat])[0],proj4("WGS84",utm,[Coords.lng, Coords.lat])[1]];
       console.log(new_center);
       CreateMap([new_center[0], new_center[1]],zoom);
       $("#Hintergrund").hide();
       });
       }

我的 CreateMap 函数正在获取中心和缩放的坐标，url 是一个将输入转换为坐标的 WEB-API (mapquest)。如果我通过例如my home-zip-code 我在日志中得到了用作固定中心的坐标，所以坐标应该没有问题吧？

Answer 1

你的图像在缩放时移动，因为它会自动缩放，所以大小在缩放级别上是可读的（它不会粘在地图上）你需要将图像的中心锚定在别处。

要锚定中心图像，您必须使用偏移量。您可以使用 openlayers 样式 class 来调整偏移量和图像大小本身。我不知道您使用的是哪个版本，因此您很可能需要在文档或其他一些示例中阅读它，但 hare 就是一个。

new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0, 0],
            anchorXUnits: "pixels",
            anchorYUnits: "pixels",
            offset: [0,0],
            offsetOrigin: 'bottom-left',
            rotation: 0,
            src: 'images/tree.png'
        }))
    });

将锚点设置为0,0如果我没记错的话将在左上角，您很可能必须将其设置为0, {Half width}

基本上，当您滚动和缩放时，OpenLayers 会从中心点调整图像缩放比例，因此理论上，如果中心点不在底部，它就会移动。如果这没有帮助，请查看您是否有正确的预测。如果这没有帮助，请尝试创建“标记”而不是点，我不记得了，但其中之一有更多的控制流程。

我想象它动了一点点，好像动得很厉害。可能是预测错误。尝试使用 projection: 'EPSG:4326' 如果您的坐标在不同的坐标中，您可以将其转换为

.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"))

我注意到您手动创建投影，不确定这是否是最佳方法。看看这个。 https://openlayers.org/en/latest/examples/epsg-4326.html 它使用 4326。使用 openlayers 投影总是更好，如果你有不同的坐标构建，t运行sform 它们到你需要的。

要对此进行调试，您可以尝试在地图上绘制线串 (WKT/Polyline)，如果随缩放发生变化，则您的问题肯定出在投影中，如果没有，则可能是其他原因。

我最近也在使用 openlayers。和运行成同样的问题，我通过 add

    style.graphicXOffset= 15;
    style.graphicYOffset= 28;

将这些设置为 0，应该会有帮助。

缩小时打开图层功能会移动

Open Layers Features move when zooming out

javascript

openlayers