描述:
您可以使用绘图工具栏绘制在地图上的多种几何形状。。
在线演示: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() | 用户结束绘图时触发。这个事件对象具有以下属性
| ||||
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>