arcgis api for javascript 学习（五） 实现地图绘制工具
1、本文实现的功能为鼠标与地图之间的交互，能够在地图上绘制不同形状的图形
2、代码部分主要讲到的为Graphic函数的相关功能
<!DOCTYPE html>
<html>
<head>
<title>地图绘制工具</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<script src="https://js.arcgis.com/3.29/"></script>
<style>
#map{
position:relative;
height:400px;
width:100%;
}
</style>
</head>
<body> <div id="drawTool">
<button id="multipoint" >绘制点</button>
<button id="line">绘制折线</button>
<button id="polygon">绘制面</button>
<button id="circle">绘制圆</button>
<button id="rectangle">绘制矩形</button>
<button id="remove">清除全部图形</button>
<button id="disabledraw">关闭绘制工具</button> </div>
<div id='map'>
</div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"
style="background-color: #37a2ee">
鱼吃鱼罐头 @版权所有
</div> <script>
require([
"esri/map",
"dojo/on",
"esri/dijit/Basemap",
"esri/dijit/BasemapLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/toolbars/draw",
"esri/graphic",
"dojo/colors",
"dojo/domReady!"],
function (
Map,
on,
Basemap,
BasemapLayer,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Draw,
Graphic,
Color) {
var map = new Map("map", {
basemap: 'osm',
center: [122.127653, 36.009423]
});
//使用toolbar上的绘图工具
var toolBar = new Draw(map); //创建点要素
var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,new Color("#FFFCC"),12);
//线要素
lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([245, 0, 0]), 3);
//面要素
polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 245, 0, 0.25])); var drawTool = document.getElementById("drawTool"); drawTool.onclick = function (evt) {
var ev = evt || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLocaleLowerCase() == 'button') {
switch (target.id) {
case 'point':
toolBar.activate(Draw.POINT, {
showTooltips: true
});
break;
case 'multipoint':
toolBar.activate(Draw.MULTI_POINT, {
showTooltips: true
})
break;
case 'line':
toolBar.activate(Draw.POLYLINE, {
showTooltips: true
})
break;
case 'polygon':
toolBar.activate(Draw.POLYGON, {
showTooltips: true
})
break;
case 'circle':
toolBar.activate(Draw.CIRCLE, {
showTooltips: true
})
break;
case 'rectangle':
toolBar.activate(Draw.RECTANGLE, {
showTooltips: true
})
break;
case "remove":
map.graphics.clear();
break;
case 'disabledraw':
toolBar.deactivate();
break;
}
}
}
toolBar.on("draw-complete", drawEndEvent)
function drawEndEvent(evt) {
//添加图形到地图
var symbol;
if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = pointSymbol;
} else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
}
else {
symbol = polygonSymbol;
}
map.graphics.add(new Graphic(evt.geometry, symbol))
}
});
</script> </body>
</html>
3、同时代码还实现了删除图形与关闭绘制工具的功能
arcgis api for javascript 学习（五） 实现地图绘制工具的更多相关文章
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
- Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)
Ⅰ. 在3.X版本中,设置Map对象的 "maxScale" 和 "minScale" 属性 <!DOCTYPE html> <html> ...
- arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版
我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...
- arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中
吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...
- arcgis api for javascript 学习（六） 地图打印
1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...
- arcgis api for javascript 学习（四） 地图的基本操作
1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...
- ArcGis API for JavaScript学习——离线部署API
ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
随机推荐
- 【xmind】 使用 Java 生成思维导图
前言 在日常的工作与学习中,我们经常会使用思维导图这个工具,来把抽象而又无形的思考转换成有形并且具体的图像,是理清思路,梳理逻辑的一大神器. 准确的说,思维导图并不是一个具体的工具,而是一种方法.是道 ...
- Oracle 事务ACID的特性
1.事务对数据库控制操作 事务(Transaction)是用户定义的一个数据库操作序列,是不可分割的一部分的整体.这些操作要么做,要么不做(原子性).事务是对数据库对进行操作的最基本的逻辑单位,他可以 ...
- javaWeb核心技术第十一篇之Listener
监听器:所谓的监听器是指对整个WEB环境的监听,当被监视的对象发生改变时,立即调用相应的方法进行处理. 监听术语: 事件源:被监听的对象. 监听器对象:监听事件源的对象 注册或绑定:1和2结合的过程 ...
- Access Grid Control Properties 访问网格控件属性
In this lesson, you will learn how to access the properties of a list form's Grid Control in WinForm ...
- Implement Custom Business Classes and Reference Properties实现自定义业务类和引用属性（EF）
In this lesson, you will learn how to implement business classes from scratch. For this purpose, the ...
- SAP SD如何将销售订单其它ITEM加入到一个已创建好的交货单里
SAP SD如何将销售订单其它ITEM加入到一个已创建好的交货单里 如下的销售订单,有多个ITEM, 为其中的第一个ITEM创建了DN 80016362, 如果业务发现需要修改该交货单,将销售订单里的 ...
- iOS-基于TCP连接<Scoket-服务端>
一:前言(本文为TCP服务端) TCP首先要服务器开放一个端口 然后客户端去连接服务端的IP地址和端口号 连接成功之后再进行数据传输 要经历三次握手 二:代码在GitHub 1.需要的工具类 自行下载 ...
- 漏洞扫描与分析-Nessus-8.7.2最新版-安装-部署-使用
漏洞扫描与分析-Nessus 2019/10/10 Chenxin 简介 官网 https://zh-cn.tenable.com/ 产品 https://zh-cn.tenable.com/prod ...
- TSPITR fails With RMAN-06553 (Doc ID 2078790.1)
TSPITR fails With RMAN-06553 (Doc ID 2078790.1) APPLIES TO: Oracle Database - Enterprise Edition - V ...
- Linux部署NFS服务共享文件
NFS(网络文件系统)用于linux共享文件 第1步:配置所需要的环境 使用两台Linux主机 主机名称 操作系统 IP地址 NFS Centos7 192.168.218.139 NFSa Cent ...