ArcGis For JavaScript API Drawing Tool (绘图工具又称框选地图)

最新推荐文章于 2022-03-29 17:02:34 发布

qq_41622016

最新推荐文章于 2022-03-29 17:02:34 发布

阅读量2.6k

点赞数 2

描述：

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

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

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

常量	描述
箭头	绘制箭头。
向上箭头	绘制一个上箭头。
DOWN_ARROW	一个绘制下箭头
左箭头	绘制一个左箭头。
右箭头	绘制一个右箭头
点	绘制点。
MULTI_POINTPOINT	绘制多点。
椭圆	绘制一个椭圆形。
POLYGON	绘制多边形。
POLYLINE	绘制折线。
FREEHAND_POLYGON	手绘多边形。
FREEHAND_POLYLINE	手绘折线。
线	绘制线
长方形	绘制一个矩形
圈	绘制圆。
三角形	绘制一个三角形。
程度	绘制范围框。

方法

激活（geometryType，选择吗？）	没有	激活工具栏的绘图几何形状。激活工具栏禁用地图导航。
关闭（）	没有	关闭工具栏并激活地图导航。
finishDrawing（）	没有	最后，绘制的几何形状并触发onDrawEnd 事件。工作时使用此方法来完成绘制折线，多边形或点对多点，请立即获取iTunes中触摸的设备iPhone。
setFillSymbol（fillSymbol）	没有	设置填充符号。
setLineSymbol（lineSymbol）	没有	设置线符号
setMarkerSymbol（markerSymbol）	没有	设置标记符号
setRespectDrawingVertexOrder（集）	没有	设置是否应将多边形几何体修改为拓扑正确。

事件

onDrawComplete（）

用户结束绘图时触发。这个事件对象具有以下属性

<几何> 几何	集合图像绘制。这种几何形状的坐标具有相同的空间的地图参考。
<Geometry> geographicGeometry	在地理坐标（纬度，经度）的绘制的形状的几何形状。仅当是Web墨卡托地图的空间参考或地理（4326）。

onDrawEnd（几何）

绘制完成时触发。

<！DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv =“Content-Type”content =“text / html; charset = utf-8”> 
    <meta name =“viewport”content =“width = device- width，user-scalable = no“> 
    
    <meta name =”viewport“content =”initial-scale = 1，maximum-scale = 1，user-scalable = no“> 
    <title> Maps Toolbar </ title> 
    
    <link rel =“stylesheet”href =“https://js.arcgis.com/3.25/dijit/themes/nihilo/nihilo.css”> 
    <link rel =“stylesheet”href =“https://js.arcgis.com/ 3.25 / esri / css / esri.css“> 
    <style> 
      html，body，＃mainWindow { 
        font-family：sans-serif; 
        高度： 100％; 
        宽度：100％; 
      } 
      html，body { 
        margin：0; 
        填充：0; 
      } 
      #header { 
        height：80px; 
        溢出：自动; 
        填充：0.5em; 
      } 
    </ style> 
    
    <script src =“https://js.arcgis.com/3.25/”> </ script> 
    <script> 
      var map，toolbar，symbol，geomTask; 
//导入包
      require（[ 
        “esri / map”，  
        “esri / toolbars / draw”，
        “esri / graphic”，


        “esri / symbols / SimpleMarkerSymbol”，
        “esri / symbols / SimpleLineSymbol”，
        “esri / symbols / SimpleFillSymbol” ，


        “dojo / parser”，“dijit / registry”，


        “ 
        “dijit / form / Button”，“dijit / WidgetSet”，“dojo / domReady！” 
      ]，function（
        Map，Draw，Graphic，
        SimpleMarkerSymbol，SimpleLineSymbol，SimpleFillSymbol，
        parser，registry 
      ）{ 
        parser.parse（）; 


        map = new Map（“map”，{ 
          basemap：“streets”，//指定的地图底图。（如果自己的地图当然也可以，修改相应地图服务即可）默认有效的选项：“streets”，“ satellite“，”hybrid“，”topo“，”grey“，” 
          ocean “，”national-geographic“，”osm“ .center：[ -  15.469,36.428]，
          zoom：3 //缩放度
        }）; 
        
        map.on（“load”，createToolbar）; //绑定加载事件可添加多个
												//map.on("load“， 
											
											
													
												
        //循环所有dijits，连接onClick事件用于激活绘图工具的按钮监听器
        registry.forEach（function（d）{ 
          // d是dijit的一个引用可以是布局容器或者按钮
          if（d.declaredClass ===“ dijit.form.Button“）{ 
            d.on（”click“，activateTool）; 
          } 
        }）; 


        function activateTool（）{ 
          var tool = this.label.toUpperCase（）。replace（/ / g，“_”）; 
          toolbar.activate（绘制[工具]）; //激活画图工具
          map.hideZoomSlider（）; 
        } 


        功能createToolbar（themap）{ 
          工具栏=新绘图（地图）; 		//创建画图工具栏toolbar.on 
          （“draw-end”，addToMap）; //结束时触发
        } 


        function addToMap（evt）{
          var符号; 
          toolbar.deactivate（）; //关闭工具栏并激活地图导航。
          map.showZoomSlider（）; //在地图上显示的缩放滑块（类似截图时候那种拖动的东西）
          开关（evt.geometry.type）{//获取几何模型与按钮中的名字有关
            案例“点“：
            case”multipoint“：
              symbol = new SimpleMarkerSymbol（）; 
              打破; 
            case“polyline”：
              symbol = new SimpleLineSymbol（）; 
              打破; 
            default：
              symbol = new SimpleFillSymbol（）; 
              打破; 
          } 
          var graphic = new Graphic（evt.geometry，symbol）; 
          map.graphics.add（graphic）; //将绘图加入到图层中
        }
      }）; 
    </ script> 
  </ head> 
  <body class =“nihilo”> 


  <div id =“mainWindow”data-dojo-type =“dijit / layout / BorderContainer”data-dojo-props =“design：'headline'”> 
    <div id =“header”data-dojo-type =“dijit / layout / ContentPane”data-dojo-props =“region：'top'”> 
      <span>绘制：<br /> </ span> 
     <按钮数据-dojo-type =“dijit / form / Button”>点</ button> 			<！ - 点 - > 
      <按钮data-dojo-type =“dijit / form / Button”>多点</ button> 	<！ - 多点 - > 
      <button data-dojo-type =“dijit / form / Button”> Line </ button> 			<！

		<！ - 多边形 - > 
      <button data-dojo-type =“dijit / form / Button”>手绘折线</ button> <！ - 手绘折线 - > 
      <button data-dojo-type =“dijit /表格/按钮“>手绘多边形</ button> <！ - 手绘多边形 - > 
      
      <按钮data-dojo-type =”dijit / form / Button“>箭头</ button> 			<！ - 箭头 - > 
      < button data -dojo-type =“dijit / form / Button”> Triangle </ button> 		<！ - 三角形 - > 
      <button data-dojo-type =“dijit / form / Button”> Circle </ button> 		< ！ - 圆形 - > 
      <button data-dojo-type =“dijit / form / Button”> Ellipse </ button> 	<！ - 椭圆 - > 
		<button data-dojo-type =“dijit / form /按钮“>矩形</ button> 		<！ - 矩形	- >  
    </ div>
    <div id =“map”data-dojo-type =“dijit / layout / ContentPane”data-dojo-props =“region：'center'”> </ div> 
  </ div> 


  </ body> 
</ html>

qq_41622016

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
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/jsapi/#dra...
复制链接

扫一扫