如何解决在不刷新整个地图的情况下刷新Angular 10 ESRI地图上的图层
我已在Angular 10中创建了Esri Map。用户可以从组按钮中选择地图上的图层。因此,输入将是一个数组,例如:['0','1','2']。这些数字是地图图层编号。所有这些功能都可以正常工作,但是我必须添加图层而不刷新整个地图。请在下面找到代码。
import {
Component,OnInit,ViewChild,ElementRef,Input,Output,EventEmitter,OnDestroy,} from '@angular/core';
import { loadModules } from 'esri-loader';
import esri = __esri; // Esri TypeScript Types
import { empty } from 'rxjs';
@Component({
selector: 'app-esri-adv-map',templateUrl: './esri-adv-map.component.html',styleUrls: ['./esri-adv-map.component.css'],})
export class EsriAdvMapComponent implements OnInit {
@Output() mapLoadedEvent = new EventEmitter<boolean>();
@ViewChild('mapViewNode',{ static: true }) private mapViewEl: ElementRef;
view: any;
private _zoom = 15;
private _basemap = 'hybrid';
private _loaded = false;
private _view: esri.MapView = null;
private _nextBasemap = 'streets';
public _selectedLayer: Array<string>;
public onLayerChange(val: Array<string>) {
// eg: val = ['0','1','2'];
this._selectedLayer = val;
this.ngOnInit();
}
constructor() {}
async initializeMap() {
try {
// Load the modules for the ArcGIS API for JavaScript
const [
EsriMap,EsriMapView,FeatureLayer,BasemapToggle,Basemapgallery,] = await loadModules([
'esri/Map','esri/views/MapView','esri/layers/FeatureLayer','esri/widgets/BasemapToggle','esri/widgets/Basemapgallery',]);
// Configure the Map
const mapProperties: esri.MapProperties = {
basemap: this._basemap,};
const map: esri.Map = new EsriMap(mapProperties);
// Initialize the MapView
const mapViewProperties: esri.MapViewProperties = {
container: this.mapViewEl.nativeElement,center: this._center,zoom: this._zoom,map: map,};
this._view = new EsriMapView(mapViewProperties);
// Add layers to the map according to the selection
let layerArray = this._selectedLayer;
console.log(layerArray);
if (typeof layerArray != 'undefined') {
layerArray.forEach((layer) => {
const addLayer = new FeatureLayer({
url:
'https://gis.dogis.org/arcgis/rest/services/test/MapServer/' +
layer,});
map.add(addLayer);
});
}
// Basemap toglle section
var basemapToggle = new BasemapToggle({
view: this._view,nextBasemap: this._nextBasemap,});
this._view.ui.add(basemapToggle,'top-right');
await this._view.when();
return this._view;
} catch (error) {
console.log('EsriLoader: ',error);
}
}
ngOnInit(): void {
this.initializeMap().then((mapView) => {
console.log('mapView ready: ',this._view.ready);
this._loaded = this._view.ready;
this.mapLoadedEvent.emit(true);
});
}
}
函数“ onLayerChange()”来自组按钮。触发事件后,请调用“ ngOnInit()”,该操作会使用所选图层加载地图。但是,我们如何仅加载图层而不是整个地图? 谢谢。
解决方法
无需“重新初始化”组件。
我认为简单的解决方案是创建所有图层,将其添加到地图,然后仅使用图层的visible
属性。
例如,假设您将图层索引保留在layerMapIdxArray
(可能要素图层的索引)中。让我们添加一个包含可能的图层的字典layersDic
并对其进行初始化。
layersMapIdxArray: number[] = ['0','1','4','3','8','7']; // example
layersDic = {};
initLayersDic () {
for (const idx of layersMapIdxArray) {
this.layersDic[idx] = new FeatureLayer({
url: `https://gis.dogis.org/arcgis/rest/services/test/MapServer/${idx}`,visible: false // <- with this starts off
});
map.add(this.layersDic[idx]);
}
}
然后在您的按钮组中单击(我猜是)事件处理程序,只需一致地更新visible属性。
public onLayerChange(val: Array<string>) {
// eg: val = ['0','2'];
this.visibleFalseAllLayer(); // here you reset the layers visibility
// now turn on the selected layers
for (const v of val) {
this.layersDic[idx].visible = true;
}
}
就这样!。
顺便说一句,代码是表达逻辑的示例,我没有编译它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。