JavaScript API构建WebApps实践_宋向阳
JavaScript API构建 WebApps实践 Esri中国信息技术 有限公司 宋 向阳 主要内容 初识 ArcGIS API for JavaScript ArcGIS API for JavaScript 开发进阶 Web AppBuilder for ArcGIS 关于性能调优 初识 ArcGIS API for JavaScript 初识 ArcGIS API for JavaScript ArcGIS API for JavaScript是 Web端实现 ArcGIS所提供 GIS功能的首选 当前最新版本： 3.11 下载地址： https://developers.arcgis.com/en/downloads/ Content Version descriptoin ArcGIS API for JavaScript 3.11 WebGIS API Dojo 1.10.0 js框架 dgrid 0.3.15 data grid put-selector 0.3.5 操作 dom元素 xstyle 0.1.3 CSS loader 初识 ArcGIS API for JavaScript 在线 使用 : ArcGIS API for JavaScript使用方式 本地部署 : W e b 服 务 器 a r c g i s j s a p i j s a p i s d k i n i t . j s d o j o . j s /arcgis_js_api/library/3.11/3.11/esri/css/esri.css“ / /arcgis_js_api/library/3.11/3.11/init.js“ JavaScript IDE WebStorm DreamweaverVisual Studio NotePadSublime Aptana Studio HelloMap(在线 ) Simple Map html, body, #map {height: 100%;width: 100%;margin: 0;padding: 0; } body {background-color: #FFF;overflow: hidden;font-family: “Trebuchet MS“; } var map; require([“esri/map“, “dojo/domReady!“], function(Map) { map = new Map(“map“, {basemap: “topo“, center: [-122.45, 37.75], zoom: 13 }); }); HelloMap(本地化 API) Simple Map html, body, #map {height: 100%;width: 100%;margin: 0;padding: 0; } body {background-color: #FFF;overflow: hidden;font-family: “ Trebuchet MS” ; } var map; require([“esri/map“, “dojo/domReady!“], function(Map) { map = new Map(“map“, {basemap: “topo“, center: [-122.45, 37.75], zoom: 13 }); }); 图层 （ Layer） layers DynamicMapServiceLayer MapImageLayerKMLLayerGraphicsLayer TiledMapServiceLayer ArcGISImageServiceLayer ArcGISDynamicMapServiceLayer ArcGISTiledMapServiceLayer VETiledLayer FeatureLayerLabelLayer StreamLayer GeoRSSLayer OpenStreetMapLayer WMSLayer WMTSLayer WebTiledLayer var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl); 要素（ Graphic） Graphic = Geometry + Attributes + Symbol + InfoTemplate 要素（ Graphic） -Geometry 包含 地物坐标信息的对象 Point:点 Polyline :折线 Polygon:多边 形 ……… var point =new esri.geometry.Point(12961102.028943,4856426.5920973, new esri.SpatialReference({ wkid: 102100 })); 要素（ Graphic） -Symbol Symbol MarkerSymbol SimpleMakerSymbol PictureMakerSymbol TextSymbol FillSymbol SimpleFillSymbol PictureFillSymbol LineSymbol SimpleLineSymbol CartographicLineSymbol 事件 增加事件监听 var mapOnClick_connect = dojo.connect(map, “onClick“, mapOnClickHandler); 移除事件监听 dojo.disconnect(mapOnClick_connect); 处理事件响应 function mapOnClickHandler(evt) { var mapPoint = evt.mapPoint; alert(“x-“ + mapPoint.x + “,y-“ + mapPoint.y); } 任务 （ Task） -QueryTask 1.构造 queryTask var queryTask = new esri.tasks.QueryTask(url); 2.构造查询条件 3.执行 查询 var query = new esri.tasks.Query(); query.where = “NAME =‘ xian “; query.outSpatialReference = {wkid:102100}; query.returnGeometry = true; query.outFields = [“*“]; queryTask.execute(query, function(){alert(“success“)},function(){alert(“false“}); ArcGIS API for JavaScript 开发进 阶 符号缩放 根据属性数据来进行符号大小的缩放 角度旋转 属性驱动的要素图层点符号旋转 点密度渲染 方便地创建点密度视图，表现空间离散的地理现象 依比例尺渲染 依据 要素图层的地图比例值或缩放级别定义渲染器 要素渲染 依比例 大小限制 UniqueValueRenderer ClassBreaksRenderer DotDensityRenderer ScaleDependentRenderer SimpleRenderer TemporalRenderer 要素渲染 renderer.setRotationInfo({field: “WIND_DIREC“}); renderer.setProportionalSymbolInfo({ field: “WIND_SPEED“, minSize: 9, maxSize: 25, minDataValue: 5, maxDataValue: 50, valueUnit: “unknown“ }); 使用 渲染器 layer.setRenderer(renderer); renderer.setColorInfo({ field: “temperatur“, minDataValue: -17, maxDataValue: 40, colors: [ new Color([0,194,214]), new Color([20,120,220]), new Color([39,136,226]), new Color([216,87,115]), new Color([211,53,106]), new Color([206,19,97]),new Color([255,0,0]) ]}); GeometryService 调用 ArcGIS的 GeometryServer服务所提供的能力 长度、面积量算 投影变换、缓冲区分析 几何运算、 要素 简化等 GeometryService var mapPoint = evt.mapPoint; var GeometryService = new esri.tasks.GeometryService(“http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer“); var params = new esri.tasks.ProjectParameters(); params.geometries = [mapPoint]; params.outSR = new esri.SpatialReference({wkid : 21478}); GeometryService.project(params, function(response) { console.log(“response“, response); alert(“x -” + mapPoint.x + “,y -” + mapPoint.y + “ 投影后 “ + “x-“ + response[0].x + “,y-“ + response[0].y);}, function() {alert(“失败 “);}); GeometryService 拖拽文件到地图上，直接显示内容。 与 File API联合 使用 改进用户体验 客户端加载和解析文件，符号化展示 实现方式 使用 addEventListener来监听“ dragenter”、“ dragover”和“ drop”事件。 在 drop事件的处理程序中使用 File API来读取文件，并在地图上显示出来。 Drag and Drop方式加载数据 其他 HTML5特性 Canvas GeoLocation Web Worker LocalStorage Websocket http://developers.arcgis.com/javascript/samples/exp_rasterlayer/ Web AppBuilder for ArcGIS Web AppBuilder for ArcGIS AppBuilder在 ArcGIS10.3中作为 Online/Portal 的一个应用程序 模板 创建运行在浏览器、平板、智能手机上的 HTML/JavaScript应用程序 不需代码编写，即拿即用的 Widget来配置应用程序 创建应用程序可托管到 Online/Portal或者自己的服务器 可配置主题来定制应用程序的界面风格 可定制开发自己的 Widgets或者主题风格 Web AppBuilder for ArcGIS 官网地址： http://doc.arcgis.com/en/web-appbuilder/ Web AppBuilder for ArcGIS 关于性能优化 关于性能优化 AMD(Asynchronous Module Definition) 业务逻辑方面 ArcGIS API for Javascript Web Optimizer AMD(Asynchronous Module Definition) ……………… AMD(Asynchronous Module Definition) AMD(异步 模块 定义 )，采用 异步方式 加载 模块 。模块加载 不 影响后面 语句的运行 。 所有 依赖这些模块的语句都定义在一个回调函数中，加载完成之后这个回调函数才会运行 AMD中两个全局 函数 : Define() Require() define(模块标识，依赖模块，模块实现 )； AMD(Asynchronous Module Definition) ArcGIS API for JavaScript 从 3.4就 开始 完全基于 AMD方式 AMD(Asynchronous Module Definition) 异步的加载机制 ，同时 下载多个 JS文件、减小代码的加载 时间 不会阻塞浏览器，有更好的性能和灵活性 前端 标准化，提高 代码可维护性； 业务逻辑方面 同时展示大量的要素点真的有意义么？ 业务逻辑方面 ——FeatureLayer 要素绘制 优化 方案 ： 只 加载当前地图范围内的 数据； 同时发送多个请求进行 查询； 使用聚合图层，减少绘制量； 使用简单符号； 使用 Compact的 API; 要素 概化 ： 在 小比例尺 下通过概化减少面要素结点数，缩减 数据大小，降低下载时间，绘制 时间 请求参数： outFields -不要 设置 为 ”*” Minscale-最小比例尺 Maxscacle-最大比例尺 图层加载时间（查询 +下载 +绘制） ArcGIS API for Javascript Web Optimizer 官网地址： http://jso.arcgis.com/ 性能提升 文件大小 变化 315-206 请求数量 变化 13-2 总结 ArCGIS API for JavaScript入门 ArCGIS API for JavaScript高级功能 Web AppBuilder for ArcGIS使用策略变化 性能优化的三个方面 开发者中心： https://developers.arcgis.com/en/javascript/ ArcGIS API for JavaScript QQ群： 172180128 学习 资源 《 ArcGIS API for JS 开发教程 》 （ esri中国 产品研究与技术推广部） http://www.html5china.com/ Github： esri.github.com
赶蛙网
