Ionic2集成ArcGIS JavaScript API.md

1. Ionic同原生ArcGIS JavaScript API结合

1.1. 安装esri-loader

在工程目录下命令行安装:

npm install angular2-esri-loader esri-loader；

1.2. 构造地图Component

将map.rar这个Component解压到pages文件夹下
这是一个实现参考，定义了一个地图展示Component。
ts代码：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

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

@Component({
  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html'
})
export class EsriMapComponent implements OnInit {
  map: any;
  agoLayer: any;
  constructor(private esriLoader: EsriLoaderService) { }

  ngOnInit() {
    // only load the ArcGIS API for JavaScript when this component is loaded
    return this.esriLoader.load({
      // use a specific version of the API instead of the latest
      url: 'http://10.10.70.85:6090/arcgis_js_api/library/3.20/3.20/init.js'
    }).then(() => {
      // load the map class needed to create a new map
      this.esriLoader.loadModules(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer"]).then(([Map, ArcGISTiledMapServiceLayer]) => {
        // create the map at the DOM element in this component
        this.map = new Map("mapDiv");
        let agoServiceURL = "http://10.10.70.176:6080/arcgis/rest/services/clzhgwnew/cldx/MapServer";
        this.agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
        this.map.addLayer(this.agoLayer);
      });
    });
  }
}

template代码：

<div id="mapDiv"></div>

1.3. 在app.module.ts中增加引用

import { EsriLoaderService } from 'angular2-esri-loader';
import { EsriMapComponent } from '../pages/map/esri-map.component';
@NgModule({
  declarations: [
    ...
    EsriMapComponent,
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
    EsriMapComponent,
    ...
  ],
  providers: [
    ...
    EsriLoaderService,
    ...
  ]
})
export class AppModule { }

1.4. 增加相关的CSS引用

在index.html中增加如下CSS的引用：

<link rel="stylesheet" href="http://10.10.70.85:6090/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />

1.5. 地图Component测试

随便找个页面增加如下标签即可显示地图：

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

2. 同自己封装的Dojo组件集成

这里的主要问题是Dojo的组件是基于AMD的模块加载机制进行编写和加载的，主要解决的是Dojo的模块发现和加载。
需要基于第1节中的描述，增加如下配置：

2.1 模块发现

模块发现，还是借助于Dojo的dojoConifg配置项，在index.html的<head>中增加配置项的内容：

<script>
  var dojoConfig = {  
    parseOnLoad:false,  
    packages: [
      {  
        "name": "must",  
        "location": "/assets/gis/must"  
      },
      {  
        "name": "modules",  
        "location": "/assets/gis/modules"  
      }
    ]  
  }; 
</script>

这样需要将自己定义的Dojo组件拷贝到src/assets/下的gis`目录下（手工新建目录即可），实现自动同步。

2.1 组件加载

然后就借助于1.2节中的描述，使用esriLoader进行组件加载即可，代码示例如下：

ngOnInit() {
  // only load the ArcGIS API for JavaScript when this component is loaded
  return this.esriLoader.load({
    // use a specific version of the API instead of the latest
    url: 'http://10.10.70.85:6090/arcgis_js_api/library/3.20/3.20/init.js'
  }).then(() => {
    // load the map class needed to create a new map
    this.esriLoader.loadModules(["esri/map",
      "must/LoadMap",
      "esri/geometry/Point",
      "must/Toolbar",
      "must/mapHandle/MapHandle"]).then(([Map, LoadMap, Point, Toolbar, MapHandle]) => {
        //创建右侧工具栏
        var mapTool = new MapHandle();
        this.gis.loadMap = new LoadMap("mapDiv", mapTool);
        var map = this.gis.loadMap.getMap();
        this.gis.toolbar = new Toolbar(map);
        map.on('load', function () {

        });
      });
  });
}
posted @ 2017-05-17 17:18  Gavin·Gong  阅读(705)  评论(0)  编辑  收藏  举报