第七讲 PDM

精彩纷呈的WebGIS应用——Javascript篇Esri中国信息技术有限公司黄超邂逅HTML53.JSAPIShowCase2.JSAPIOverviews1.目录ArcGISServerRESTAPI客户端APIsWeb服务GIS服务数据FilesystemsGeodatabasesRESTSOAPMobileJavaScriptFlexHTTPSilverlightDesktopJSONXMLAMFKMLOGCJSONXMLAMFKMLOGCArcGISServerRESTAPI1、MapTile调用示例2、调用GeometryService通过JS调用ArcGISServerRESTAPIArcGISJavascriptAPI粉墨登场•Mapcontrol•SupportforWebmap•Layers–Tiled,Dynamic,FeatureLayer,WMS,WMTS,KML,Graphics•Graphics•Tasks–GP,Network,Geometry,Query,Locator•Geometry•Symbology–ArcGISServerSymbology•Toolbars–Edit,Draw,NavigationMapAndLayersArcGISJavaScriptAPIs–WhyJavaScript?•所有的主流的浏览器均支持JavaScript，无需安装任何插件•JavaScript是世界最常用的开发语言之一，轻量级的Web开发脚本语言•纯粹的客户端语言(运行在客户端的浏览器内)，包括桌面和移动端•有各种成熟的JavaScript框架：Dojo、jQuery、ExtJS、Prototype、YUI……ArcGISJavaScriptAPIStatus•快速的开发周期–第一个版本在2008年5月发布–当前版本3.2—2012年9月发布•3.2workswithArcGISServer10and9.3(alsoworkswith10.1)•从一个版本到下一个版本时，尽量不破坏兼容性•老版本一成不变，也不会有变化–1.0到3.2•从2.9版本开始，ArcGISAPIforJavaScript开始基于Dojo1.7，但是现在还没有完全的符合AMD•应用程序并不需要因为JSAPI使用了dojo1.7而改变代码Dojo1.7•加载Dojo模块dojo.require(esri.map);•Dojo初始化事件，在页面加载后执行程序dojo.addOnLoad(init);JSAPI入门1、下载API、安装WebserverAPI要部署在webserver环境下，必须使用http协议去访问3、搭建JAVASCRIPTAPI开发环境aptanastudio、Notepad++、VisualStudio推荐aptana:：Ctrl+Shitf+o格式化代码、Ctrl+f搜索，Ctrl+h貌似是高级搜索4、部署API按照API中安装说明进行部署学习JavascriptAPI第一步Buildyourfirstapplication创建最基本的HTML页面首先我们要创建一个最简单的HTML页面，然后增加一个DIV标签!DOCTYPEhtmlhtmlheadmetacharset=utf-8/titleDEMO/title/headbodydivid=map/div/body/html在使用ArcGISAPIforJavaScript前，我们需要将以下代码加入到html的head标签中引入ArcGISAPIforJavaScriptlinkhref=://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css/scriptsrc=:从3.2版本开始，我们需要引入esri.css，不然底图显示不正常目前我们有4种主题可以选择：claro,tundra,soria和nihilo•首先我们要通过DOJO引入esri.map•当dojo加载完成后执行init方法•在init方法中创建一个map对象创建Mapdojo.require(esri.map);varmap;functioninit(){map=newesri.Map(map);}dojo.addOnLoad(init);加载底图varbasemapUrl=(basemapUrl);map.addLayer(basemap);加载底图调整CSS让地图全屏html,body,#map{width:100%;height:100%;padding:0;margin:0;overflow:hidden;}让地图自动自适应大小dojo.connect(window,'resize',map,map.resize);Mapnavigation默认情况下用户可以对地图进行以下操作•鼠标拖拽和平移•鼠标滚轮的放大，缩小•双击放大•SHIFT+拉框放大•SHIFT+CTRL+拉框缩小•SHIFT+Click以鼠标点击为中点•用方向键移动•用+键实现翻大•用-键实现缩小Mapnavigation我们可以通过map对象的方法来禁止某个操作例如：map.disablePan();MethodsPropertyDescriptionenablePan(),disablePan()isPan•Whenenabled,userscanpanthemapusingthemouse.DragthemousetopanenableScrollWheelZoom(),disableScrollWheelZoom()isScrollWheelZoom•Whenenabled,userscanusethemousescrollwheeltozoominandout.MouseScrollForwardtozoomin•MouseScrollBackwardtozoomoutenableRubberBandZoom(),disableRubberBandZoom()isRubberBandZoom•Whenenabled,userscandrawaboundingboxtozoominoroutfromthemapusingthemouse.SHIFT+Dragthemousetozoomin•SHIFT+CTRL+DragthemousetozoomoutenableClickRecenter(),disableClickRecenter()isClickRecenter•Whenenabled,userscandoubleclickonamaptorecenterandzoominalevel.SHIFT+ClicktorecenterenableDoubleClickZoom(),disableDoubleClickZoom()isDoubleClickZoom•Whenenabled,userscandoubleclickonamaptorecenterandzoominalevel.DoubleClicktoCenterandZoominenableShiftDoubleClickZoom(),disableShiftDoubleClickZoom()isShiftDoubleClickZoom•Whenenabled,userscanshift+doubleclickonamaptorecenterandzoominalevel.SHIFT+DoubleClicktoCenterandZoominenableKeyboardNavigation(),disableKeyboardNavigation()isKeyboardNavigation•Whenenabled,userscanpanusingthearrowkeysandzoomusingthe+and-keysonthekeyboard.Usearrowkeystopan•Use+keytozoominalevel•Use-keytozoomoutalevelshowPanArrows(),hidePanArrows()isPanArrowsShowsorhidesthepanarrowsonthemap.showZoomSlider(),hideZoomSlider()isZoomSliderShowsorhidesthezoomslideronthemap.enableMapNavigation(),disableMapNavigation()noneEnablesordisablesallmapnavigationexceptthepanarrowsandslider.Mapnavigation•EventsArcGISJavaScriptAPI是一个事件驱动的APIEvents增加事件监听varmyOnClick_connect=dojo.connect(map,onClick,myOnClickHandler);移除事件监听dojo.disconnect(myOnClick_connect);Events-实战地图联动GraphicsLayer&Graphic•显示和管理Graphic对象•Map.graphics：缺省的GraphicsLayer，所有图层的最顶端•创建GraphicsLayervargraphicsLayer=newesri.layers.GraphicsLayer();map.addLayer(graphicsLayer);GraphicsLayer•Graphic：在GraphicsLayer绘制显示的图形对象。•Graphic=Geometry+Attribute+Symbol+Infotemplate。Graphic•包含地物坐标信息的对象•Point:点•Multipoint:点集•Extent：矩形•Polygon:多边形•Polyline:折线varpoint=newesri.geometry.Point(12961102.02894374,4856426.592097342,newesri.SpatialReference({wkid:102100}));Graphic&GeometryGraphic&SymbolSymbolMarkerSymbolSimpleMakerSymbolPictureMakerSymbolTextSymbolFillSymbolSimpleFillSymbolPictureFillSymbolLineSymbolSimpleLineSymbolCartographicLineSymbol•用于定义InfoWindow的标题和内容格式•TITLE和CONTENT可以包含任何HTML•可以使用${Attribute}来获取graphic中的Attributevarinfo