Ionic集成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 () {
});
});
});
}
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 ...
随机推荐
- 浅谈C10K问题
在大型的APP中进行高并发的访问,淘宝,支付宝,微信,QQ,等 C10K问题:高并发的进行访问 C10K问题的最大特点是:设计不够良好的程序,其性能和连接数及机器性能的关系往往 是非线性的.举个例子: ...
- CentOS 7 Root用户密码重置 2017-04-02
跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 开机的时候按e (如果正在使用,你可以输入reboot,然后赶紧按回车键,也可 ...
- 玩转 SSH（一）：使用 Struts 搭建简单站点
我们将使用 Struts 搭建一个简单的应用,当用户发送 HTTP 请求时,Action 类响应并设置返回信息,JSP 页面显示 Action 类中设置的信息. 首先,我们使用 Maven 的 mav ...
- 4日6日--ES5新增数组方法
forEach使用的函数调用,所以占内存比较大,不如定长for循环和迭代for循环 1.通过forEach将数组中的元素逐个表示出来(遍历方法,读取操作). 2.通过map将原数组中的元素进行算数运算 ...
- mysql笔记一——安装和设置root密码
1. mysql 5.6安装包下载. MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提 ...
- 子div块中设置margin-top时影响父div块位置的解决办法
在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...
- activiti 5.13 使用activiti设置用户组任务的 工作流的角色
1.设置activiti 流程引擎的用户,组别,关系/**在部署流程定义和启动流程实例的中间,设置组任务的办理人,向Activiti表中存放组和用户的信息*/ IdentityService iden ...
- python_Tornado_web_框架_分页
如何实现web_框架_分页? -- 思考什么是xss跨站攻击? --别人把js代码提交到后台,然后从后台返回数据的时候,别人上传的js变成html中的代码, 就会插入别人的代码,带来极大的信息泄露的风 ...
- AM335X开发板学习系列——环境搭建（vbox虚拟机ubuntu14.04下minicom的安装和配置）
这个系列是我学习AM335X的总结. 1. ubuntu虚拟机的USB设备,选择启用usbserial 2. ubuntu虚拟机的网络,采用桥接模式,以保证开发板和ubuntu虚拟机能互相ping通 ...
- 使用Dockerfile制作自己的Docker镜像
一.背景 一直以来的开发流程都是先从Docker Hub中获取到基础镜像,之后在这个镜像的基础上做开发,以满足一定的需求或者提供某种服务,并由此产生新的镜像,然后就可以push到Docker Hub中 ...