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 () {

        });

      });

  });

}

Ionic集成ArcGIS JavaScript API.md的更多相关文章

Ionic2集成ArcGIS JavaScript API.md
1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...
使用ArcGIS JavaScript API 3.18 加载天地图
对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...
如何正确响应ArcGIS JavaScript API中图形的鼠标事件
在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于 ...
ArcGIS JavaScript API本地部署离线开发环境[转]
原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...
ArcGIS JavaScript API 4.x中热度图渲染的使用注意事项
要使用ArcGIS JavaScript API 4.x的热度图渲染器来渲染要素图层,需要注意几点前提条件: 1.需要使用ArcGIS Server 10.6.1或更高版本发布GIS服务. 2.只支持 ...
Arcgis Javascript API 开发笔记
JS API3.4的要求 à(1) IE9或以上版本否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...
ArcGIS Javascript API 加载高德在线地图扩展
利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...
Arcgis javascript api 动态图层自图层可见性设置
Arcgis javascript api 动态图层自图层可见性设置子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...
ArcGIS JavaScript API with jQuery: Error: multipleDefine
I would like to use ArcGIS JavaScript API 4.3 with jQuery, but I am getting following errors. I sea ...

随机推荐

HANA CDS与ABAP CDS
如果你在网络或者SCN上面搜索CDS,即SAP的Core Data Services,你会很容易地找到类似“Core Data Services(CDS)是一个在SAP HANA中用于定义和消费富语义 ...
Docker镜像压缩
一.Dockerfile合理分层 Dockerfile的写法不合理,有时候会导致镜像膨胀,由于Docker是分层设计,而在Dockerfile中,每一条指令都拥有自己的context,而执行到下一条指 ...
js控制滚动条默认在底部
html: <div id="chat_content" class="chat_content"> < ...
请不要把‘通知的观察者注册’放在-viewWillAppear:中
接手项目二次开发的吐槽: 接手别人的代码的悲哀之一就是,我反复的把流程走了一遍又一遍,却始终无法发现原来是这个问题. 之前这个人把通知的观察者注册放在了-viewWillAppear:中,导致,我发送 ...
利刃 MVVMLight 5：绑定在表单验证上的应用
表单验证是MVVM体系中的重要一块.而绑定除了推动 Model-View-ViewModel (MVVM) 模式松散耦合逻辑.数据和 UI定义的关系之外,还为业务数据验证方案提供强大而灵活的支持 ...
swfupload多图上传插件（ASP.NET）
<script src="../js/swfupload/swfupload.js" type="text/javascript"></scr ...
DateTime.Now的一些用法
System.DateTime.Now.ToString("D"); //Tuesday, December 13, 2016 System.DateTime.Now.ToSt ...
战斗逻辑 - demo
创建战斗依赖的数据结构 /** * 角色属性 */ var a_data = { _id: 101, attr: { // 角色战斗属性 }, skill: [],// 技能数组 isAtk: fal ...
跟Microsoft.AspNet.Identity学习哈希加盐法
什么是哈希加盐法? 废话少说:对于MD5这种加密算法,同样的密码每次加密后得到的密文是一样的,所以黑客可以利用已知的密码库(彩虹库)对目标数据库密文进行对比进行攻击. 怎样解决:哈希加盐法,以下是网上 ...

Ionic集成ArcGIS JavaScript API.md