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

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

  1. Ionic集成ArcGIS JavaScript API.md

    1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...

  2. 使用ArcGIS JavaScript API 3.18 加载天地图

    对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...

  3. 如何正确响应ArcGIS JavaScript API中图形的鼠标事件

    在使用ArcGIS JavaScript API编写程序的时候,程序员往往需要完成这样一个功能:点击地图上的图形,自动进行专题GIS数据查询,当在地图非图形区域上点击时,自动进行底图兴趣点查询. 由于 ...

  4. ArcGIS JavaScript API本地部署离线开发环境[转]

    原文地址:http://www.cnblogs.com/brawei/archive/2012/12/28/2837660.html 1 获取ArcGIS JavaScript API API的下载地 ...

  5. ArcGIS JavaScript API 4.x中热度图渲染的使用注意事项

    要使用ArcGIS JavaScript API 4.x的热度图渲染器来渲染要素图层,需要注意几点前提条件: 1.需要使用ArcGIS Server 10.6.1或更高版本发布GIS服务. 2.只支持 ...

  6. Arcgis Javascript API 开发笔记

    JS API3.4的要求 à(1)  IE9或以上版本 否则dijit1.8.3不匹配 1.如何发布ArcgisJavascript API应用 0.准备工作: (1).有web应用: (2).有js ...

  7. ArcGIS Javascript API 加载高德在线地图扩展

    利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_b ...

  8. Arcgis javascript api 动态图层自图层可见性设置

    Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...

  9. 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 ...

随机推荐

  1. 【转】Geometry cannot have Z values

    http://blog.csdn.net/tweeenty/article/details/44246407 在对矢量要素类添加要素,进行赋几何信息时(FeatureBuffer.Shape = IG ...

  2. Android基础笔记(十三)- 内容提供者原理和简单使用

    为什么要有内容提供者 内容提供者的工作原理 使用内容解析者对内容提供者进行增删改查操作 利用内容提供者和内容解析者备份手机短信 利用内容提供者插入短信 为什么要有内容提供者 内容提供者技术的目的是: ...

  3. PHP第九课 正則表達式在PHP中的使用

    今天内容 1.正則表達式 2.数学函数 3.日期函数 4.错误处理 正則表達式: 1.模式修正符 2.五个经常使用函数 另外一个正則表達式的站点:http://www.jb51.net/tools/z ...

  4. SVN过滤设置

    为了方便管理我们的系统版本号.非常多人会用到SVN,开发中我们经经常使用到SVN插件, 可是对于某些文件的缓存来说, 我们仅仅要有操作缓存便会保存一次, 每次提交非常是麻烦, 可能有的文件或者目录我们 ...

  5. Android笔记---点击事件的四种写法

    Android 点击事件的四种写法: 1. 以内部类的形式实现 OnClickListener 接口.定义点击事件 class MainActivity extents Activity{ // .. ...

  6. poj_2187凸包,暴力解法

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...

  7. spark pipeline 例子

    """ Pipeline Example. """ # $example on$ from pyspark.ml import Pipeli ...

  8. SSL 延迟与 Http、Https

    SSL延迟有多大? 1. 基本概念 ssl 协议由网景公司(Netscape)设计,由此网络链接从 http 逐步走向更为安全的 https 加密链接模式. HTTPs 链接和 HTTP 链接都建立在 ...

  9. canvas指定的宽高写在行间和写在style里面的区别?

    上代码,指定的canvas宽高都一样,线条的粗细都是5px 1.宽:400:高:300:直接写在<canvas>里的效果: 2.删除<canvas>里的宽高,宽:400:高:3 ...

  10. c# 值类型 之枚举

    1声明枚举(enum)类型的变量 enum 变量名 { //标识符列表中,元素与元素之间用 , 逗号分隔: 标识符列表 } 枚举列表中的每个符号代表一个整数值,一个比他前面符号大的整数值,默认情况下, ...