OpenLayers-在单击标记器上以特定缩放级别缩放

问题描述

我想在标记上创建单击时事件，该事件在单击时会放大到特定级别。当前代码会加载标记，并且在单击时放大到标记的最大缩放级别。我想在代码中添加特定的缩放级别，因此当标记上发生单击事件时，应将视图设置为该缩放级别。我在地图上的缩放级别为16或更高的栅格图块，因此，当我单击标记时，缩放到栅格图块并从此处隐藏标记。

    var marker = new ol.layer.Vector({
      source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),url: "data.js"  
      }),style: new ol.style.Style({
        image: new ol.style.Icon({
                anchor: [0.5,0.5],anchorXUnits: 'fraction',anchorYUnits: 'pixels',scale:0.03,src: "img.png"
              })
          })  
    });
    map.addLayer(marker);
    map.on("singleclick",(event) => {        
        const feature = map.forEachFeatureAtPixel(event.pixel,(feature) => {
          return feature;
        });
        if (feature instanceof ol.Feature) {
              map.getView().fit(feature.getGeometry());       
         }
      });

解决方法

不是使用合适的设置，而是设置视图的中心和缩放

map.getView().setCenter(ol.extent.getCenter(feature.getGeometry().getExtent()));
map.getView().setZoom(16);

您可以通过赋予其空样式来“隐藏”该功能

feature.setStyle(null);