中国疑间信尟软件技术大会activity.esrichina.com.cn/2019gsis/day22/卢宣蓓_使用JavascriptAPI... ·...

中国空间信息软件技术大会

@浙江 · 德清

使用JavaScript API开发Web GIS应用

易智瑞西安分公司技术支持部卢宣蓓

Web GIS

1. 及时更新数据（可实时更新）

2. 应用及时更新及分发（Software as a service）

3. 连接多个数据源

4. 充分利用数据

5. 允许用户协同合作

6. 用户可以在任何时间任何地点使用应用

7. 认清现在以及未来的发展趋势 (5G，万物互联，数据共享，跨部门协

作)

为什么要开发Web GIS应用?

Web GIS基础构架要素服务: WFS, ArcGIS

Feature Service

影像服务: WMS, WCS,

ArcGIS Image Service

切片服务: WMTS, ArcGIS

Vector Tile Service

3D服务: I3S, ArcGIS

Secne Service

地理处理服务: WPS,

ArcGIS GP Service

空间数据库 GIS服务器 Web服务器浏览器

JS API 4.x

• WebGIS开发必备的前端JS库

• 浏览器调用空间资源

• 基于dojo框架构建

• 与ArcGIS REST API深度结合

• 源代码开源免费

JS API 4.x 简介

模块示例接口

几何 Point, Polygon, Extent

空间数据 FeatureLayer, GraphicsLayer, SceneLayer

可视化 Symbols, Renderers

控件 Compass, Legend, Editor

地理处理 GeometryService, QueryTask

视图 MapView, SceneView, LayerView

其他对象接口 Camera, Viewpoint

其他功能模块 watchUtils, promiseUtils

JS API 构架

Map & View

视图

控制UI上模型的渲染 & 与模型的交互

模型

描述地图/场景中的内容

Map & View

模型


视图


Map & View

创建三维视图

创建二维视图

2D & 3D 地图创建

Basemap：底图 (baseLayers) & 标注 (referenceLayers)Ground：高程图层Operational Layers：要素图层 (FeatureLayer)、地图图像图层

(MapImageLayer) …

var map = new Map({

basemap: "hybrid",

ground: "world-elevation",

layers:[

new FeatureLayer(...),

new MapImageLayer(...),

]

});

图层

已支持图层：https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html

自定义图层- 需要连接当前JS API尚不支持的服务- 需要在客户端展示数据前进一步加工处理- 在线示例：

– Custom TileLayer

– Custom BlendLayer

– Custom LERC Layer

– Custom DynamicLayer

– Custom ElevationLayer - Exaggerating elevation

– Custom ElevationLayer - Thematic data as elevation

– Custom WebGL layer view

图层

图层BaseClass Hooks- BaseDynamicLayer

• getImageUrl(extent, width, height)

指定范围，宽度和高度，返回ImageURL

• fetchImage(extent, width, height)

指定的范围和大小，返回影像。

- BaseTileLayer• getTileUrl(level, row, col)

指定级别，行和列，返回切片URL

• fetchTile(level, row, col)

指定级别，行和列，返回切片

- BaseElevationLayer• fetchTile(level, row, column)

指定级别，行和列，返回切片

自定义图层

自定义图层 – 高程拉伸

图层视图 (LayerView)

模型


图层视图（LayerView）用于绘制图层

视图


图层视图 (LayerView)

作用：可以访问绘制到屏幕上的数据

- FeatureLayerView#queryFeatures()

- GraphicsLayerView#queryGraphics()

- ImageryLayerView#pixelData

在LayerView更新完成后再使用

- updating为false

view.whenLayerView(layer).then(function(layerView) {

layerView.watch("updating", function(value) {

//对layerview进行操作

})

)}

图层视图 – 客户端查询/过滤

可通过自定义图层的视图来扩展定制更多的UI呈现

- BaseLayerView2D （Beta）

attach() 在开始绘制LayerView前调用

render() 可以获取HTML canvas 2D context，自定义绘制内容

detach() 在图层移除后调用，通常用于释放资源

- BaseLayerViewGL2D （ Beta & experimental）

与BaseLayerView类似，但有WebGL的渲染能力

自定义图层视图

自定义图层视图 - 贝塞尔曲线

2D 3D

点 SimpleMarkerSymbol

PictureMarkerSymbol

TextSymbol

PointSymbol3D

LableSymbol3D

线 SimpleLineSymbol LineSymbol3D

面 SimpleFillSymbol

PictureFillSymbol

PolygonSymbol3D

网格 MeshSymbol3D

符号

3D符号示例

提前渲染：WebMap/WebSencevar webmap = new WebMap({

portalItem: { id: "57a33a18ad93400682ff6faadfac0d9f"}});

自定义渲染：Renderervar renderer = {

type: "simple",

symbol: {

type: "simple-line",

color: "#ef37ac",

width: "0.5px",

style: "solid"

}}

智能制图：SmartMappingrendererCreator.createRenderer(params)

渲染

自定义渲染 VS 智能制图

即拿即用的控件：Popup, Legend, Scalebar, Compass, Measure, Print, …

（30+）

响应式设计

4.10新增Sketch、Slice、量测控件

4.11新增编辑控件

控件/Widgets

控件示例

控件组成：View + ViewModel

控件/Widgets

控件模块开发:

- TypeScript：JavaScript类型的超集，它可以编译成纯JavaScript

- JSX：JavaScript的语法扩展，用于描述UI

- esri/core/Accessor：Widget基类

控件/Widgets

Widget生命周期：

- constructor (params) 在控件创建时调用，负责处理初始化时的各种参数

- postInitialize() 在控件已被创建后，未绘制到UI前调用

- render() 用于绘制控件的UI

- destroy() 释放控件实例

TypeScript 装饰器

- @subclass 与declared结合使用，用于创建与dojo.declare兼容的子类

- @property 用于定义Accessor的属性，该属性可使用set()，get()，及

watch()方法

- @renderable 用于在属性值变化时，自动调用render函数重绘UI，与

@property结合使用

控件开发 – 预备知识

控件开发示例 – 生成贝塞尔曲线

及拿即用的主题颜色- light- light-blue- light-green- light-red- light-purple- dark- dark-blue- dark-green- dark-red- dark-purple

自定义主题：https://github.com/jcfranco/jsapi-styles格式：sass

样式/Styling

样式演示

框架使用

以Map为核心- 将框架/库加载到ArcGIS API for Javascript应用中window.dojoConfig = {

packages: [

{

name: "vue",

location: "https://unpkg.com/vue/dist/",

main: "vue"

}

]

};

以框架为核心- 将ArcGIS API for Javascript加载到用某框架构建的应用中

框架使用

Webpack: 用于构建应用程序的现代Web开发工具。它具有许多优点，包括：模块捆绑，依赖图和内置代码优化。

@arcgis/webpack-plugin

注意事项：- 只支持 4.7 +

- 需要可以配置webpack (webpack.config.js)

@arcgis/webpack-plugin

create-react-app next.js Gatsby

配置文件webpack.config.jsconst ArcGISPlugin = require("@arcgis/webpack-plugin");

module.exports = {

plugins: [

new ArcGISPlugin(), //添加ArcGIS Webpack plugin

],

node: {

process: false, //忽略nodejs process

global: false, //忽略nodejs 全局对象fs: "empty" //nodejs fs返回空值

}

};

webpack基础配置

loader: 在webpack中负责转换资源格式/内容（e.g. sass css

minified css）

- ts-loader (typescript javascript)

{"compilerOptions":{"module":"amd"}}

- babel-loader (es6 es5)

{"presets": [["@babel/preset-env",{"modules":"amd"}]]}

ArcGIS JS API Worker配置：由于Worker与webpack兼容性的问题，现需要

提供外部的loader使ArcGIS JS API中的worker正常工作（需要使用CDN

）

- 配置方法：https://github.com/esri/arcgis-webpack-plugin#usage

webpack基础配置

支持ArcGIS API for Javascript 3.x & 4.x

适用于任何的模块加载器

适用于任何框架

esri-loader

npm install --save esri-loader

或yarn add esri-loader

使用方法：import { loadModules } from "esri-loader";

const options = {

url: `http://server/path/to/arcgis-js-api`,

css: `http://server/path/to/esri/css/main.css`

};

loadModules(["esri/Map", "esri/views/MapView"], options)

.then(

([Map, MapView]) => {// 创建map与view }

);

esri-loader

资源库- angular-esri-components （ Angular组件，支持JS API 4.x）- system-plugin-dojo （SystemJS插件，可加载dojo模块）

应用示例- angular-cli-esri-map- ionic2-esri-map- ng2-esri-demo

AngularJS (aka Angular 1)https://github.com/Esri/jsapi-

resources/tree/master/frameworks/angular-1

Angular（2 +）

1. Clone angular-cli-esri-map

2. 安装Angular CLI

3. 创建一个Angular项目

4. 安装esri-loader

5. 安装Esri TypeScript types （可选）

Angular（2 +）示例

git clone https://github.com/andygup/angular-cli-esri-map.git

cd angular-cli-esri-map

npm install @angular/cli

ng new angular-esri-map

cd angular-esri-map


npm install --save @types/arcgis-js-api

6. 创建一个组件

7. 复制&粘贴 �

8. 设置Esri types（tsconfig.app.json与tsconfig.spec.json文件)

9. RUN

Angular（2 +）示例

ng generate component esri-map

copy ..\src\app\esri-map\* src\app\esri-map\

copy ..\src\app\* src\app\

ng serve

"types": ["arcgis-js-api"]

资源库- react-arcgis (ArcGIS JS API React组件包) - esri-loader-react React组件，使用esri-loader）- arcgis-react-redux-legend (ArcGIS JS API 4x图例控制)

应用示例- create-arcgis-app（如何在用Create React App及React Router创建应用后

，使用ArcGIS JS API）- next-arcgis-app （如何在使用Next.js构建的应用程序中使用ArcGIS JS API

）- esri-loader-react-starter-kit （ react-starter-kit 的一个分支，在同构React

应用程序中使用esri-loader）- create-react-app-esri-loader（如何在 create-react-app应用中使用 esri-

loader-react ）

React

1. 创建项目

2. 安装esri-loader

3. 添加地图

4. RUN

或者直接使用create-react-app-esri-loader

Create React App示例

npx create-react-app react-esri-map

cd react-esri-map


npm start

git clone https://github.com/davetimmins/create-

react-app-esri-loader.git

npm install

npm start

谢谢

注：所有示例可以在github中找到（https://github.com/xuanb/arcgis_js_api_demo_basics）

中国疑间信尟软件技术大会activity.esrichina.com.cn/2019gsis/day22/卢宣蓓_使用JavascriptAPI... ·...

Documents

Transcript of 中国疑间信尟软件技术大会activity.esrichina.com.cn/2019gsis/day22/卢宣蓓_使用JavascriptAPI... ·...