arcgis js开发系列源码请移步我的github上获取(https://github.com/lpgray/arcgis-js-showcase

本次开发实现的效果:

  1. Map Navigation 控制:替换默认的ZoomSlider,显示为刻度形式,并且添加dijit样式
  2. 实现了一个简单的搜索功能:搜索地市级城市并且将结果以几何图形的形式展示在地图上
本次开发涉及到的要点:

Map Navigation(地图导航设置),QueryTask(查询任务类),Graphic(图像类),Symbol(符号类),InfoTemplate(信息显示模板类),ArcGISTiledMapServiceLayer(ArcGIS切片服务,带缓存,相对的是动态服务是没有缓存的)

1. Map Navigation 控制

这一步我主要的目标是替换默认的缩放控件为带刻度且有最大最小值的控件。查了很久API没查到,后来是翻了别的示例代码才发现的。贴一下最终达到的效果,我显示的是一个南京地图切片服务,以其最大最小zoom来限定map对象。

首先是构造Map对象,将sliderStyle设为'large'

map = new esri.Map("map", {
ominZoom : 11 ,
ologo : false ,
osliderStyle : 'large' // 设为 large
o});

给地图添加控件主题样式,我添加的是claro,注意!在添加完以后记得给页面的body加一个class claro.

<link rel="stylesheet" href="http://127.0.0.1:8080/arcgis_js_api/library/3.5/3.5/js/dojo/dijit/themes/claro/claro.css" />

好了,这个简单的小任务就完成了 Map Navigation。

2. 搜索市级城市行政区并将结果以图形高亮的形式显示在地图上。

这部分的代码请参见 Query.js 文件。首先在做这一个功能模块之前,我去官网上进行了大量的涉猎,以及对ArcGIS服务类型也进行了一定了解,首先想要实现搜索必须要基于可以提供搜索服务的地图,我使用的是这个服务 http://www.arcgisonline.cn/ArcGIS/rest/services/Thematic_Drawings/MapServer 它支持搜索,第二个要点就是,你想搜什么类型的地块,你必须调用该服务下的对应图层才可以,比如你想搜江苏,但是你指定的是市级图层,通过 QueryTask 你肯定搜不到结果,因此在构造搜索任务时的url就要指定服务的图层号,我这里搜索的是地市级,所以要指定地市级图层号,构造搜索服务的时候就用了这个 url http://www.arcgisonline.cn/ArcGIS/rest/services/Thematic_Drawings/MapServer/5。

开发该功能的步骤是:

  1. 构造地图、添加图层(不用多说)
  2. 任务定义、Symbol定义(结果渲染方式)、InfoTemplate定义(结果属性展示方式)
  3. 成功回调函数定义(Graphic)

实际上这块的开发也不难,主要是在刚开始的时候我不了解ArcGIS所发布的服务类型,比如 ArcGIS JS 开发(一) 中我就调用切片服务去搜索;没有对整个搜索过程有一个系统化的了解(想要系统化了解,请移步官网 https://developers.arcgis.com/en/javascript/jshelp/intro_querytask.html ,其实我就是照搬这里的代码),及 Graphic、Symbol、InfoTemplate等类的关系,后期使用 ArcGIS JS 进行产品开发,还需要对重要 api 深入学习,好了不多赘述细节了,注意的要点和开发步骤了解了,剩下的都简单了,贴一下最终效果,github上扒代码吧。