Angular+ArcGIS JS初始化地图与图层叠加实现

本文代码基于Angular8和arcgis js 4.16，arcgis 配置 使用esri-loader方式。

   官网：创建一个启动程序

Angular代码

import { loadModules } from 'esri-loader';

...

@ViewChild('mapContainer', { static: true })
private mapContainer: ElementRef;

/**
 * 地图
 */
private mapView: any = null;

constructor() {
    this.initArcgis();
}

  /**
   * 初始化地图
   */
private async initArcgis() {
      const [Map, MapView, Basemap, MapImageLayer] = await loadModules(
        ['esri/Map', 'esri/views/MapView', 'esri/Basemap', 'esri/layers/MapImageLayer']);

      let baseMap;

	  // 方法一：使用arcgis官网的基础图层
	  baseMap = 'osm';

	  // 方法二：使用arcmap发布的地图服务
      baseMap = new Basemap({
          baseLayers: [
            new MapImageLayer({
              url: ……, // 地图服务地址
            }),
          ],
        });

      const map = new Map({
        basemap: baseMap,
      });
      this.mapView = new MapView({
        container: this.mapContainer.nativeElement,
        center: [113.280637, 23.125178],
        zoom: 12, // 使用官网基础图层初始化的地图通过zoom进行缩放
        scale: 30000, // 使用地图服务加载的地图通过scale进行缩放，若想使用zoom需配置
        map,
      });

      const self = this;
      this.mapView.on('drag', function(event) {
        // 监听地图拖拽事件，进行移动操作
      });
      this.mapView.on('mouse-wheel', function(event) {
        // 监听鼠标滚动事件，进行缩放
      });

      await this.mapView.when(); // 等待地图加载完成，可在when()内加入地图加载完成后的相关操作
  }

/**
 * 图层叠加
 */
private async stacktLayers() {
	// 图层数据
	const layers = [...];
    const [FeatureLayer] = await loadModules(['esri/layers/FeatureLayer']);

	// 清空图层
    // this.mapView.map.layers = null;
    layers.forEach(layer => {
      const fl = new FeatureLayer({
        url: layer.url,
      });
      this.mapView.map.add(fl); // adds the layer to the map
    });

    // await this.mapView.when(); // wait for map to load
  }

ngOnDestroy(): void {
	// 销毁
    if (this.mapView) {
      this.mapView.container = null;
    }
  }

Html代码

<div #mapContainer></div>

相关 资料

1.使用arcgmap发布地图服务

   2. Arcgis js API

   3. 初始化basemap以使用zoom属性进行缩放

// create a TileInfo instance using the default settings and
// pass its resulting LOD's to a MapView's constraints
var view = new MapView({
 container: "viewDiv",
 map: map,
 constraints: {
   lods: TileInfo.create().lods
 }
});

4.使用eris-loader配置arcgis

   之前4.16版本的arcgis官网有很清晰的教程解释如何在angular项目中配置arcgis，但目前最新版的好像没有这块内容了

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删