我已經在 Angular 應用程式中集成了 ArcGIS Esri 地圖，并且我將一些位置輸入到要素圖層中，這些位置現在作為精確點顯示在地圖上。
但現在我想要的是，當用戶進入地圖頁面時，我想在地圖上顯示該位置的放大視圖。
我怎樣才能做到這一點？
.ts 檔案
const map = new Map({
basemap: 'topo-vector',
layers: esriLayers
});
const view = new MapView({
container,
map: map,
zoom: 4,
center: [-97.63, 38.34],
});
const myLocationLayer = new FeatureLayer({
source: locationData.map((d,i)=>(
{
geometry: new Point({
longitude: d.longitude,
latitude: d.latitude
}),
attributes: {
ObjectID: i,
...d
}
}
)),
objectIdField: 'ObjectID',
geometryType: "point",
renderer: renderer,
});
map.add(dataFeedLayer);
this.view = view;
.html 檔案
<!-- Map Div -->
<div #mapViewNode></div>
uj5u.com熱心網友回復：
在這種情況下，您需要使用包含所有幾何圖形的范圍來初始化視圖引數，或者在計算縮放到該范圍之后。為此，您需要計算范圍。
這里的特殊性是您的幾何圖形是點，因此您將無法使用范圍方法，因為點沒有范圍。
但是，不用擔心，計算結果范圍（即幾何圖形的“全范圍”）并不難。
這是我為您提供的一個小功能，可以實作這一點，
export function addPointToExtent(
pto: __esri.Point,
ext: __esri.geometry.Extent
): __esri.geometry.Extent {
if (!pto) {
return ext;
}
let e;
if (!ext) {
e = new Extent({
xmin: pto.x,
xmax: pto.x,
ymin: pto.y,
ymax: pto.y,
spatialReference: {
wkid: 102100
}
});
} else {
e = ext.clone();
if (pto.x < e.xmin) {
e.xmin = pto.x;
}
if (pto.x > e.xmax) {
ext.xmax = pto.x;
}
if (pto.y < e.ymin) {
e.ymin = pto.y;
}
if (pto.y > e.ymax) {
ext.ymax = pto.y;
}
}
return e;
}
可以這樣使用
let ext = addPointToExtent(geoms[0] as Point, null);
for (let i = 1; i < geoms.length; i ) {
ext = addPointToExtent(geoms[i], ext);
}
geoms您的點串列在哪里，并且ext是結果范圍。
獲得結果范圍后，只需將視圖縮放到它，
view.goTo({ target: ext.expand(1.1) })
擴展只是一個加號，使它更大一點。
uj5u.com熱心網友回復：
正如@cabesuon 解釋的那樣，一旦您擁有包含位置的要素圖層，您就可以使用 MapView.goTo() 方法。它接受多個輸入選項。請參閱https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#goTo。
至于獲取特征的范圍，如果它們已經在一個圖層中，您不必自己計算。
view.goTo(dataFeedLayer.source); // 沒有額外的縮放外邊距
如果在創建 FeatureLayer 時設定源，則可以使用：
view.whenLayerView(dataFeedLayer).then(() => {
view.goTo({ target: dataFeedLayer.fullExtent.expand(1.2) })
});
如果要在要素圖層更改后重置：
dataFeedLayer.queryExtent().then((results) => {
view.goTo({ target: results.extent.expand(1.2) })
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/409355.html
標籤：
上一篇：如何使用rxjs鏈接api呼叫？