ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）

最新推荐文章于 2021-08-19 09:19:58 发布

X-rapido

最新推荐文章于 2021-08-19 09:19:58 发布

阅读量1.6w

点赞数 1

分类专栏： ArcGIS Api For Javascript 文章标签： ArcGIS ForJavaScript ArcGIS二次开发

本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8492151

版权

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

查看原文：http://www.ibloger.net/article/369.html

描述：

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

在线演示：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	绘制一个三角形.
EXTENT	Draws an extent box.

属性	类型	描述
fillSymbol	SimpleFillSymbol	当绘制 Polygon 或 Extent 时使用的符号.
lineSymbol	SimpleLineSymbol	当绘制 Polyline 时使用的符号.
markerSymbol	SimpleMarkerSymbol	当绘制 Point 绘制Multipoint 时使用的符号.
respectDrawingVertexOrder	Boolean	设置为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)	None	Sets 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>

效果如下：

X-rapido

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
ArcGIS For JavaScript API Drawing Tool(绘图工具)————（十七）

描述：您可以使用绘图工具栏绘制在地图上的多种几何形状。.在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/toolbar_draw/index.html引用帮助：http://help.arcgis.com/en/webapi/javascript/arcgis/jsap
复制链接

扫一扫