arcgis api for js地图符号的使用(使用Draw绘制图形）
鄢承运
api里面用来在地图上绘制图形的工具位于 esri/toolbars/draw模块，同时还需要搭配esri/graphic模块以及点、线、面的样式相关的模块。
draw 模块用来绘图，之所以还要用到graphic模块是因为，所有绘制的图形都是以Graphic类的形式添加到地图的graphic图层的，所以我们需要将绘制的图形构造成Graphic对象（这个过程中可以设置绘制图形的样式）才能加到地图里面。
步骤
- 首先创建地图。
- 接着在地图的load事件中添加创建工具条对象toolbar的操作
- 设置toolbar对象的draw-end事件，也就是说绘图完成后应该进行什么操作，在这里，我们需要将绘制的几何形状搭配上样式构造成Graphic对象，并且添加到地图的graphic图层中
- 然后设置相关按钮的单击事件，实现单击按钮激活toolbar（绘图工具）的功能
示例代码如下：
<html>
<head>
<meta charset="utf-8">
<title>符号与图形</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
html, body, #main, #mapDiv{ /* mapDiv必须设置样式，否则可能无法正常显示，dijit布局也要有相应的样式 */
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
</style>
<script src="http://js.arcgis.com/3.9/"></script>
<script>
var toolbar, map;
var sms, sls, sfs; // 点、线、面样式
require(["esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/toolbars/draw",
"esri/graphic",
// 样式相关的模块
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
// 解析页面中dojo元素
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"],
function(Map, TiledLayer, Draw, Graphic, MarkerSymbol, LineSymbol, FillSymbol, parser) {
parser.parse(); // 解析页面
map = new Map("mapDiv");
var url = "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
var layer = new TiledLayer(url);
map.addLayer(layer);
// 在地图的加载事件中创建绘图工具
map.on("load", create_toolbar);
// 绑定相应的按钮
activate_tool();
// 绑定按钮的单击事件
function activate_tool() {
var btns = document.getElementsByClassName('btn-info');
for(var i = 0; i < btns.length; ++ i) {
var type = btns[i].getAttribute('aria-label');
// 清除按钮
if(type == "clear") {
btns[i].onclick = function() {
map.graphics.clear();
}
continue;
}
// 其他按钮
btns[i].onclick = function() {
var tool = this.getAttribute('aria-label');
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
}
}
// 创建绘图工具条
function create_toolbar(themap) {
toolbar = new Draw(map);
// 绘图完毕之后，由add_to_map函数将图形显示在地图上
toolbar.on('draw-end', add_to_map);
}
// 添加至地图
function add_to_map(evt) {
toolbar.deactivate();
var symbol = null;
switch(evt.geometry.type) {
case 'multipoint':
case 'point':
symbol = new MarkerSymbol();
break;
case 'polyline':
symbol = new LineSymbol();
break;
default:
symbol = new FillSymbol();
break;
}
// 构造Graphic对象
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
map.showZoomSlider(); // 恢复可缩放状态
}
});
</script>
</head>
<body class="tundra">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="top" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'" style="width: 100%; height: 40px;">
<button class="btn btn-info" type="button" aria-label="POINT">点</button>
<button class="btn btn-info" type="button" aria-label="MULTI_POINT">多点</button>
<button class="btn btn-info" type="button" aria-label="LINE">线</button>
<button class="btn btn-info" type="button" aria-label="POLYGON">多边形</button>
<button class="btn btn-info" type="button" aria-label="RECTANGLE">矩形</button>
<button class="btn btn-info" type="button" aria-label="CIRCLE">圆</button>
<button class="btn btn-info" type="button" aria-label="ELLIPSE">椭圆</button>
<button class="btn btn-info" type="button" aria-label="TRIANGLE">三角形</button>
<button class="btn btn-info" type="button" aria-label="clear">清空</button>
</div>
<div id="left" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true" style="width: 80px;">
左侧菜单
</div>
<div id="center" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
<div id="mapDiv"></div>
</div>
</div>
</body>
</html>
类似资料：