当前位置：文档之家 › ArcGIS API for Javascript&Html5 应用开发

ArcGIS API for Javascript&Html5 应用开发

  • 格式：pdf
  • 大小：2.58 MB
  • 文档页数：68

DEMO
多图层属性查询：FindTask
• 查询同一个地图服务的多个图层。 • 仅能查询属性信息。
DEMO
多图层几何查询：IdentifyTask
• 查询同一个地图服务的多个图层。 • 仅能通过几何图形来查询。
• 地图导航
• 居中、漫游、缩放等设置
ArcGIS Layers
• ArcGISTiledMapServiceLayer
• 通过使用ArcGIS Server Rest API调用ArcGIS Server的 MapServer（已创建Cache）
• ArcGISDynamicMapServiceLayer
ArcGIS Server Rest API
Rest
• REST(Representational State Transfer表述性状态转移) 是一种针对网络应用的设计和开发方式，可以降低开发 的复杂性，提高系统的可伸缩性。 • REST原则
– 网络上的所有事物都被抽象为资源（resource） – 每个资源对应一个唯一的资源标识（resource identifier） – 通过通用的连接器接口（generic connector interface）对资源 进行操作 – 对资源的各种操作不会改变资源标识 – 所有的操作都是无状态的（stateless）
• 另一种选择CROS。
Task的一般调用方法
• Task.execute(parameters,callback,errorback)
• parameters：调用时的输入参数 • callback：回调函数 • errorback：错误回调函数
单图层查询：QueryTask
• 查询一个地图服务中的单个图层 • 可进行属性查询、几何查询或二都同时查询。
Graphic
• Graphic：在GraphicsLayer绘制显示的图形对象。 • Graphic=Geometry+Attribute+Symbol+Infotempla te。
Graphic
• Geometry=new esri.geometry.Point116.596664, 40.071667,
• Geometry • Symbology
• Toolbars
– ArcGIS Server Symbology
– Edit, Draw, Navigation
WebGIS Application Lite
加载地图 • Layer
查询分析
• Task
• Graphic
地图展示
Infowindow
Map & Layer
加载地图
Map Control
• 创建DIV用于显示地图
• <div id="divMap" ></div>
• 创建Map对象
• var Map=new esri.Map("divMap”);
• 主要功能
• 图层管理
• 添加、删除、遍历
• 显示设置
• Extent、 ArcGISTiledMapService Layer相关、屏幕地图坐标转换 ……
ArcGIS API for JavaScript 简介
什么是ArcGIS API for JavaScript?
• 首先发布于ArcGIS 9.3. • 调用ArcGIS Server REST API的一组JavaScript脚本。 • 基于功能强大的Dojo工具包
可以做什么？
• 快速创建交互式的地图应用 • 使用ArcGIS Server的REST API，可以实现显示、查询、 分析等功能。
• Map Control • Support for Webmap • Layers • Graphics • Tasks
– Tiled, Dynamic, FeatureLayer, WMS, WMTS, KML, Graphics
– GP, Network, Geometry, Query, Locator
Infowindow Lite
• 使用CSS样式定义Infowindow Lite外观。
DEMO
InfowindowBase
• 继承InfowindowBase创建自定义Infowindow。 • 需要实现实现几个方法
• Hide, show, setContent, setTitle, resize • 使用CSS来设置Infowindow的样式
• 通过REST服务页面可以快速把握ArcGIS Server的内容
– http://<host>:<port>/arcgis/rest/services
Dojo基础
加载Dojo模块 – dojo.require("esri.map");
Dojo初始化事件，在页面加载后执行程序
– dojo.addOnLoad(init) ;
Infowindow
信息显示
Infowindow
• • • • 每个地图仅有一个InfoWindow InfoWindow包括标题(Title)和内容(Content) InfoWindow可以指定位置显示 如果Graphic定义了InfoTemplate，则点击Graphic显示 InfoTemplate所定义的InfoWindow
Dojo事件
– dojo.connect(dijit.byId('map'), 'resize', function (){}); – dojo.connect(Map, "onMouseMove", MapMouseMove); • function MapMouseMove(evt) {}
API
• 纯粹的客户端语言(运行在客户端的浏览器内)，包括桌面 和移动端 • 有各种成熟的JavaScript框架：Dojo、jQuery、ExtJS、 Prototype、YUI……
Dojo
• Dojo宽松的使用许可 • Academic Free License & BSD • Dojo功能全面，采用事件设计模式、支持矢量图形、而 且 widgets、Ajax、JSON等都是ArcServer客户端开发 所需要的，并且Dojo利于扩展，方便Mashup应用 • BM、Sun、AOL等公司的支持 • 活跃开发社区 • 支持多种客户端、浏览器
• 调用ArcGIS Server的GP服务，提供专业的分析结果 • 可以同时调用多个ArcGIS Server的服务，轻松实现融合 应用。
为什么选择JavaScript
• 所有的主流的浏览器均支持JavaScript，无需安装任何插 件
• JavaScript是世界最常用的开发语言之一，轻量级的 Web开发脚本语言
ArcGIS API for JavaScript & HTML5 应用开发
Esri中国信息技术有限公司 赖小辉
目录
ArcGIS API for JavaScript 简介 ArcGIS API for JavaScript 基础 ArcGIS API for JavaScript 进阶
HTML5 in ArcGIS API for JavaScript
• Polygons
SimpleFillSymbol, PictureFillSymbol
• Text
TextSymbol, Font
Infotemplate
• 用于定义InfoWindow的标题和内容格式 • 定义格式所用的字符串可包含任何HTML • 可以使用${Attribute}来代替值
var infoTemplate = new Template("${Name}","城市： ${City}<br/>经度：${Longitude}<br/>纬度：${Latitude}");
• 创建实例后，与普通的Infowindow调用方法相同
DEMO
Popup
• 继承自InfowindowBase，并提供额外的功能
• 浏览多选结果 • 缩放及高亮选择要素 • 可以最大化
DEMO
PopupMobile
• 继承自InfowindowBase，并提供额外的功能
• 浏览多选结果 • 高亮选择要素 • 可以最大化
• 通过使用ArcGIS Server Rest API调用ArcGIS Server的 MapServer（未创建Cache）。
• ArcGISImageServiceLayer
• 通过使用ArcGIS Server Rest API调用ArcGIS Server的 ImageServer。
OGC Layers
• <serverUrl url="http://192.168.110.160:6080/arcgis/rest/services/" matchAll="true"></serverUrl>
• 在代码中添加
• esri.config.defaults.io.proxyUrl = "proxy.ashx";
GraphicsLayer & Graphic
客户端绘制
GraphicsLayer
• 显示和管理Graphic对象 • Map.graphics：缺省的GraphicsLayer，所有图层的最 顶端。 • 创建GraphicsLayer
var graphicsLayer = new yers.GraphicsLayer({opacity:0.20}); map.addLayer(graphicsLayer);

合集下载

ArcGISAPIForJavascript之GraphicsLayer

ArcGISAPIForJavascript之GraphicsLayer

ArcGISAPIForJavascript之GraphicsLayer1.引⾔在ArcGIS API中有⼀种图层叫做GraphicsLayer，GraphicsLayer是⼀种客户端图层，GraphicsLayer中的图形我们称作Graphic，它对应着esri/graphic，⼀个Graphic对象由四部分组成：geometry,symbol,attribute,infoTemplate组成，Graphic对象在我们开发中⽤到的⾮常多。

例如：利⽤Graphic实现图形的⾼亮显⽰等等。

2.需求在我们开发当中，关于Graphic的使⽤⾮常多，我们可以利⽤Graphic实现各种各样的功能。

接下来我们根据⼀些需求来完成相应的功能。

2.1.根据具体坐标⽣成Graphic在我们的实际开发当中可能会存在这样的需求：根据坐标以及形状⽣成相应的图形然后在地图显⽰出来在上⾯说过⼀个Graphic由四部分组成，在需求中我们已经知道坐标形状，即已经知道了geometry,因此我们可以直接根据坐标⽣成相应的geometry，从⽽创建Graphic，然后添加到地图中来。

2.1.1代码实现我们⾸先创建⼀个html页⾯，引⼊相应的⽂件将地图加载进来<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Graphic</title><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /><script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script><style>.MapClass{width:100%;height:500px;border:1px solid #000;}</style><script>require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","dojo/domReady!"],function(Map,ArcGISDynamicMapServiceLayer){var map = new Map("mapDiv");var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer");map.addLayer(layer);})</script></head><body><div id="mapDiv" class="MapClass"></div></body>创建四个按钮，将四类不同的Graphic添加到GraphicsLayer中<button>添加点</button><button>添加线</button><button>添加⾯</button><button>添加圆</button>12341234引⼊相应的模块，其中包括：dojo/on（⽤于绑定事件的模块）esri/symbols/SimpleMarkerSymbol（点符号类）esri/symbols/SimpleLineSymbol（线符号类）esri/symbols/SimpleFillSymbol（⾯符号类）esri/geometry/Point（点类）esri/geometry/Polyline（折线类）esri/geometry/Polygon（⾯类）esri/geometry/Circle（圆类）dojo/query（dojo的选择器，⽤于选择DOM元素）esri/graphic（图形类）esri/layers/GraphicsLayer（客户端图层类）为相应的按钮添加绑定事件//创建客户端图层var graphicsLayer=new GraphicsLayer();//将客户端图层添加到地图中map.addLayer(graphicsLayer);//通过query查询到button对象var btns=query("button");on(btns,"click",function(event){//获得按钮的⽂本var text=this.innerHTML;//定义线符号var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);//定义点符号lvar pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0])); //定义⾯符号var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0]));//声明⼀个类型和图形var geometry;var graphic;//根据⽂本定义相应的geometryswitch(text){case "添加点":geometry=new Point({"x":510706,"y":3986100,"spatialReference":map.spatialReference});graphic=new Graphic(geometry,pSymbol);break;case "添加线"://点的坐标对var paths=[];paths[0]=[[510326,3985702],[510994, 3985676],[511078, 3985903],[510433, 3985928]];geometry=new Polyline({"paths":paths,"spatialReference":map.spatialReference})case "添加⾯"://点的坐标对var ring=[];ring[0]=[[510275, 3986100],[510508, 3986162],[510596, 3986032],[510271, 3985847],[510275, 3986100]];geometry=new Polygon({"rings":ring,"spatialReference":map.spatialReference });graphic=new Graphic(geometry,fill);break;case "添加圆"://圆⼼var p=new Point({"x":510706,"y":3986100,"spatialReference":map.spatialReference });//半径var r=20;geometry=new Circle(p,{"radius":r});graphic=new Graphic(geometry,fill);break;}//将图形添加到图层中graphicsLayer.add(graphic);1234567891011121314151617181920212223242526272829303132333435363738394142434445464748495051525354555657585960616263646566676869707172737475767778791234567891011121314151617182.1.2全部代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Graphic</title><link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />.MapClass{width:100%;height:500px;border:1px solid #000;}</style><script>require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/GraphicsLayer","dojo/on","dojo/query","dojo/colors","esri/graphic","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleFillSymbol","esri/geometry/Point","esri/geometry/Polyline","esri/geometry/Polygon","esri/geometry/Circle","dojo/domReady!"],function(Map,ArcGISDynamicMapServiceLayer,GraphicsLayer,on,query,Color,Graphic,SimpleMarkerSymbol,SimpleLineSymbol,SimpleFillSymbol,Point,Polyline,Polygon,Circle){var map = new Map("mapDiv");var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer");map.addLayer(layer);//创建客户端图层var graphicsLayer=new GraphicsLayer();//将客户端图层添加到地图中map.addLayer(graphicsLayer);//通过query查询到button对象var btns=query("button");on(btns,"click",function(event){//获得按钮的⽂本var text=this.innerHTML;//定义线符号var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);//定义点符号lvar pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0])); //定义⾯符号var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0]));//声明⼀个类型和图形var geometry;var graphic;//根据⽂本定义相应的geometryswitch(text){case "添加点":geometry=new Point({"x":510706,"y":3986100,"spatialReference":map.spatialReference});graphic=new Graphic(geometry,pSymbol);break;case "添加线"://点的坐标对var paths=[];paths[0]=[[510326,3985702],[510994, 3985676],[511078, 3985903],[510433, 3985928]];geometry=new Polyline({"paths":paths,"spatialReference":map.spatialReference})graphic=new Graphic(geometry,lineSymbol);break;case "添加⾯"://点的坐标对var ring=[];ring[0]=[[510275, 3986100],[510508, 3986162],[510596, 3986032],[510271, 3985847],[510275, 3986100]];geometry=new Polygon({"rings":ring,graphic=new Graphic(geometry,fill);break;case "添加圆"://圆⼼var p=new Point({"x":510706,"y":3986100,"spatialReference":map.spatialReference});//半径var r=20;geometry=new Circle(p,{"radius":r});graphic=new Graphic(geometry,fill);break;}//将图形添加到图层中graphicsLayer.add(graphic);})})</script></head><body><div id="mapDiv" class="MapClass"></div><button>添加点</button><button>添加线</button><button>添加⾯</button><button>添加圆</button></body></html>2.1.3代码解释我们利⽤dojo/query查询到所有的button对象，利⽤dojo/on模块给所有的button对象绑定事件。

ArcGIS1Server和ArcGISAPIforJavaScript实现点线面的buffer分析

ArcGIS1Server和ArcGISAPIforJavaScript实现点线面的buffer分析

ArcGIS.Server.9.3和ArcGIS API for JavaScript实现点、线、面的buffer分析目的：1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现实现点、线、面的buffer分析，这里是通过GeometryServer实现。

准备工作：1. 在ArcGis Server9.3中发布名为usa的MapServer。

2. 在ArcGis Server9.3中发布名为Geometry的GeometryServer。

完成后的效果图：开始0.关于GeometryServer的介绍，可以看本系列的第九篇。

1.启动vs新建名为BufferSample的 Web应用程序。

其实jsapi是纯客户端的开发了不需要vs也不需要.net了，纯html页面就可以了用记事本都可以开发了。

我这里为了方便了就用vs2008了，毕竟可以调试js脚本了。

2.接着在工程中添加名为javascript的文件夹并且在这个文件夹里新建wabapp.js的文件，这里用来编写我们自己的js代码了，在Default.aspx页面里添加对这个js文件的引用，同时在Default.aspx页面里添加一个id为map的div标签作为地图控件的载体、5个input的功能按钮、2个input的输入框、1个select 选择列表：<%@ Page Language=“C#“AutoEventWireup=“true“CodeBehind=“Default.aspx.cs“Inherits=“Buf ferSample._Default“ %><!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN””/TR/xht ml1/DTD/xhtml1-transitional.dtd”><html xmlns=”/1999/xhtml” ><head runat=”server”><title>Untitled Page</title><link rel=”stylesheet”type=”text/css”href=”/jsapi/arcgis/1.2/js/d ojo/dijit/themes/tundra/tundra.css”><script src=”/jsapi/arcgis/?v=1.2″type=”text/javascript”></script ><script src=”javascript/webapp.js”></script><style type=”text/css”>#Text1{width: 54px;}</style></head><body class=”tundra”><form id=”form1″runat=”server”><table><tr><td><div><input id=”Button1″type=”button”value=”点”onclick=”tb.activate(esri.toolbars.Draw.POINT) ;map.hideZoomSlider();” />&nbsp;<input id=”Button2″type=”button”value=”线”onclick=”tb.activate(esri.toolbars.Draw.LINE); map.hideZoomSlider();” />&nbsp;<input id=”Button3″type=”button”value=”面”onclick=”tb.activate(esri.toolbars.Draw.POLYG ON);map.hideZoomSlider();” />&nbsp;<input i d=”Button4″type=”button”value=”漫游”onclick=”tb.deactivate();map.showZoomSlider();” />&nbsp;&nbsp;WKID:<input id=”wkid”style=”width:40px”type=”text”value=”102113″ />Buffer距离:<input id=”distance”style=”width:40px”type=”text”value=”25″ /><select id=”unit”name=”unit”><option value=”UNIT_STATUTE_MILE”>英里</option><option value=”UNIT_FOOT”>码</option><option value=”UNIT_KILOMETER”>千米</option><option value=”UNIT_METER”>米</option><option value=”UNIT_NAUTICAL_MILE”>海里</option><option value=”UNIT_US_NAUTICAL_MILE”>美式海里</option><option value=”UNIT_DEGREE”>度</option></select><input id=”Button5″type=”button”value=”清除”onclick=”map.graphics.clear();” /></div></td><td></td></tr><tr><td><div id=”map”style=”width:550px; height:400px; border:1px solid #000;”></div></td><t d valign=”top”align=”left”>dd</td></tr></table></form></body></html>3、上面的html代码中主要可以看一下5个input按钮的onclick事件，分别实现了画点、画线、画面、漫游、清楚图形的代码很简单了，还有就是单位选择的select了已经添加了7个常用的单位。

ArcGIS-API-for-JavaScript入门教程

ArcGIS-API-for-JavaScript入门教程

ArcGIS API（）的主页使得开发者能开始获取和使用 API。该页面为新的 JavaScript 开发者提供了良好的入门资源也为熟练的开发者提供更为详细的 API 参考
GitHub
ESRI 采用 GitHub（esri.github.io）作为其开源平台，开发者能够克隆和提交其中的代码 库。ESRI 的开发库严格按照 GitHub 的标准规范要求，包含 README 文件，问题处理和 wiki 说明文档。使用 GitHub 开发者能够实时获取 ESRI 发现的问题，有那些问题被处理， 新提交了那些代码等。
学习内容
ArcGIS 平台 开发者资源 API 结构 开发流程
学习目标
掌握 ArcGIS 开发者能够获取到的资源 列举出 ArcGIS API for JavaScript 的特性和组件 使用 API 在 html 页面中添加 Map
ArcGIS 平台
ArcGIS 平台，提供了丰富的 SDK 和 API 使开发者能够开发许多地理应用程序。平台以 Web GIS 为核心，由 portal，应用程序，内容和设施组成用来支持以地理核心的工作流。开发者 通过这些工具能够在不同的 web 端和移动开发自己的应用程序用来创造，展示和分析地理 信息。ArcGIS API for JavaScritp 就是这样的 API 工具用来构建自己的 web 地理应用程序。
STEP1. 创建 html 页面
打开 WebStorm 创建或者打开一个 project 创建一个新的 index.html 页面
STEP2： 引用 ESRI 的 JS 库
打开 index.html 页面 打开浏览器访问 ，从主页中获取必须使用的<link>和<script>标签。
arcgis api for js4.0例子

arcgis api for js4.0例子

arcgis api for js4.0例子ArcGIS API for JavaScript 4.0 是一个强大的地理信息系统（GIS）开发工具包，用于构建交互式和高性能的地图应用程序。

它提供了丰富的功能，可以帮助开发人员在Web 环境中呈现、分析和编辑地理空间数据。

在本文中，我们将以中括号为主题，详细介绍ArcGIS API for JavaScript 4.0的各个方面和功能，以及如何使用这个工具包来构建强大的地图应用程序。

第一节：概述ArcGIS API for JavaScript 4.0是一种用于构建专业级地理信息系统应用程序的工具包。

它采用了最新的Web 技术，包括HTML5、CSS3和JavaScript，以实现在现代浏览器中可视化、分析和处理地理空间数据的能力。

第二节：基本概念和功能ArcGIS API for JavaScript 4.0提供了一系列的类和模块，开发人员可以使用它们来创建和管理地图、图层、符号、工具和地理处理任务等。

它还提供了丰富的地图控件和UI元素，可以帮助您构建交互式和用户友好的地图应用程序。

此外，它还支持各种数据源和格式，例如ArcGIS Online、ArcGIS Server、GeoJSON、KML等，您可以轻松加载和显示这些数据。

第三节：构建地图要创建一个地图应用程序，首先需要创建一个地图对象。

可以通过指定地图的中心坐标、缩放级别和初始范围来定义地图的显示属性。

可以选择加载底图图层（例如卫星图像、街道地图等）和其他图层（例如标注、POI等），以显示在地图上。

第四节：加载地理空间数据ArcGIS API for JavaScript 4.0支持加载不同类型的地理空间数据，如点、多边形、线等。

您可以使用各种数据源（例如ArcGIS Online、ArcGIS Server、本地数据等）加载您的数据。

一旦数据加载到地图上，您可以使用符号和样式将其显示为各种形式（例如颜色、大小、透明度等）。