给地图添加绘制图形的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. (USB HID) Configuration Descriptor

    最近完成了HID的基本收發,使用的配置用了2個Endpoint,把一些特別重要要的地方紀錄下來 整個Configuration 分成4大部分 : 1. Configuration 2. Interfa ...

  2. (C/C++) 亂數應用

    因為公司需要寫了一個亂數產生測試條件的小程式,再此紀錄下來 int _tmain(int argc, _TCHAR* argv[]) { fstream file; file.open("t ...

  3. redis安全(加入密码)

    一.前言 在使用云服务器时,安装的redis3.0+版本都关闭了protected-mode,因而都遭遇了挖矿病毒的攻击,使得服务器99%的占用率!! 因此我们在使用redis时候,最好更改默认端口, ...

  4. 【Python】子域名查询脚本

    脚本学习,多写写就会啦,来一发个人编写的超级无敌low的子域名查询脚本 #coding:utf-8 import re import requests import urllib import url ...

  5. zipimport.ZipImportError: can't find module 'encodings'

    环境说明:windows 7.python 3.7.0.pyinstaller 3.1. 解决方案:升级pyinstaller 到 3.4.

  6. SQL语句exists用法

    首先头脑中有三点概念: 1 .  EXISTS子查询找到的提交 NOT EXISTS 子查询中 找不到的提交 说明:不要去翻译为存在和不存在,把脑袋搞晕. 2 . 建立程序循环的概念,这是一个动态的查 ...

  7. TR-069_Amendment-4:附录G.穿越NAT网关的连接请求方式

    注意:这种机制只适用于RFC 3489[21]中定义的经典STUN,RFC 5389引入后,这个机制已经过时.这个机制不是设计用于RFC 5389中定义的STUN.IPv6部署要么不使用NAT,要么以 ...

  8. (转)CentOS7 搭建LVS+keepalived负载均衡(一)

    原文:http://blog.csdn.net/u012852986/article/details/52386306 CentOS7 搭建LVS+keepalived负载均衡(一) CentOS7 ...

  9. jreble安装 in idea

    http://www.cnblogs.com/littlehb/archive/2013/04/19/3031045.html

  10. python2.7 输入&函数参数&路径表示&各种下标_含义

    1.Python2.x与3.x的input区别 input与python3不同,在python2.7中分为input()与raw_input() 其中input()返回的是int/float类型数据, ...