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. Java面试大纲-java面试该做哪些准备，java开发达到这样的水平可以涨工资

    Java培训结束,面临的就是毕业找工作.在找工作时,就要针对性地做充分的面试准备.准备不充分的面试,完全是浪费时间,更是对自己的不负责. 上海尚学堂Java培训整理出Java面试大纲,其中大部分都是面 ...

  2. CS20SI-tensorflow for research笔记: Lecture2

    本文整理自知乎专栏深度炼丹,转载请征求原作者同意. 本文的全部代码都在原作者GitHub仓库github CS20SI是Stanford大学开设的基于Tensorflow的深度学习研究课程. Tens ...

  3. [Swift]LeetCode14. 最长公共前缀 | Longest Common Prefix

    Write a function to find the longest common prefix string amongst an array of strings. If there is n ...

  4. [Swift]LeetCode154. 寻找旋转排序数组中的最小值 II | Find Minimum in Rotated Sorted Array II

    Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e. ...

  5. [Swift]LeetCode858. 镜面反射 | Mirror Reflection

    There is a special square room with mirrors on each of the four walls.  Except for the southwest cor ...

  6. Docker系列教程01-Centos7安装新版Docker教程（10步）

    最近一直忙于开发,没有时间好好总结一下docker的知识.其实现在docker的教程已经很多很多了,但是很多系统的教程都是基于Ubuntu系统,因为官方推荐使用Ubuntu系统啊,原因在于Ubuntu ...

  7. Flume篇---Flume安装配置与相关使用

    一.前述 Copy过来一段介绍Apache Flume 是一个从可以收集例如日志,事件等数据资源,并将这些数量庞大的数据从各项数据资源中集中起来存储的工具/服务,或者数集中机制.flume具有高可用, ...

  8. 论JavaScript的作用域

    一直以来本人认为想深入了解一门语言,不光是让自己变成撸sir,更需要时间的锤炼.能经得起时间考验的东西更值得拥有.学习和使用Javascript一晃都7年了,最近才感觉自己对他才有顿悟,不知道是否来得 ...

  9. IView组件化之部署及按钮学习

    IView是什么? iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. Npm安装IView npm install iview 在main.js中配置I ...

  10. RecyclerView与ListView 对比浅析：缓存机制

    一. 背景 PS:相关知识:ListView与RecyclerView缓存机制原理大致相似,如下图所示: 滑动过程中,离屏的ItemView即被回收至缓存,入屏的ItemView则会优先从缓存中获取, ...