arcgis for js学习之Draw类

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Draw类的详解</title>

    <meta charset="utf-8" />

    <!-- 绘图功能说明：

        draw类可以在地图中点击一点进行画点或者划线

        1、点击添加一个点。

        2、多个点的绘制双击添加最后一个点。

        3、多线段或者多边形点击添加顶点，双击添加最后一点。

        4、自由线和自由面开始按住鼠标左键绘制,放手绘完成。

        5、划线时点击开始，鼠标左键放开时结束。

         -->

    <!-- 构造函数：

        new Draw(map,options?)

         -->

    <!-- 常量：

        ARROW:画一个箭头

        CIRCLE:画一个圆

        ODWN_ARROW:指向下方的箭头

        ELLIPSE:画一个椭圆

        EXTENT:某一程度

        FREEHAND_POLYGON:徒手多边形

        FREEHAND_POLYLINE;徒手线

        LEFT_ARROW:向左的箭头

        LINE:一条线

        MULTI_POINT:多个点

        POINT:点

        POLYGON:多边形

        POLYLINE;折线

        RECTANGLE:矩形

        RIGHT-ARROW:一个箭头

        TRIANGLE:画一个三角形

        UP_ARROW:画一个箭头

         -->

    <!-- 属性：

        1、fillSymbol:多边形的样式

        2、lineSymbol:线的样式

        3、markerSymbol:点的样式

        4、respectDrawingVertexOrder:几个拓扑

         -->

    <!-- 方法：

        activate(geometryType,options):激活工具栏

        deactivate():关闭

        finishDrawing():完成绘制，onDrawEnd事件

        setFillSymbol(fillSymbol):设置填充样式

        setLineSymbol(lineSymbol):设置线的样式

        setMarkerSymbol(marjerSymbol):设置点的样式

        setRespectDrawingVertexOrder(set):设置是否修改多边形的几何拓扑

         -->

    <!-- 事件：

        draw-complete:绘制完成时触发

        draw-end:此事件被弃用

         -->

    <!-- 构造方法详情：

        new Draw(map,options?)

        options的属性：

        drawTime:设定时间绘制下一个点

        showTooltips:工具提示

        tolerance:宽容，徒手画时决定鼠标移动多远添加一个新点

        tooltipPffset:确定多远抵消鼠标指针的工具提示

         -->

    <script>

        //实例一：是否显示showTooltips

        require([

            "esri/map", "esri/toolbars/draw"

        ], function (Map, Draw) {

            var map = new Map();

            var toolbar = new Draw(map, {

                showTooltips: false

            });

        });

        //实例二：设置drawTime

        require(["esri/map", "esri/toolbars/draw"], function (Map, Draw) {

            var map = new Map();

            var toolbar = new Draw(map, {

                tooltipOffset: 20,

                drawTime: 90

            });

        });

        //实例三：激活 active(geometryType,options),进行画点

        require(["esti/toolbars/draw"], function (Draw) {

            var toolbar = new Draw();

            toolbar.active(Draw.POINT);

            toolbar.finishDraw();//完成绘制

        })

        //实例四：draw-end事件，返回类型为一个geometry对象

        require(["esri/toolbars/draw", "esri/graphic"], function (Draw, Graphic) {

            function createToolbar(map) {

                var toolbar = new Draw(map);

                toolbar.on("draw-end", addToMap);

            }

            function addToMap(evt) {

                var graphic = new Graphic(evt.geometry, symbol);

                map.graphics.add(graphic);

            }

        });

    </script>

</head>

<body>

</body>

</html>

arcgis for js学习之Draw类的更多相关文章

  1. arcgis for js学习之Graphic类

    arcgis for js学习之Graphic类 <title>Graphic类</title> <meta charset="utf-8" /> ...

  2. js学习（五）-全局函数和类内部函数区别

    //---------------------------js代码--------------------------- function User(){       //类成员的定义及构造函数 th ...

  3. Arcgis for Js之加载wms服务

    概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...

  4. js学习之变量、作用域和内存问题

    js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...

  5. 【Knockout.js 学习体验之旅】（2）花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  6. 【Knockout.js 学习体验之旅】（1）ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. Backbone.js学习之一

    昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...

  8. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  9. 我的three.js学习记录（二）

    通过上一篇文章我的three.js学习记录(一)基本上是入门了three.js,但是这不够3D,这次我希望能把之前做的demo弄出来,然后通过例子来分析操作步骤. 1. 示例 上图是之前做的一个dem ...

随机推荐

  1. 关于 Senparc.Weixin.Cache.Redis 引用的 StackExchange.Redis 版本不匹配的反馈测试

    推测原因是老系统中有地方引用了旧版本的 StackExchange.Redis,原因是 StackExchange.Redis 1.2.6 版本未提供针对 .net 4.6 以上的支持,导致库引用会失 ...

  2. 如何在Linux下查看版本信息

    Linux下如何查看版本信息, 包括位数.版本信息以及CPU内核信息.CPU具体型号等等,整个CPU信息一目了然.   1.# uname -a   (Linux查看版本当前操作系统内核信息)   L ...

  3. [Swift]LeetCode212. 单词搜索 II | Word Search II

    Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...

  4. [Swift]LeetCode528. 按权重随机选择 | Random Pick with Weight

    Given an array w of positive integers, where w[i] describes the weight of index i, write a function  ...

  5. [Swift]LeetCode728. 自除数 | Self Dividing Numbers

    A self-dividing number is a number that is divisible by every digit it contains. For example, 128 is ...

  6. Jquery 对DOM 的操作

     .focus 获取焦点  .blus离开焦点----------------------------------------------------------------------------- ...

  7. asp.net core 系列 1 概述

    一.   概述 ASP.NET Core 是一个跨平台的高性能开源框架,可以用来:建置 Web 应用程序和服务.IoT应用和移动后端.在 Windows macOS 和 Linux 上使用喜爱的开发工 ...

  8. 前端笔记之JavaScript（十二）缓冲公式&检测设备&Data日期

    一.JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px ...

  9. 初探WebAssembly

    1.前言 参加完2018年上海的QCon大会,想到了会议中来自Microsoft的朱力旻大佬讲的WebAssembly,感触颇深. 我之前完全没有了解过WebAssembly,之前没有了解的原因也很简 ...

  10. 如何合理封装你的轮子、飞机、大炮（以封装OkHttp为例）

    前言 对于程序员来说,很多时候,我们都在造房子,从学会框架或者是学会构建整个项目之后,慢慢的我们就会觉得自己在做的事情是一种重复劳动,很多时候只不过是换个面孔而已.而更快的造房子,造好看的房子可能是进 ...