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 学习（五） 实现地图绘制工具的更多相关文章

  1. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  2. Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)

    Ⅰ. 在3.X版本中,设置Map对象的 "maxScale" 和 "minScale" 属性 <!DOCTYPE html> <html> ...

  3. arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

  4. arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  5. arcgis api for javascript 学习（六） 地图打印

    1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...

  6. arcgis api for javascript 学习（四） 地图的基本操作

    1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...

  7. ArcGis API for JavaScript学习——离线部署API

    ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...

  8. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  9. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

随机推荐

  1. golang-方法和接口

    1.方法 方法类似函数 ,多了一个接收者 ,接收者是指针指向结构体(也可以是值) ,方法与结构体绑定 (可以理解为模板定义方法) ,方法位于结构体内部 方法集可以理解就是多个方法 可以组合其他结构体方 ...

  2. JS基础语法---编程思想和对象

    编程思想: 把一些生活中做事的经验融入到程序中 面向过程:凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程 面向对象:根据需求找对象,所有的事都用对象来做,注重的是结果 面向对象特性: 封装, ...

  3. Data Management Technology(2) -- Data Model

    1.Data Model Model Is the abstraction of real world Reveal the essence of objects, help people to lo ...

  4. 如何判断Linux系统安装在VMware上?

    如何判断当前Linux系统是否安装在VMware上面呢? 因为公司大部分服务器位于VMware上,也有小部分系统部署在物理机上面.今天老大要求统计一下VMware和物理机上服务器的数量,个人简单测试. ...

  5. centos7.6使用openssl生成CA签署的证书个人实验笔记

    准备:客户端centos6.10  服务端Centos7.6 实验:客户端生成证书请求,服务端颁发证书,最后吊销其中一个证书 1.先在服务端上的/etc/pki/CA/目录生成rsa的私钥: 2.在服 ...

  6. [PHP] cli环境下php设置进程名字

    if (function_exists('cli_set_process_title')) { cli_set_process_title("superman php master proc ...

  7. springmvc+hibernate+layui+Jackson开发的一个小例子

    今天用springmvc+hibernate+layui开发了一个增删改查的例子,运行效果如下图: 下面是spring-servlet.xml的配置文件 主要的一些文件路径 数据库一张表,user表, ...

  8. acwing 23. 矩阵中的路径

    习题地址 https://www.acwing.com/problem/content/description/21/ 题目描述请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路 ...

  9. 2019-2020-1 20199305《Linux内核原理与分析》第四周作业

    MenuOS的构造 一.Linux源代码的关键目录 block:存放块设备管理代码: crypto:存放常见加密算法的C语言代码: Documentation:存放一些文档: drivers:驱动目录 ...

  10. Codeforces Round #594 (Div. 1) D. Catowice City 图论

    D. Catowice City In the Catowice city next weekend the cat contest will be held. However, the jury m ...