深入浅出 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方法要完成这两部分的赋值:
复制代码
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.各种基本图形绘制
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之前完成:
复制代码
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);
}

 

 

    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,如需转载请自行联系原作者

相关文章
|
5月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
|
6月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发 API
Vue.js 3:探索组合式API带来的新变革
Vue.js 3:探索组合式API带来的新变革
310 84
|
10月前
|
JSON 缓存 JavaScript
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
|
8月前
|
JavaScript 前端开发 安全
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
118 10
|
9月前
|
JSON JavaScript 前端开发
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
189 12
|
10月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
10月前
|
JavaScript NoSQL API
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!
|
10月前
|
JavaScript 前端开发 API
Vue.js 3中的Composition API:提升你的组件开发体验
Vue.js 3中的Composition API:提升你的组件开发体验
309 1
|
10月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API