OL OSM 获取特定层的中心点

Question

我正在使用带有 Angular 的开放层 OSM 地图来相应地浏览国家、州和城市。我可以根据选择升级并为每个选择添加新层。我没有删除，只是隐藏了上一层假设如果有人从美国选择了纽约，那么所有国家层都将被隐藏，而带有 NewYark Cities 的上层将可见。现在我需要让用户能够回溯到上层。就像双击纽约将显示所有县。所以当我隐藏当前图层并显示它正确显示的上一层时，我要这样做，但我无法检索它的中心点。有人可以帮忙吗？

this.map.on('singleclick', (event) => {
    // do foreach for each layer  this.MapLevel is each layer number in map
    this['vectorLayer' + this.MapLevel].getFeatures(event.pixel).then((features) => {
        if (!features.length) {
          selection = {};
          return;
        }
        const feature = features[0];
        if (!feature) {
          return;
        }
 this.MapLevel = this.MapLevel + 1;
        this['vectorLayer' + this.MapLevel] = new VectorLayer({
source: new VectorSource({
          url: this.MapSourceURl, // local json file path to retrive Data
          map: this.map,
          format: new GeoJSON(),
          wrapX: false,
          useSpatialIndex: false,
          overlaps: false 
         })}); // layer parameters not pasting here as it has long
        this.map.addLayer(this['vectorLayer' + this.MapLevel]);
        this['vectorLayer'+ this.MapLevel].setVisible(true);
        this['vectorLayer' + (this.MapLevel - 1)].setVisible(false);
      });
      });


// On double click I am trying to show previous layer to downgrade Level in map

this.map.on('dblclick', (event) => {


     this['vectorLayer' + (this.MapLevel - 1)].setVisible(true);
     this['vectorLayer' + (this.MapLevel - 1)].setOpacity(1);
     this.view.animate({center: toLonLat([this.long, this.lati]), zoom : this.view.getZoom() - 1, duration: 2000});
     this.map.removeLayer(this['vectorLayer' + this.MapLevel]);
     this['vectorLayer'+ this.MapLevel].setVisible(false);
    });

But I am not getting correct zoom level of previous layer this so this code is failing.

Answer 1

如果我理解正确的话，这可能有用，

let updateViewExtent = function (pixel, level) {
  this['vectorLayer' + level].getFeatures(event.pixel).then((features) => {
    if (features.length > 0) {
      return;
    }
    const feature = features[0];
    if (!feature) {
      return;
    }
    // zoom to feature clicked (here just first feature)
    this.map.getView().fit(feature.getGeometry().getExtent(), {size: this.map.getSize()});
}
this.map.on('singleclick', (event) => {
  // if this is the lower level return
  if (this.MapLevel === LOWERLEVEL) {
    return;
  }
  // zoom to the clicked feature of the level
  updateViewExtent(event.pixel, this.MapLevel);
  // update map level and layers visibility
  this['vectorLayer' + this.MapLevel].setVisible(false);
  this.MapLevel += 1;
  this['vectorLayer' + this.MapLevel].setVisible(true);
});
this.map.on('dblclick', (event) => {
  // if this is the upper level return
  if (this.MapLevel === UPPERLEVEL) {
    return;
  }
  // zoom to the clicked feature of the upper level
  updateViewExtent(event.pixel, this.MapLevel - 1);
  // update map level and layers visibility
  this['vectorLayer' + this.MapLevel].setVisible(false);
  this.MapLevel -= 1;
  this['vectorLayer' + this.MapLevel].setVisible(true);
});

我使用一个函数来缩放期望范围，在本例中是单击的功能。实际上，这可能不仅仅是一项功能，您可以缩放到更大的范围。如果你真的想在双击时缩放到图层范围，那么不要调用函数，只需使用这个，

// zoom upper layer extent
this.map.getView().fit(
  this['vectorLayer' + (this.MapLevel - 1)].getSource().getExtent(),
  {size: this.map.getSize()}
);

最后，您可能需要取消地图双击时的默认行为（放大一级）。

OL OSM 获取特定层的中心点

OL OSM get center point of a specific Layer

openlayers

openstreetmap

angular-openlayers