给地图添加绘制图形的ToolBar还是有必要的,比较人性化的功能。图形的样式可以自己定制,也提供了朴实的默认样式。对 dojo 不太懂,出现了许许多多问题,真是蛋疼的一天啊。令人惊喜的是 ArcGis 不仅提供了 point,line,mulitpoint,polyline,polygon 等基本图形,还有circle,trinangle,ellipse这样的特殊类型。

  一.首先我们需要设置各要素对象的样式(以最基本的Symbol为例):

var markerSymbol = new esri.symbol.SimpleMarkerSymbol();
markerSymbol.setColor(new esri.Color("#FF8F8F")); var lineSymbol = new esri.symbol.SimpleLineSymbol();
lineSymbol.setColor(new esri.Color([255, 143, 143, 1]));
lineSymbol.setWidth(2); var fillSymbol = new esri.symbol.PictureFillSymbol("img/fill.png",
new esri.symbol.SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color('#000'), 1),42, 42);

  二.在地图加载后,初始化toolbar工具:

<div id="info">
<div>Tool Bar</div>
<button id="Point">Point</button>
<button id="Multipoint">Multipoint</button>
<button id="Line">Line</button>
<button id="Polyline">Polyline</button>
<button id="FreehandPolyline">Freehand Polyline</button>
<button id="Triangle">Triangle</button>
<button id="Extent">Rectangle</button>
<button id="Circle">Circle</button>
<button id="Ellipse">Ellipse</button>
<button id="Polygon">Polygon</button>
<button id="FreehandPolygon">Freehand Polygon</button>
</div>

  不知道为什么dojo提供的dojo.on注册事件的方法我无法使用,例子里是用on(dom.byId("info"), "click", function(evt) {}定义事件的。

var map,tb;
map.on("load", initToolbar);
...
function initToolbar() {
tb = new esri.toolbars.Draw(map);
tb.on("draw-end", addGraphic); document.getElementById("info").onclick = function (evt) {
if (evt.target.id == "") {return;}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
}
}

  三.toolbar是根据它active方法中的参数决定绘制类型的。

function addGraphic(evt) {
tb.deactivate();
map.enableMapNavigation();
var symbol;
if ( evt.geometry.type == "point" || evt.geometry.type == "multipoint")
{
symbol = markerSymbol;
} else if ( evt.geometry.type == "line" || evt.geometry.type == "polyline")
{
symbol = lineSymbol;
}
else
{
symbol = fillSymbol;
}
map.graphics.add(new Graphic(evt.geometry, symbol));
}

效果:

实例链接:https://developers.arcgis.com/javascript/jssamples/graphics_add.html

我还发现了个错误,在回传按钮id时,点击 id = "info" 的<div>时,实例中仍然以 evt.target.id 作为判断依据是错误的,这时的返回值为"";

实现绘制图形的ToolBar的更多相关文章

  1. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  3. html5 canvas 笔记一(基本用法与绘制图形)

    <canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...

  4. WPF2D绘制图形方法

    我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...

  5. 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)

    目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...

  6. HTML5—canvas绘制图形(1)

    1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...

  7. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  8. HTML5使用Canvas来绘制图形

    一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...

  9. canvas 绘制图形

    canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...

随机推荐

  1. editplus5注册码

    注册码:Vovan 3AG46-JJ48E-CEACC-8E6EW-ECUAW

  2. [NodeJS]Jenkins-cli

    使用npm 包nestor 触发jenkins job, 达到命令行管理Jenkins功能. 1. install nestor : npm install -g nestor 2. set JENK ...

  3. Vivado 的IP:Global 和 Out-Of-Context选项问题

    在Vivado定制IP的时候,或者在IP Catalog中双击一个IP,不论该IP是我们自己添加到工程的自定义IP,还是Vivado自己带的IP,选择"Customize IP"后 ...

  4. Python批量修改文件名(os库)

    问题: 在某一文件夹内有97个sql文件,全部都以统一格式命名,例如“A201222-广州李小龙纪念协会-1-广州李小龙纪念协会-2018.AUD” 由于有两段重复了,而且中间的“1”也没有意义,需要 ...

  5. bitset用法

    学习博客:https://www.cnblogs.com/magisk/p/8809922.html C++的 bitset 在 bitset 头文件中,它是一种类似数组的结构,它的每一个元素只能是0 ...

  6. Oracle TM锁和TX锁

    CREATE TABLE "TEST6" ( "ID" ), "NAME" ), "AGE" ,), "SEX ...

  7. Request笔记

    1 Request 的简介和运行环境 1.HttpServletRequest 概述 我们在创建 Servlet 时会覆盖 service()方法,或 doGet()/doPost(),这些方法都有两 ...

  8. Codeforces 868F. Yet Another Minimization Problem

    Description 给出一个长度为 \(n\) 的序列,你需要将它分为 \(k\) 段,使得每一段的价值和最小,每一段的价值是这一段内相同的数的个数 题面 Solution 容易想到设 \(f[i ...

  9. Js 合并 table 行 的实现方法

    Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下,  经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...

  10. 获取URL中某个参数的值

    JS代码: function getQueryString(name){ var reg = new RegExp("(^|&)" + name + "=([^& ...