您的位置: 首页  >  文章  >  深入浅出 Javascript API（四）--绘制 Graphics

深入浅出 Javascript API（四）--绘制 Graphics

分类: 文章 • 2024-06-21 10:04:28
Graphics绘制是webgis基本编辑功能之一，基于JavascriptAPI进行开发很容易联想到其基础功能的提供者--Dojo，point、multipoint、polyline、polygon等基本图形可以很方便的在地图上绘制出来，效果还不错！这里需要引入一个新的库"esri.toolbars.draw"。
    Toolbar并不是一个用户接口组件，而是一个Helper类用于在地图上绘制图形，通常由客户端的UI组件来触发所要绘制的具体图形，如通过按钮触发：
Point

    用户绘制完成后，将触发事件来完成具体图形的显示：
深入浅出 Javascript API（四）--绘制 Graphicsdojo.connect(tb, "onDrawEnd", addGraphic);

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

内容目录：


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

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

    Toolbar初始化及事件监听在map.addLayer之前完成：
深入浅出 Javascript API（四）--绘制 Graphics深入浅出 Javascript API（四）--绘制 Graphicsfunction init() 深入浅出 Javascript API（四）--绘制 Graphics{
深入浅出 Javascript API（四）--绘制 Graphics    map =
new esri.Map("map");
深入浅出 Javascript API（四）--绘制 Graphics    dojo.connect(map, "onLoad", initToolbar);
深入浅出 Javascript API（四）--绘制 Graphics    map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
深入浅出 Javascript API（四）--绘制 Graphics}
深入浅出 Javascript API（四）--绘制 Graphics
深入浅出 Javascript API（四）--绘制 Graphics深入浅出 Javascript API（四）--绘制 Graphicsfunction initToolbar(map) 深入浅出 Javascript API（四）--绘制 Graphics{
深入浅出 Javascript API（四）--绘制 Graphics    tb =
new esri.toolbars.Draw(map);
深入浅出 Javascript API（四）--绘制 Graphics    dojo.connect(tb, "onDrawEnd", addGraphic);
深入浅出 Javascript API（四）--绘制 Graphics}


    构建界面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"，查询功能实现：
深入浅出 Javascript API（四）--绘制 Graphicsvar queryTask =
new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
深入浅出 Javascript API（四）--绘制 Graphicsvar query =
new esri.tasks.Query();
深入浅出 Javascript API（四）--绘制 Graphicsquery.where =
"STATE_NAME = 'Washington'";
深入浅出 Javascript API（四）--绘制 Graphicsquery.returnGeometry =
true;
深入浅出 Javascript API（四）--绘制 Graphicsquery.outFields = ["CITY_NAME"];
深入浅出 Javascript API（四）--绘制 GraphicsqueryTask.execute(query, addPointsToMap);

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

    功能开发就完成了，剩下的就是加上对事件的监听以及客户端UI编辑。
深入浅出 Javascript API（四）--绘制 Graphics深入浅出 Javascript API（四）--绘制 Graphicsfunction initToolbar(map) 深入浅出 Javascript API（四）--绘制 Graphics{
深入浅出 Javascript API（四）--绘制 Graphics    var tb =
new esri.toolbars.Draw(map);
深入浅出 Javascript API（四）--绘制 Graphics    dojo.connect(tb, "onDrawEnd", findPointsInExtent);
深入浅出 Javascript API（四）--绘制 Graphics    tb.activate(esri.toolbars.Draw.EXTENT);
深入浅出 Javascript API（四）--绘制 Graphics}


深入浅出 Javascript API（四）--绘制 Graphics

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

    博客园链接：http://www.cnblogs.com/flyingis/archive/2008/07/24/1250584.html
本主题由 flyingis 于 2008-10-16 09:00 设置高亮

转载于:https://www.cnblogs.com/liufei88866/archive/2009/07/06/1517621.html

相关推荐