Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
中国空间信息软件技术大会
@浙江 · 德清
使用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
模型
描述地图/场景中的内容
视图
控制UI上模型的渲染 & 与模型的交互
Map & View
模型
描述地图/场景中的内容
视图
控制UI上模型的渲染 & 与模型的交互
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)用于绘制图层
视图
控制UI上模型的渲染 & 与模型的交互
图层视图 (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
及拿即用的主题颜色- 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 esri-loader
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 install --save esri-loader
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)