###安装环境
使用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
###结果