程序喵

择善人而交，择善书而读
择善言而听，择善行而从
当前位置：首页 > ArcGIS > ArcGIS For JavaScript API Drawing Tool —— 绘图工具 大屏阅读

ArcGIS For JavaScript API Drawing Tool —— 绘图工具

8年前 (2016-08-21) 分类：ArcGIS 阅读(7627) 评论(0)

描述：您可以使用绘图工具栏绘制在地图上的多种几何形状。.

在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/toolbar_draw/index.html

引用帮助：http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#draw

esri.toolbars.Draw

构造函数描述
esri.toolbars.Draw(map, options)创建一个新的绘图对象。地图是必要的参数。

常量

常量描述
ARROW绘制箭头.
UP_ARROW绘制一个上箭头.
DOWN_ARROW绘制一个下箭头
LEFT_ARROW绘制一个左箭头.
RIGHT_ARROW绘制一个右箭头
POINT绘制点.
MULTI_POINTPOINT绘制多点.
ELLIPSE绘制一个椭圆形.
POLYGON绘制多边形.
POLYLINE绘制折线.
FREEHAND_POLYGON手绘多边形.
FREEHAND_POLYLINE手绘折线.
LINE绘制线
RECTANGLE绘制一个矩形
CIRCLE绘制圆.
TRIANGLE绘制一个三角形.
EXTENTDraws an extent box


属性类型描述
fillSymbolSimpleFillSymbol当绘制 Polygon 或 Extent 时使用的符号.
lineSymbolSimpleLineSymbol当绘制 Polyline 时使用的符号.
markerSymbolSimpleMarkerSymbol当绘制 Point 绘制 Multipoint 时使用的符号.
respectDrawingVertexOrderBoolean设置为false, 几何图形被修改成拓扑正确项. 设置为true,输入几何体不被修改.

方法

activate(geometryType, options?)None激活工具栏的绘图几何形状。激活工具栏禁用地图导航。
deactivate()None关闭工具栏并激活地图导航.
finishDrawing()none最后，绘制的几何形状并触发onDrawEnd事件.工作时 使用此方法来完成绘制折线,多边形或点对多点,支持触摸的设备iPhone.
setFillSymbol(fillSymbol)None设置 fill symbol.
setLineSymbol(lineSymbol)None设置线符号
setMarkerSymbol(markerSymbol)None设置标记符号
setRespectDrawingVertexOrder(set)NoneSets whether the polygon geometry should be modified to be topologically correct.

事件

onDrawComplete()Fired when the user has ended drawing. 这个事件对象具有以下属性
<Geometry>  geometry集合图像绘制.这种几何形状的坐标具有相同的空间的地图参考.<Geometry>geographicGeometry在地理坐标（纬度，经度）的绘制的形状的几何形状。仅当是Web墨卡托地图的空间参考或地理（4326）。
onDrawEnd(geometry)绘制完成时触发。

代码分析如下：

<!DOCTYPE html>  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">  
    <meta name="viewport" content="width=device-width,user-scalable=no">  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
    <title>地图工具栏</title>  
      
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">  
    <style>  
      html, body {  
        height: 100%; width: 100%; margin: 0; padding: 0;  
      }  
    </style>  
      
    <script>var dojoConfig = {   
        parseOnLoad: true   // 解析加载  
    };</script>  
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>  
    <script>  
      // 导入包  
      dojo.require("esri.map");  
      dojo.require("esri.toolbars.draw");  
      dojo.require("dijit.layout.BorderContainer");  
      dojo.require("dijit.layout.ContentPane");  
     
      var map, toolbar, symbol, geomTask;  
  
      function init() {  
        map = new esri.Map("map", {  
          basemap: "streets",   // 指定的地图底图。以下是有效的选项："streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm".  
          center: [-15.469, 36.428],    // 经纬度  
          zoom: 3   // 缩放深度  
        });  
          
        dojo.connect(map, "onLoad", createToolbar); // 绑定加载事件  
      }  
  
      function createToolbar(themap) {  
        toolbar = new esri.toolbars.Draw(map);  // esri.toolbars.Draw(map, options)  
        dojo.connect(toolbar, "onDrawEnd", addToMap);   // 绘制完成触发  
      }  
  
      function addToMap(geometry) {  
        toolbar.deactivate();  // 关闭工具栏并激活地图导航.  
        map.showZoomSlider();  //在地图上显示的缩放滑块  
        // 判断几何图形的类型  
        switch (geometry.type) {  
          case "point":  
                var symbol = new esri.symbol.SimpleMarkerSymbol(  
                    esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,    // 样式,STYLE_CIRCLE(●),STYLE_CROSS(+),STYLE_DIAMOND(◆),STYLE_SQUARE(■),STYLE_X(X)  
                    10, // 像素  
                    new esri.symbol.SimpleLineSymbol(  
                        esri.symbol.SimpleLineSymbol.STYLE_SOLID,  // 样式,STYLE_DASH(破折号),STYLE_DASHDOT(点划线),STYLE_DASHDOTDOT,STYLE_DOT(点),STYLE_NULL,STYLE_SOLID(实线)  
                        new dojo.Color([255,0,0]),  // 颜色  
                        1   // 像素  
                    ),  
                    new dojo.Color([0,255,0,0.25])  // 颜色和透明度  
                );  
            break;  
          case "polyline":  
                var symbol = new esri.symbol.SimpleLineSymbol(  
                    esri.symbol.SimpleLineSymbol.STYLE_SOLID,   
                    new dojo.Color([255,0,0]),  
                    1  
                );  
            break;  
          case "polygon":  
                var symbol = new esri.symbol.SimpleFillSymbol(  
                    esri.symbol.SimpleFillSymbol.STYLE_SOLID,   
                    new esri.symbol.SimpleLineSymbol(  
                        esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,   
                        new dojo.Color([255,0,0]),  
                        2  
                    ),  
                    new dojo.Color([255,255,0,0.25])  
                );  
            break;  
          case "extent":  
                var symbol = new esri.symbol.SimpleFillSymbol(  
                    esri.symbol.SimpleFillSymbol.STYLE_SOLID,   
                    new esri.symbol.SimpleLineSymbol(  
                        esri.symbol.SimpleLineSymbol.STYLE_DASHDOT,   
                        new dojo.Color([255,0,0]),   
                        2  
                    ),   
                    new dojo.Color([255,255,0,0.25])  
                );  
            break;  
          case "multipoint":  
                var symbol = new esri.symbol.SimpleMarkerSymbol(  
                    esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND,   
                    20,   
                    new esri.symbol.SimpleLineSymbol(  
                        esri.symbol.SimpleLineSymbol.STYLE_SOLID,   
                        new dojo.Color([0,0,0]),   
                        1  
                    ),   
                    new dojo.Color([255,255,0,0.5])  
                );  
            break;  
        }  
        var graphic = new esri.Graphic(geometry, symbol);  
        map.graphics.add(graphic);  // 将绘图加入到图层中  
      }  
      dojo.ready(init); // 初始化加载  
    </script>  
  </head>  
  <body class="claro">  
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">  
    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:75px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;overflow:hidden;">  
      <span>绘制:<br /></span>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();}">Point(点)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.MULTI_POINT);map.hideZoomSlider();}">Multipoint(多点)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();}">Line(线)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();}">Polyline(折线)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();}">Polygon(多边形)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);map.hideZoomSlider();}">Freehand Polyline(手绘折线)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);map.hideZoomSlider();}">Freehand Polygon(手绘多边形)</button>  
      <!-- 箭头,三角形,圆形和椭圆类型所有绘制的多边形符号 -->  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.ARROW);map.hideZoomSlider();}">Arrow(箭头)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.TRIANGLE);map.hideZoomSlider();}">Triangle(三角形)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.CIRCLE);map.hideZoomSlider();}">Circle(圆形)</button>  
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.ELLIPSE);map.hideZoomSlider();}">Ellipse(椭圆)</button>  
    </div>  
    <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">  
    </div>  
</div>  
  </body>  
</html>

效果如下：


未经允许请勿转载：程序喵 » ArcGIS For JavaScript API Drawing Tool —— 绘图工具

点  赞 (7) 打  赏
分享到：
标签：