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很卡.所以个人 ...
随机推荐
- .net core 中间件使用
using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; usi ...
- JavaScript中的循环和闭包
看一段比较经典的错误代码: // 希望获取页面上的所有div,在点击的时输出对应的编号 var oDom = document.querySelectorAll("div"); / ...
- Violet音乐社区界面原型手册
目录 Violet音乐社区界面原型手册 一.引言 1.0 项目前阶段相关文档 1.1 编写目的 1.2 开发背景 二.界面原型展示 2.0 界面设计说明 2.1 首页 2.2 歌单/专辑/单曲界面 2 ...
- 【Java基础】Java中的反射机制
一.反射的理解 (1)正射 在理解反射这个概念之前,我们先来理解Java中的“正射”. 我们在编写代码时,当需要使用到某一个类的时候,必定先会去了解这是一个什么类,是用来做什么的,有怎么样的功能. 之 ...
- NFS共享储存
目录 NFS 为什么要使用共享存储 集群没有共享存储的情况 集群有共享存储 NFS的工作原理 NFS部署 1.环境准备 2.关闭防火墙和selinux 3.部署nfs服务端 4.启动rpcbind 5 ...
- Day14 - Python基础14 事件驱动模型、IO模型
本节内容: 1:事件驱动模型 2:IO模型前戏准备 3:4种IO模型 1:事件驱动模型 传统的编程是如下线性模式的: 开始--->代码块A--->代码块B--->代码块C---> ...
- 关于git远程
1.注册github的账户(官网;github.com ) 2.新建一个项目(在右上角点击+,选择New repository ),输入项目名和项目描述,其他可根据自己项目选填,创建完成后可查看到ht ...
- 关于python内open函数encoding编码问题
自己学python的open函数时,发现在pycharm里新建一个file_name.txt文本文件,输入中文保存.再用open(file_name,'r+')打开,再去读写时出现了一些问题.再三控制 ...
- SpringCloud单元测试【六】
SpringCloud的单元测试主要是依靠 Mock以及Mockito, 所以我们需要对Mock以及Mockito有一定的认识. 一.为什么要用MockMvc 可能我们在测试控制层的代码都是启动服务器 ...
- 克隆系统后如何重新清除SID
为什么要清除SID? SID(Security Identifiers,安全标识符)是Windows中标识用户.组和计算机的唯一的号码,Windows操作系统通过SID对计算机和用户进行识别.用户的权 ...