实现绘制图形的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=" ...
随机推荐
- GitHub访问下载太慢解决办法
原因 为什么慢?github的CDN被某墙屏了. 解决方法 绕过dns解析,在本地直接绑定host,该方法也可加速其他因为CDN被屏蔽导致访问慢的网站. 实现 在本地host文件中添加映射,步骤如下: ...
- 标准结构篇:2)O型橡胶密封圈
本章目的:设计出符合行业要求的O型橡胶密封圈,不必再为一而再,再而三的测试漏水而烦恼. 1.前言 O型橡胶密封圈,简称O型圈,是密封圈的一种,也是最有代表性的标准结构件.顾名思义,它的目的在于密封.密 ...
- POJ_2886 Who Gets the Most Candies? 【二分+树状数组】
一.题目 POJ2886 二.分析 这个题目吧,开始没读懂,做的时候也没懂,WA的时候懂了.假设是第p个出圈的人有一个对应的因子个数$F(p)$,那么,题目求的就是这个$F(p)$最大的对应的人. 1 ...
- leetcode 53 最大子序列之和(动态规划)
思路:nums为给定的数组,动态规划: 设 一维数组:dp[i] 表示 以第i个元素为结尾的一段最大子序和. 1)若dp[i-1]小于0,则dp[i]加上前面的任意长度的序列和都会小于nums[i], ...
- iis+php(FastCGI)
1. 安装 IIS 时选择添加 CGI 功能 2. 安装 PHP, 2.1 下载 nts 版本 (非线程安全版本) zip 压缩包,下载对应的 vc++ 运行时(php官网下载页面左侧有下载链接) 2 ...
- mysql 设置默认时间为now()
TIMESTAMP的变体1,TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP在创建新记录和修改现有记录的时候都对这个数据列 ...
- 20190430-screen、client、offset、scroll等JS中各种宽度距离
参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
- 食品生鲜调料代理分销拼团商城微信小程序
食品生鲜调料代理分销拼团商城微信小程序 现在小程序越来越火爆了,一种新的分销拼团模式出现了.一起来分享一下吧 调料商城是一家是专业从事各种调料生产和网上调料商品销售平台,是藤椒油.花椒油.香油.火锅油 ...
- vue项目页面空白
vue项目页面空白 今天新建项目,然后发现路由也改了 app.vue里面也是啥都没有, 但是访问http://localhost:8080/#/login 能访问 里面确实空白的 错误: 错误原因: ...
- 【TensorFlow】-精选Github开源项目
转至:http://www.matools.com/blog/1801988 留底做个记录,有空在做验证. TensorFlow源码 https://github.com/tensorflow/ten ...