Angular + esri-loader之WebGIS开发入门教程

参考 项目  : https://stackblitz.com/edit/angular7-arcgis-api4-x

   esri GitHub官方示例：https://github.com/Esri/angular-cli-esri-map

   esri-loader：https://www.npmjs.com/package/esri-loader#loading-modules-from-the-arcgis-api-for-javascript

1、esri-load使用

esri-load的好处是3. x 和4.x都可以使用
js参考esri-loader

import  { loadModules } from 'esri-loader';
//1,使用Dojo的loader来require map类
loadModules(['esri/views/MapView','esri/Map'])
 //从最新4.x版本加载；
 //加载具体版本:
 //const options = { version: '3.28' };
 //loadModules(['esri/map'], options)...
 //从具体URL加载:
 //const options = { url: `http://**/**`};
	.then(([MapView,map]) => {
		var webmap = new Map({
			basemap:'topo-vector'
			});
		var view = new MapView({
			container:'viewDiv',
			map: webmap 
		});
		.catch(err  => {
			console.error(err);
		}
	}

Angular

   ng generate service arcgis-api

import { Injectable } from '@angular/core';
import { loadModules, loadScript } from 'esri-loader';
import { BehaviorSubject } from 'rxjs';
import esri= __esri;

@Injectable({
  providedIn: 'root'
})
export class ArcgisApiService {
  loaded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor() {
    this.loaded$.subscribe(loaded => {
      if (!loaded) {
        loadScript({
          // url: 'https://js.arcgis.com/4.10/'
           url: 'https://localhost/library/4.10/dojo/dojo.js'
        })
          .then(() => {
            this.loaded$.next(true);
          }).catch(err => this.loaded$.next(true));
      }
    });
  }

  constructBaseMap(opts: {baseLayers: any}): Promise<any[]> {
    return new Promise((resolve, reject) => {
      loadModules(['esri/Basemap'])
      .then(([Basemap]) => {
        try {
          const basemap = new Basemap({
            baseLayers: opts.baseLayers
          });
          resolve(basemap);
        } catch (error) {
          reject(error);
        }
      });
    });
  }

  constructMap(opts: { basemap: any; elevation: boolean }): Promise<any> {
    return new Promise((resolve, reject) => {
      loadModules(['esri/Map'])
        .then(([Map]) => {
          const map = new Map({
            basemap: opts.basemap
          });
          if (opts.elevation) {
            map.ground = 'world-elevation';
          }
          resolve(map);
        });
    });
  }

  constructMapView(opts: {
    center: number[];
    zoom: number;
    container: string;
    map: any;
    padding?: any;
  }): Promise<any[]> {
    return new Promise((resolve, reject) => {
      loadModules(['esri/views/MapView'])
        .then(([MapView]) => {
          const view = new MapView({
            center: opts.center,
            zoom: opts.zoom,
            map: opts.map,
            container: opts.container,
            padding: opts.padding ? opts.padding : {}
          });
          view.when(() => {
            resolve(view);
          });
        });
    });
  }

  constructSceneView(opts: {
    center: number[];
    zoom: number;
    container: string;
    map: any;
    padding?: any;
  }): Promise<any[]> {
    return new Promise((resolve, reject) => {
      loadModules(['esri/views/SceneView'])
        .then(([SceneView]) => {
          const view = new SceneView({
            center: opts.center,
            zoom: opts.zoom,
            map: opts.map,
            container: opts.container,
            padding: opts.padding ? opts.padding : {}
          });
          view.when(() => {
            resolve(view);
          });
        });
    });
  }

  constructTileLayer(opts: {url: string}): Promise<any[]>{
    return new Promise((resolve, reject) => {
      loadModules(['esri/layers/TileLayer'])
      .then(([TileLayer]) => {
        const tilelyr = new TileLayer({url: opts.url});
        resolve(tilelyr);
      });
    });
  }
}

ng generate component map

import { Component, OnInit, Input } from '@angular/core';
import { ArcgisApiService } from '../services/arcgis-api.service';

@Component({
  selector: 'my-map',
  template: `<div [id]="id" [style.width]="width" [style.height]="height"></div>`,
  styles: []
})
export class MapComponent implements OnInit  {
  sceneView: any;

  @Input() id: string;
  @Input() center: [number, number];
  @Input() width: string;
  @Input() height: string;
  @Input() zoom: number;
  @Input() basemap: string;
  @Input() title: string;

  constructor(private arcgisService: ArcgisApiService) {}

  ngOnInit() {
    this.arcgisService.loaded$.subscribe(loaded => {
      if(loaded) {
        this.arcgisService.constructMap({basemap: this.basemap, elevation: false}).then(map => {
          this.arcgisService.constructSceneView(
            { 
            map: map,
            container: this.id,
            center: this.center,
            zoom: this.zoom
            }
            ).then(sceneView => this.sceneView = sceneView)
        })
      }
    })
  }
}

app.component.html

<div class="container">
	<h2>Custom component</h2>
	<my-map id="map2" basemap="topo" [center]="mapCenter" [zoom]="mapZoomLevel" height="200px" width="100%" style="background: gray">
	</my-map>
</div>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { ArcgisApiService } from './services';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mapCenter = [121.31, 30.35];
  basemapType = 'satellite';
  mapZoomLevel = 12;
  constructor(private arcgisService: ArcgisApiService) { }
  ngOnInit() {
  }
}




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