OL OSM获取特定层的中心点

Question

我正在使用带有 Angular 的开放层 OSM 地图来浏览国家，然后是州，然后是城市。我能够根据选择进行升级，并为每个层添加新层。我不是在删除，而只是隐藏上一层，假设如果有人从美国选择了纽约，那么所有国家/地区图层都将被隐藏，并且带有 NewYark 城市的上层将可见。现在，我需要为用户提供钻取回上层的能力。就像双击纽约将显示所有县一样。因此，当我隐藏当前图层并显示前一层时，它正确显示，但我无法检索其中心点。任何人都可以帮忙吗？

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

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