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

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