ArcGIS api for javascript——图形-增加图形到地图
描述
本例展示了如何使用Draw工具栏在地图上描绘许多种类的几何体。ArcGIS JavaScript API包含工具栏。
工具栏不是一个在页面上自动地可见的用户界面组件。相反，工具栏是一个助手类，可以用来让用户在地图上描绘几何体。它保存为描绘每个几何体类型而写的代码。仅仅激活需要描绘的几何体类型。本例中，每个html按钮激活一个不同的几何体类型。这是Point按钮的代码：
<button onclick="tb.activate(esri.toolbars.Draw.POINT);" ID="Button1">Point</button>
当用户点击这个按钮，工具栏激活点几何体。允许人们从一个下拉列表，一组radio按钮或一些其他组件中选择几何体的类型。
本例中，工具栏的"onDrawEnd"事件确保完成描绘一个要素后，要素可以在地图上看到：:
dojo.connect(tb, "onDrawEnd", addGraphic);
addGraphic函数为几何体类型设置适当的符号。本例中，符号从下拉列表中提供。每个列表的项目都是在一行上的符号的定义，像这样：
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]))">Square</option>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Shapes and Symbols</title>
<link rel="stylesheet" type="text/css" href="http://www.tilesqh.cn/arcgis_js_api/library/1.5/arcgis/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://www.tilesqh.cn/arcgis_js_api/library/1.5/arcgis/index.jsp"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.agstiled");
dojo.require("esri.toolbars.draw"); var map, tb;
function init() {
map = new esri.Map("map");
dojo.connect(map, "onLoad", initToolbar); map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer")); } function initToolbar(map) { tb = new esri.toolbars.Draw(map);
dojo.connect(tb, "onDrawEnd", addGraphic);
} function addGraphic(geometry) {
alert(222);
var symbol = dojo.byId("symbol").value;
if (symbol) {
symbol = eval(symbol);
}
else {
var type = geometry.type;
if (type === "point" || type === "multipoint") {
symbol = tb.markerSymbol;
}
else if (type === "line" || type === "polyline") {
symbol = tb.lineSymbol;
}
else {
symbol = tb.fillSymbol;
}
} map.graphics.add(new esri.Graphic(geometry, symbol));
} dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<button onclick="tb.activate(esri.toolbars.Draw.POINT);">Point</button>
<button onclick="tb.activate(esri.toolbars.Draw.MULTI_POINT);">Multipoint</button>
<button onclick="tb.activate(esri.toolbars.Draw.EXTENT);">Extent</button>
<button onclick="tb.activate(esri.toolbars.Draw.POLYLINE);">Polyline</button>
<button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);">Freehand Polyline</button>
<button onclick="tb.activate(esri.toolbars.Draw.POLYGON);">Polygon</button>
<button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);">Freehand Polygon</button>
<button onclick="tb.activate(esri.toolbars.Draw.LINE);">Line</button> <button onclick="tb.deactivate()">Deactivate</button> <select id="symbol">
<option value="">--- Select Symbol ---</option>
<option value="">--- Simple Marker Symbols ---</option>
<option value="new esri.symbol.SimpleMarkerSymbol();">Default</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]))">Square</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 50, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([0,0,0]), 2))">Cross, dash outline</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 25, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([0,0,255]), 2))">X, dot outline</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([255,255,0,0.5]))">Diamond</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15)">Diamond, 15 angle</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15).setOffset(0,5)">Diamond, 15 angle, 5 offset in Y</option>
<option value="">--- Picture Marker Symbols ---</option>
<option value="">No Default</option>
<option value="new esri.symbol.PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 51)">Simple Globe</option>
<option value="new esri.symbol.PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 25, 25).setAngle(315)">Simple Globe, 25x25, 315 angle</option>
<option value="new esri.symbol.PictureMarkerSymbol('http://www.esri.com/graphics/aexicon.jpg', 51, 25).setAngle(315).setOffset(10,0)">Simple Globe, 25x25, 315 angle, 10 offsetx</option> <option value="">--- Simple Line Symbols ---</option>
<option value="new esri.symbol.SimpleLineSymbol();">Default</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_NONE, new dojo.Color([255,0,0]), 1)">None</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2)">Dash Dot</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 3)">Dash</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([255,0,0]), 5)">Dot</option>
<option value="">--- Cartographic Line Symbols ---</option>
<option value="new esri.symbol.CartographicLineSymbol()">Default</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10)">Solid</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_ROUND)">Solid, round cap, round join</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_SQUARE, esri.symbol.CartographicLineSymbol.JOIN_BEVEL)">Solid, square cap, bevel join</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_MITER, 5)">Solid, round cap, miter (5) join</option>
<option value="">--- Simple Fill Symbols ---</option>
<option value="new esri.symbol.SimpleFillSymbol()">Default</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">None</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]))">Solid</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_HORIZONTAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Horizontal</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_FORWARDDIAGONAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Forward diagonal</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_DIAGONALCROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Diagonal cross</option>
<option value="">--- Picture Fill Symbols ---</option>
<option value="">No Default</option>
<option value="new esri.symbol.PictureFillSymbol('images/sand.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Sand</option>
<option value="new esri.symbol.PictureFillSymbol('images/mangrove.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Mangrove</option>
<option value="new esri.symbol.PictureFillSymbol('images/swamp.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Swamp</option>
<option value="new esri.symbol.PictureFillSymbol('images/stiple.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Ordered 10% Stiple</option>
</select> <div id="map" style="width:1024px; height:512px; border:2px solid #000;" class="tundra"></div> <br />
Zoom Slider :
<input type="button" value="Hide" onclick="map.hideZoomSlider()" />
<input type="button" value="Show" onclick="map.showZoomSlider()" /> </body class="tundra">
</html>
ArcGIS api for javascript——图形-增加图形到地图的更多相关文章
- ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...
- arcgis api for javascript本地部署加载地图
最近开始学习arcgis api for javascript,发现一头雾水,决定记录下自己的学习过程. 一.下载arcgis api for js 4.2的library和jdk,具体安装包可以去官 ...
- arcgis api for javascript 学习（六） 地图打印
1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...
- arcgis api for javascript 学习（四） 地图的基本操作
1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...
- ArcGIS api for javascript——用缓存区查询地图
描述 本例展示了如何在另外一个任务里使用一个任务的结果.单击地图查看被单击的点的1公里范围内的缓存(如果需要可以修改这个默认的缓存距离).也可以看缓存区的这些点的人口普查街区信息.单击一个点查看更多的 ...
- ArcGIS api for javascript——使用图层定义显示地图
描述 本例展示如何使用图层定义来限制显示在地图上的图层信息.为了了解本例做了什么,看看用于这个地图的ESRI_Census_USA服务的服务目录页是有帮助的.检查地图中的图层列表.现在注意这行代码限制 ...
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
- ArcGIS API For JavaScript 开发（二）基础地图
有了开发环境,接下来的就是实践了,实践是检验真理的唯一标准! 多多练习,不要觉得自己能够想的出来就万事大吉了,还是得动手做才是最好的检验自己的能力. 基础地图,本节将通过arcgis api for ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- ArcGIS api for javascript——加载查询结果，悬停显示信息窗口
转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...
随机推荐
- ORACLE查询优化之is null和is not null优化
最近工作的时候遇到了比较大的数据查询,自己的sql在数据量小的时候没问题,在数据量达到300W的时候特别慢,只有自己优化sql了,以前没有优化过,所以记录下来自己的优化过程,本次是关于is null和 ...
- JavaScript设计模式(biaoyansu)(2)
单例模式实例 (创建类模式): let elBalance = document.getElementById('balance') function init () { var a = new Di ...
- How Javascript works (Javascript工作原理) (一) 引擎，运行时，函数调用栈
个人总结:该系列文章对JS底层的工作原理进行了介绍. 这篇文章讲了 运行时:js其实是和AJAX.DOM.Settimeout等WebAPI独立分离开的 调用栈:JavaScript的堆内存管理 和 ...
- CF474F Ant colony
#include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #i ...
- vue中的methods、computed和watch
1.computed属性: 经过处理返回的数据值,只要源数据没有发生改变,computed函数里面对相应的数据就不会反生改变,相当于缓存在本地;发生改变的时候,computed对应数据的函数才会发生改 ...
- 【Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) B】 Code For 1
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把序列生成的过程看成一颗树 会发现最后形成的是一颗二叉树. 每个二叉树上的节点就对应了序列中的一个数字. 如果我们把每个节点都往下投 ...
- 【codeforces 553C】Love Triangles
[题目链接]:http://codeforces.com/problemset/problem/553/C [题意] 给你n个点,m条边; 每种边有2两种类型; 让你补充剩下的边,构造一个完全图; 使 ...
- Python学习第二天-编写三级菜单
编写三级菜单:1. 运行程序输出第一级菜单2. 选择一级菜单某项,输出二级菜单,同理输出三级菜单3. 菜单数据保存在文件中4. 让用户选择是否要退出5. 有返回上一级菜单的功能 # Author: z ...
- 联想z470 win7 64位双系统继续恢复镜像法安装黑苹果10.9.3
之前的方法是安装 10.9 http://blog.csdn.net/kissing_huo/article/details/23559239的 苹果最新的swift的语言 出来 必须最新的xcod ...
- 【Struts2二】结果集（result-type）
在jsp/servlet中,结果集一般是指请求转发和重定向这两种. Struts2作为框架,提供了基于这两种的很多其它的结果集! 在struts-default.xml中定义了一些默认的结果集: ...