深入浅出 Javascript API(四)--绘制 Graphics

简介:

 Graphics绘制是webgis基本编辑功能之一,基于Javascript API进行开发很容易联想到其基础功能的提供者--Dojo,point、multipoint、polyline、polygon等基本图形可以很方便的在地图上绘制出来,效果还不错!这里需要引入一个新的库"esri.toolbars.draw"。


    Toolbar并不是一个用户接口组件,而是一个Helper类用于在地图上绘制图形,通常由客户端的UI组件来触发所要绘制的具体图形,如通过按钮触发:


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

    了解AO和Ags ADF的开发人员都知道,图形一般由两部分组成,一是所要绘制的几何图形,即geometry,一是绘制图形的显示效果,如SimpleMarkerSymbol,所以在addGraphic方法要完成这两部分的赋值:
复制代码
ExpandedBlockStart.gif function  addGraphic(geometry)  {
    
var symbol = dojo.byId("symbol").value;
ExpandedSubBlockStart.gif    
if (symbol) {
        symbol 
= eval(symbol);
    }

ExpandedSubBlockStart.gif    
else {
        
var type = geometry.type;
ExpandedSubBlockStart.gif        
if (type === "point" || type === "multipoint"{
            symbol 
= tb.markerSymbol;
        }

ExpandedSubBlockStart.gif        
else if (type === "line" || type === "polyline"{
            symbol 
= tb.lineSymbol;
        }

ExpandedSubBlockStart.gif        
else {
            symbol 
= tb.fillSymbol;
        }

    }

    map.graphics.add(
new esri.Graphic(geometry, symbol));
}
复制代码

内容目录:

 

1.各种基本图形绘制
2.选择点要素并以Graphics方式高亮显示

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之前完成:
复制代码
ExpandedBlockStart.gif 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"));
}


ExpandedBlockStart.gif
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显示,接下来就是要在这些点中框选点并用不同颜色高亮显示。
复制代码
ExpandedBlockStart.gif function  findPointsInExtent(extent)  {
    
var graphics = map.graphics.graphics;
    
var results = [];
    
var graphic;
ExpandedSubBlockStart.gif    
for (var i=0, il=graphics.length; i<il; i++{
        graphic 
= graphics[i];
        
// 选择框所包含的点用highlightSymbol高亮显示
ExpandedSubBlockStart.gif
        if (extent.contains(graphic.geometry)) {
            graphic.setSymbol(highlightSymbol);
            results.push(graphic.getContent());
        }

        
// 之前已经highlightSymbol高亮显示的点恢复为原来defaultSymbol显示
ExpandedSubBlockStart.gif
        else if (graphic.symbol == highlightSymbol) {
            graphic.setSymbol(defaultSymbol);
        }

    }

}
复制代码

    功能开发就完成了,剩下的就是加上对事件的监听以及客户端UI编辑。
;>
ExpandedBlockStart.gif function  initToolbar(map)  {
    
var tb = new esri.toolbars.Draw(map);
    dojo.connect(tb, 
"onDrawEnd", findPointsInExtent);
    tb.activate(esri.toolbars.Draw.EXTENT);
}

;>

 

 

    Demo演示:http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Graphics/points_in_extent.html;>


本文转自Flyingis博客园博客,原文链接:http://www.cnblogs.com/flyingis/archive/2008/07/24/1250584.html,如需转载请自行联系原作者

相关文章
|
27天前
|
JavaScript 前端开发 API
复习JavaScript中的数组API
这段代码介绍了JavaScript数组的几种实用方法:`fill`用于用固定值覆盖指定范围内的元素;`find`查找符合条件的第一个元素;`findIndex`获取该元素的索引;`sort`对数组排序,需提供比较函数以正确排序数字;结合`slice`与`sort`可在不改动原数组的情况下进行排序;`reverse`反转数组元素;利用`map`可创建新数组并替换其中的特定元素,同时保持原数组不变。
10 1
|
3天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
16 3
|
7天前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。
|
7天前
|
JavaScript 前端开发 API
深入浅出:使用Node.js搭建RESTful API的实践之旅
【8月更文挑战第31天】本文将带你踏上一次Node.js的探险之旅,通过实际动手构建一个RESTful API,我们将探索Node.js的强大功能和灵活性。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供宝贵的实践经验和深刻的技术洞见。
|
14天前
|
JavaScript 前端开发 中间件
深入浅出Node.js:从零开始构建RESTful API
【8月更文挑战第24天】在数字化时代的浪潮中,后端开发作为支撑现代网络服务的骨架,扮演着至关重要的角色。本文将通过Node.js这一高效灵活的JavaScript运行环境,引领你步入后端开发的神秘世界。我们将从基础概念出发,逐步深入到实战操作,最终构建一个功能完备的RESTful API。无论你是编程新手还是前端开发者,这篇文章都将为你揭示后端开发的奥秘,让你轻松掌握使用Node.js进行API开发的实用技巧。
|
24天前
|
存储 JavaScript API
Node.js中的异步API
【8月更文挑战第16天】
25 1
|
4天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第34天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
27天前
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`&lt;p&gt;666&lt;/p&gt;`的字符串并获取其文本内容`666`。
55 1
|
7天前
|
JSON JavaScript 中间件
深入浅出Node.js: 从零开始构建RESTful API
【8月更文挑战第31天】 在数字时代的浪潮中,掌握如何构建高效、可靠的后端服务是每一位开发者的必备技能。本文将通过浅显易懂的语言和实际代码示例,带领初学者走进Node.js的世界,一步步搭建起自己的RESTful API。无论你是编程新手,还是想扩展技术栈的老手,这篇文章都将是你的良师益友。让我们一起探索Node.js的魅力,开启后端开发之旅!
|
7天前
|
JavaScript 前端开发 API
深入浅出:使用Node.js打造简易Web API
【8月更文挑战第31天】本文旨在通过一个简单实例,引导读者快速入门Node.js并创建自己的Web API。我们将从零开始,一步步搭建起服务端应用,涉及环境搭建、基本语法、路由处理等关键知识点,最后以代码实例加深理解。无论你是前端开发者还是后端新手,这篇文章都能让你轻松上手,体验后端开发的乐趣。
下一篇
DDNS