实现绘制图形的ToolBar
给地图添加绘制图形的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的更多相关文章
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- html5 Canvas绘制图形入门详解
html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...
- html5 canvas 笔记一(基本用法与绘制图形)
<canvas> 元素 <canvas id="tutorial" width="150" height="150"> ...
- WPF2D绘制图形方法
我们先看看效果如何: xaml文件: <Window x:Class="WPF2D绘制图形方法.MainWindow" xmlns="http://schemas. ...
- 11-UIKit(Storyboard、View的基本概念、绘制图形、UIBezierPath)
目录: 1. Storyboard 2. Views 3. View的基本概念介绍 4. 绘制图形 5. UIBezierPath 回到顶部 1. Storyboard 1.1 静态表视图 1)Sec ...
- HTML5—canvas绘制图形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的“ ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
- HTML5使用Canvas来绘制图形
一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘 ...
- canvas 绘制图形
canvas 绘制图形: 注意: canvas 的宽高设置在行内,否则会使画布(canvas)产生扭曲,绘图变形: <!DOCTYPE html> <html lang=" ...
随机推荐
- (C/C++) 亂數應用
因為公司需要寫了一個亂數產生測試條件的小程式,再此紀錄下來 int _tmain(int argc, _TCHAR* argv[]) { fstream file; file.open("t ...
- windows下webpack不是内部命令 解决方法
安装webpack 到打包文件一路出现的各种问题 windows下webpack不是内部命令 安装完webpack后要加下环境变量 系统变量新建 NODE_PATH 变量值E:\demo\webpac ...
- stark - 2 ⇲路由分发
在介绍前面三个注意点后,开始写stark组件内容. from django.apps import AppConfig from django.utils.module_loading import ...
- 小众软件:windows 系统下 exe 文件打包软件
1. Enigma Virtual Box 单文件打包软件 官网:EnigmaProtection 2. 安装包打包软件 官网:Inno Setup 参考文献: [1] 单文件制作工具Enigma V ...
- $bzoj1011-HNOI2008$ 遥远的行星 其他
题面描述 直线上\(N\)颗行星,\(X=i\)处有行星\(i\),行星\(j\)受到行星\(i\)的作用力,当且仅当\(i<=A_j\).此时J受到作用力的大小为\(F_{i\to j}=\f ...
- java实现多线程的4种方式
1.继承Thread类 看jdk源码可以发现,Thread类其实是实现了Runnable接口的一个实例,继承Thread类后需要重写run方法并通过start方法启动线程. 继承Thread类耦合性太 ...
- Android Studio的串口通讯开发
基于android-serialport-api实现 前言RS232标准接口UARTRS232与UART转接下载 NDK 和构建工具创建支持 C/C++ 的新项目编译C/C++代码串口通讯原理关于校验 ...
- Java学习之路(四):面向对象
Java中的面向对象 概念:面向对象的原本的意思是“”万物皆对象“” 面向对象思想的特点: 是一种更符合我们思想习惯的思想,将复杂的事情简单化 使我们角色发生了转换,将我们从执行者变成了指挥者 面向对 ...
- github不能访问,可能原因是host里有太多过期的对应
github好久不能访问 一直以为是墙的原因 今天发现原来是有很多过期的host造成的 删掉那些host好了
- 在VM虚拟机中彻底删除Linux系统
前言:很久之前安装了Linux虚拟系统,然后用户名忘记了,想着重新安装个Ubuntu系统,就想着删除以前的系统. 删除方法如下: 1.点击打开该Linux系统. 2. 点击虚拟机的左上方“虚拟机”-& ...