ArcGIS Web客户端开发（三）在地图上绘制图形
三、在地图上绘制图形
自绘制图形即Graphic对象，一般都创建在GraphicLayer，每个Map至少缺省带一个GraphicLayer，可以创建多个，以实现分层管理，但在某个具体的业务中，将业务数据组织在一个图层中是有便利的，虽然从系统的角度不可取。Graphic对象实际上包括一个geometry，一个symbol和一组属性（或一个infoTemplate），常用的geometry对象主要有Point、Polyline、Polygon等，用于确定Graphic的位置；常用的符号对象有SimpleMarkerSymbol、SimpleLineSymbol、SimpleFillSymbol、TextSymbol等，用于确定图形对象的显示方式。属性主要是有关图形的其他语义信息，如长度、名称、隶属关系等。
因此，想在地图背景上绘制图形，主要有以下几步：
//使用dojo加载绘制模块
....
require([
"esri/map",
"esri/graphic",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"dojo/parser",
"dojo/on",
"dojo/domReady!"
], function(
Map, Graphic,
Point, Polyline, Polygon,
SimpleLineSymbol, SimpleFillSymbol, TextSymbol,
parser,on
) {
...
});
//读入几何数据，如下读入一个箭头绘制的多边形数据，不同的对象读入数据的要求各不相同。
//你可以想象你是从数据库中读入的，反正不是ArcGIS直接支持的类型。
...
var arrow = new Polygon({
"rings": [
[
[9862211, 6617856],
[8922952, 5522055],
[8922952, 5991684],
[6105178, 5991684],
[6105178, 7087485],
[8922952, 7087485],
[8922952, 7557114],
[9862211, 6617856]
]
],
"spatialReference": {
"wkid": 102100
}
});
...
//创建符号对象，这里比较偷懒，全用缺省值，
//本质上，你可以根据数据的不同取值进行设置，从而实现应用数据需要的可视化效果
//当然，符号对象可以重用给多个图形对象。
...
var polygonSymbol = new SimpleFillSymbol();
...
//最后创建图形对象并加入GraphicLayer图层
...
map.graphics.add(new Graphic(arrow, polygonSymbol));
...
下面的代码是一步创建点的geometry对象、符号属性，以及根据infoTemplate赋予属性的例子，前提时数据你都准备好了。
...
var myPoint = {"geometry":{"x":-104.4140625,"y":69.2578125,
"spatialReference":{"wkid":4326}},"attributes":{"XCoord":-104.4140625,
"YCoord":69.2578125,"Plant":"Mesa Mint"},"symbol":{"color":[255,0,0,128],
"size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS",
"style":"esriSMSSquare","outline":{"color":[0,0,0,255],"width":1,
"type":"esriSLS","style":"esriSLSSolid"}},
"infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/>
Longitude: ${XCoord} <br/> Plant Name:${Plant}"}
};
var gra = new Graphic(myPoint);
...
以下是一段最基础的在地图背景上显示自定义图形的全部代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Edit Tools</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
var map;
require([
"esri/map",
"esri/graphic",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/TextSymbol",
"dojo/parser",
"dojo/on",
"dojo/domReady!"
], function(
Map, Graphic,
Point, Polyline, Polygon,
SimpleLineSymbol, SimpleFillSymbol, TextSymbol,
parser,on
) {
parser.parse();
//打开地图
map = new Map("map", {
basemap: "streets",
center: [3.955, 59.338],
zoom: 3
});
//用addGraphics函数关联load事件，以便在加载地图时完成图形创建
map.on("load", addGraphics);
//创建自绘制图形
function addGraphics() {
//创建图形符号对象
var polygonSymbol = new SimpleFillSymbol();
var polylineSymbol = new SimpleLineSymbol();
var text = new TextSymbol("Editable Text");
text.font.setSize("20pt");
//创建Geometry
var polyline = new Polyline({
"paths":[
[
[-12484306,7244028],
[-7318386,10061803],
[-3013453,10727111]
]
],"spatialReference":{
"wkid":102100
}
});
var polygon = new Polygon({
"rings": [
[
[-4226661, 8496372],
[-3835304, 8731187],
[-2269873, 9005137],
[-1213208, 8613780],
[-1017529, 8065879],
[-1213208, 7478843],
[-2230738, 6891806],
[-2935181, 6735263],
[-3522218, 6891806],
[-3952711, 7165757],
[-4265797, 7283164],
[-4304933, 7635386],
[-4304933, 7674521],
[-4226661, 8496372]
]
],
"spatialReference": {
"wkid": 102100
}
});
var arrow = new Polygon({
"rings": [
[
[9862211, 6617856],
[8922952, 5522055],
[8922952, 5991684],
[6105178, 5991684],
[6105178, 7087485],
[8922952, 7087485],
[8922952, 7557114],
[9862211, 6617856]
]
],
"spatialReference": {
"wkid": 102100
}
});
var triangle = new Polygon({
"rings": [
[
[2426417, 8535508],
[4304933, 12292541],
[6183449, 8535508],
[2426417, 8535508]
]
],
"spatialReference": {
"wkid": 102100
}
});
var point = new Point(-40, 35);
//创建图形对象并加入图层
map.graphics.add(new Graphic(polyline, polylineSymbol));
map.graphics.add(new Graphic(polygon, polygonSymbol));
map.graphics.add(new Graphic(arrow, polygonSymbol));
map.graphics.add(new Graphic(triangle, polygonSymbol));
map.graphics.add(new Graphic(point, text));
}
});
</script>
</head>
<body class="nihilo">
<div id="map"></div>
</body>
</html>
运行效果如下图所示：
当然，如果我们的应用数据全部由Arcgis维护，在地图上显示自己的应用信息就和显示地图一样简单，常用FeatureLayer图层对象进行此类数据的管理。