实现绘制图形的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=" ...
随机推荐
- 欧拉筛(线性筛) & 洛谷 P3383 【模板】线性筛素数
嗯.... 埃氏筛和欧拉筛的思想都是相似的: 如果一个数是素数,那么它的所有倍数都不是素数.... 这里主要介绍一下欧拉筛的思路:(欧拉筛的复杂度大约在O(n)左右... 定义一个prime数组,这个 ...
- BASIC CONCEPTS ABOUT 4G
http://en.wikipedia.org/ 原版的维基,远比我认识的强大 http://www.3gpp.org/ http://www.ietf.org/ http://www.wiresha ...
- 02-线性结构3 Reversing Linked List (25 分)
Given a constant K and a singly linked list L, you are supposed to reverse the links of every K elem ...
- org.elasticsearch.search.sort.SortBuilder使用
org.elasticsearch.search.sort.SortBuilder是一个抽象类,有4个子类 org.elasticsearch.search.sort.FieldSortBuilder ...
- egg
简介 阿里的 红色的是项目名字 egg-init --type simple First && cd First egg-init --type simple Second &a ...
- Java/Android 网络请求框架/库
Android 图片缓存框架 最上面的最优先 com.facebook.fresco:fresco:0.12.0 7.26.2016最新 Universal-Image ...
- React创建组件的三种方式比较
推荐文章: https://www.cnblogs.com/wonyun/p/5930333.html 创建组件的方式主要有: 1.function 方式 2.class App extends Re ...
- 案例19-页面使用ajax显示类别菜单
1 版本一 版本只能在首页显示类别,当切换到了其它页面就不会显示 1 web层IndexServlet代码 package www.test.web.servlet; import java.io.I ...
- Notepad++如何删除空行和空白字符
Notepad++如何删除空行和空白字符 1.Notepad++编辑器在编辑选项里面包括很多功能,编辑->行操作->移除空行(包括空白字符). 2.Notepad++查找替换支持正则替换. ...
- leetcode简单题目两道(1)
Problem: You are playing the following Nim Game with your friend: There is a heap of stones on the t ...