深入浅出ArcGIS 9.3 Javascript API(四)

原创 2011年01月14日 10:48:00

第四章 绘制Graphic

    Graphics绘制是那个能让死气沉沉的WebGIS应用变得精彩有趣的点石成金魔棒。JavaScript API中拥有更强大的Graphics绘制功能。基于JavaScript API开发很容易联想到其鼻祖——Dojo丰富灵活的图片绘制功能。在Dojo中,point、multipoint、polyline、polygon等基本图形可以很简洁的在地图上绘制出来,并且展示效果令人兴奋!

   在开始这部分的示例前,首先要引入一个新的库"esri.toolbars.draw"。Toolbar并不是一个用户接口组件,而是一个Helper类用于在地图上绘制图形,通常由客户端的UI组件来触发所要绘制的具体图形,如通过按钮触发:
 

    用户绘制完成后,将触发事件来完成具体图形的显示:
 dojo.connect(tb, "onDrawEnd", addGraphic);

    了解AO和ArcGIS Server ADF的开发人员都知道,图形一般由两部分组成,一是所要绘制的几何图形,即geometry,一是绘制图形的显示效果,如SimpleMarkerSymbol,所以在addGraphic方法要完成这两部分的赋值:
  function addGraphic(geometry) {
     var symbol = dojo.byId("symbol").value;
      if (symbol) {
         symbol = eval(symbol);
     }
      else {
         var type = geometry.type;
          if (type === "point" || type === "multipoint") {
             symbol = tb.markerSymbol;
         }
          else if (type === "line" || type === "polyline") {
             symbol = tb.lineSymbol;
         }
          else {
             symbol = tb.fillSymbol;
         }
     }
     map.graphics.add(new esri.Graphic(geometry, symbol));
 }


    1.在上文对Graphics绘制功能编写基础上,以官方网站上的代码为例,在客户端提供多种基础形状的绘制功能,此时Graphics形状由用户客户端通过toolbar提供的helper方法决定,绘制的显示效果通过一个DropDownList进行选择:
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]))">Square</option>

    Toolbar初始化及事件监听在map.addLayer之前完成:
  function init() {
     map = new esri.Map("map");
     dojo.connect(map, "onLoad", initToolbar);
     map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
 }
 
  function initToolbar(map) {
     tb = new esri.toolbars.Draw(map);
     dojo.connect(tb, "onDrawEnd", addGraphic);
 }


    构建界面UI之后,可以直接浏览网页,Demo演示地址:
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Graphics/graphics.html

    2.框选点要素,在很多行业应用中都涉及到,如对银行POI网点选择、电线杆塔统计、烟草销售点业态分析等等,在JavaScript API实现这样的功能,需要分两步实现,第一是框选查询,第二是对查询的结果渲染并以Graphics方式显示。

    查询功能在后续文章中会详细介绍,这里仅轻笔带过,引入"esri.tasks.query",查询功能实现:
 var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
 var query = new esri.tasks.Query();
 query.where = "STATE_NAME = 'Washington'";
 query.returnGeometry = true;
 query.outFields = ["CITY_NAME"];
 queryTask.execute(query, addPointsToMap);

    上面URL指向的是另外一个REST服务,addPointsToMap将所有符合条件的点都添加到Map中作为Graphics显示,接下来就是要在这些点中框选点并用不同颜色高亮显示。
  function findPointsInExtent(extent) {
     var graphics = map.graphics.graphics;
     var results = [];
     var graphic;
      for (var i=0, il=graphics.length; i<il; i++) {
         graphic = graphics[i];
         // 选择框所包含的点用highlightSymbol高亮显示
          if (extent.contains(graphic.geometry)) {
             graphic.setSymbol(highlightSymbol);
             results.push(graphic.getContent());
         }
         // 之前已经highlightSymbol高亮显示的点恢复为原来defaultSymbol显示
          else if (graphic.symbol == highlightSymbol) {
             graphic.setSymbol(defaultSymbol);
         }
     }
 }

    功能开发就完成了,剩下的就是加上对事件的监听以及客户端UI编辑。

  function initToolbar(map) {
     var tb = new esri.toolbars.Draw(map);
     dojo.connect(tb, "onDrawEnd", findPointsInExtent);
     tb.activate(esri.toolbars.Draw.EXTENT);
 }


    篇幅所限,如果想了解更多JavaScript API请关注Flyingis的blog,地址:http://www.cnblogs.com/flyingis


本篇文章来源于 GIS空间站 转载请以链接形式注明出处 网址:http://www.gissky.net/Article/1397_4.htm

深入浅出ArcGIS 9.3 Javascript API

 http://www.gissky.net/Article/1397.htm
  • yangli08
  • yangli08
  • 2009年08月26日 15:01
  • 403

深入浅出ArcGIS 9.3 Javascript API(二)

我只想快速开发简单的Web GIS应用,有没有比ADF控件再简洁一些的方式?我不想记那些复杂的AO接口,可是又喜欢ArcGIS Server漂亮的地图和强大的功能,怎么办?好吧,在9.2时代,面对这些...
  • restart1
  • restart1
  • 2011年01月14日 10:46
  • 882

深入浅出ArcGIS 9.3 Javascript API(五)

我只想快速开发简单的Web GIS应用,有没有比ADF控件再简洁一些的方式?我不想记那些复杂的AO接口,可是又喜欢ArcGIS Server漂亮的地图和强大的功能,怎么办?好吧,在9.2时代,面对这些...
  • restart1
  • restart1
  • 2011年01月14日 10:49
  • 500

深入浅出ArcGIS 9.3 Javascript API(三)

我只想快速开发简单的Web GIS应用,有没有比ADF控件再简洁一些的方式?我不想记那些复杂的AO接口,可是又喜欢ArcGIS Server漂亮的地图和强大的功能,怎么办?好吧,在9.2时代,面对这些...
  • restart1
  • restart1
  • 2011年01月14日 10:47
  • 615

深入浅出ArcGIS 9.3 Javascript API(一)

我只想快速开发简单的Web GIS应用,有没有比ADF控件再简洁一些的方式?我不想记那些复杂的AO接口,可是又喜欢ArcGIS Server漂亮的地图和强大的功能,怎么办?好吧,在9.2时代,面对这些...
  • restart1
  • restart1
  • 2011年01月14日 10:41
  • 573

arcgis api for js入门开发系列六地图分屏对比

该功能模块实现的核心就是如何让两个地图同步,里面关键是调用地图范围变化监听事件extent-change,通过对两个地图extent-change事件的监听,不论你操作任意一个地图,主要地图范围发生变...
  • liguoweioo
  • liguoweioo
  • 2016年11月29日 10:14
  • 1560

ArcGIS API for Javascript 应用开发入门

ArcGIS API for JavaScript (JavaScript API))是ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。当前的...
  • cwb1128
  • cwb1128
  • 2014年01月09日 10:30
  • 75057

ARCGIS DESKTOP 9.3 安装破解完整清晰步骤

ARCGIS DESKTOP 9.3安装步骤:本人亲自写的,希望各位用的着,转载时请以超链接形式标明文章原始出处: http://blog.csdn.net/liuzhihong08/archive/...
  • liuzhihong08
  • liuzhihong08
  • 2009年08月04日 19:54
  • 48760

ArcGIS API for javascript开发笔记(四)——GP服务调用之GP模型的规范化制作详解

感谢一路走来默默陪伴和支持的你~~~ -------------------欢迎来访,拒绝转载------------------- 在之前的利用Python分析GP服务运行结果的输出路径 & ...
  • zhaohuihui6628
  • zhaohuihui6628
  • 2015年11月16日 16:05
  • 2615

arcgis api for javascript 4.0 安装部署

arcgis api for javascript 4.0 安装部署 1、下载arcgis_js_v40_api,就在csdn资源里找,这里面有官方版 2、安装配置IIS 3、打开arcgis_j...
  • qq_35405532
  • qq_35405532
  • 2016年06月23日 20:01
  • 3987
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深入浅出ArcGIS 9.3 Javascript API(四)
举报原因:
原因补充:

(最多只允许输入30个字)