工作开发参考 - yulilong/my_blog GitHub Wiki

npm install angular2-esri-loader esri-loader --save

~ npm install angular2-esri-loader --save
~ npm install @types/arcgis-js-api --save

# arcgis-map.component.css   
/* import the required JSAPI css */
@import 'https://js.arcgis.com/4.3/esri/css/main.css';
.esri-view {
    height: 800px;
}

# arcgis-map.component.html
<h1>arc-gis地图</h1>
<div #mapViewNode></div>

# arcgis-map.component.ts 
import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
// also import the "angular2-esri-loader" to be able to load JSAPI modules
import {EsriLoaderService} from 'angular2-esri-loader';

@Component({
  selector: 'arc-gis-map',
  templateUrl: 'arcgis-map.component.html',
  styleUrls: ['./arcgis-map.component.css'],
  providers: []
})

export class ArcGisMap {
  public mapView: __esri.MapView;
  @ViewChild('mapViewNode') private mapViewEl: ElementRef;
  constructor(private esriLoader: EsriLoaderService) {
  }
  public ngOnInit() {
    // only load the ArcGIS API for JavaScript when this component is loaded
    return this.esriLoader.load({
      // use a specific version of the JSAPI
      url: 'https://js.arcgis.com/4.3/'
    }).then(() => {
      // load the needed Map and MapView modules from the JSAPI
      this.esriLoader.loadModules([
        'esri/Map',
        'esri/views/MapView'
      ]).then(([
        Map,
        MapView
      ]: [ __esri.MapConstructor, __esri.MapViewConstructor]) => {
        const mapProperties: __esri.MapProperties = {
          basemap: 'topo'
        };
        const map = new Map(mapProperties);
        const mapViewProperties: __esri.MapViewProperties = {
          // create the map view at the DOM element in this component
          container: this.mapViewEl.nativeElement,
          // supply additional options
          center: [72.566, 23.0396],
          zoom: 4,
          map // property shorthand for object literal
        };
        this.mapView = new MapView(mapViewProperties);
      });
    });
  }
}

# 在这个组件的上层模块中引入包的服务
# charts.module.ts
import {EsriLoaderService} from 'angular2-esri-loader';
@NgModule({
  imports: [CommonModule, ChartModule],
  declarations: [Charts],
  providers: [EsriLoaderService],
  bootstrap: [Charts]
})

{
 "types": [
      "hammerjs",
      "arcgis-js-api",  //ArcGIS需要这个
      "uglify-js",
    ]
}