打开的图层要素在缩小时移动

2022-04-05 00:00:00 javascript openlayers

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

我正在遍历包含一些要素的JSON，提取每个要素的坐标，并将它们添加到地图中。到目前为止，一切都很好，但我只是注意到，当我缩小/放大或向左/右移动时，功能或更好的是图标在移动。要素位置仍应为真，因为我可以将鼠标悬停在地图上并显示覆盖图(如所需)。

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

///////////////
// 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添加到地图的各层。

我认为我的投影/视图定义可能会有所帮助。

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
        })
});

我正在添加一些图像，视图1和视图2只能通过向左/向右滚动来更改，而视图3是放大的。

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

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)。如果我通过了，例如我的家庭邮政编码，我会得到作为我在日志中的固定中心的坐标，所以坐标应该不会有问题，对吗？

解决方案

您的图像在缩放时移动，因为它会自动缩放，因此其大小相对于缩放级别是可读的(它不会粘在地图上)。您需要将图像的中心固定在其他位置。

要定位中心图像，必须使用偏移量。你可以，玩偏移量和图像大小本身与Open Layers样式类。我不知道您使用的是哪个版本，因此您很可能必须在文档或其他一些示例中阅读有关它的信息，但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，{半宽}

基本上，当你滚动和缩放时，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。使用Open Layers投影总是更好的，如果您的坐标构建方式不同，请将它们转换为您需要的坐标。

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

我最近也在使用Open Layers。并且遇到了相同的问题，这是我通过添加

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

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

相关文章