Angular2+中使用angular2-esri-loader加载ArcGIS JS API（官方已弃用）

###安装环境

   使用esri-load1.0版本加载，更高版本已经弃用angular2-esri-loader，直接使用esri-loader加载，代码详见npm esri-loader

npm install --save angular2-esri-loader@1.0.0 
npm install --save esri-loader@1.0.0

###在 module  中引入EsriLoaderService

i

mport { EsriLoaderService } from 'angular2-esri-loader';

@NgModule({
 …
	providers: [
		EsriLoaderService,
		…
	],
…
})

###在index.html中引入 ArcGIS JS API 的样式

<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />

###配置相关的ArcGIS JS文件

//配置arcgis api
在index.html中配置dojoconfig（包含了开发需要的js路径）
<script>
  var dojoConfig = {  
    parseOnLoad:false,  
    packages: [
      {  
         "name": "bism",
         "location": "/assets/gis" 
      }
    ]  
  }; 
</script>

###创建承载地图的组件esriMap

ng g c esriMap

###在esri-map.component.html 中设置地图容器

<div id='mapDiv'></div>

###在esri-map.compontent.ts中的实现

import { Component, OnInit } from '@angular/core';
//导入服务
import {EsriLoaderService} from 'angular2-esri-loader'

@Component({
  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html',
  styleUrls: ['./esri-map.component.css']
})
export class EsriMapComponent implements OnInit {
  //地图对象
  map: any;
  constructor(private esriLoaderService:EsriLoaderService) { }

  ngOnInit() {
    return this.esriLoaderService.load({
      //ArcGIS API地址
      url:"http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"
    }).then(()=>{
      this.esriLoaderService.loadModules([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer"
      ]).then(([Map,ArcGISDynamicMapServiceLayer])=>{
        this.map = new Map("mapDiv");
        let layerUrl = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/SampleWorldCities/MapServer");
        this.map.addLayer(layerUrl);
      })
    })
  }

}

###将esri-Map组件添加到跟组件 app.component.html中

<app-esri-map></app-esri-map>

###运行 项目  查看

ng serve -o

###结果

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