1.图层分析
共两层
- 底图（动态图层）
- 客户端图层（添加指定坐标的点线面）
2. 步骤
- 通过switch选择定义对应的geometry
- 根据坐标创建Graphic
graphic=new Graphic(geometry, xxx ); - 把图形加载到图层中
graphicsLayer.add(graphic);
3.贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Graphic</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
<script type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
<style>
.MapClass{
width:100%;
height:500px;
border:1px solid #000;
}
</style>
<script>
require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/GraphicsLayer",
"dojo/on","dojo/query","dojo/colors",
"esri/graphic","esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/geometry/Point",
"esri/geometry/Polyline","esri/geometry/Polygon",
"esri/geometry/Circle",
"dojo/domReady!"],
function(Map,ArcGISDynamicMapServiceLayer,
GraphicsLayer,on,query,Color,Graphic,
SimpleMarkerSymbol,SimpleLineSymbol,
SimpleFillSymbol,Point,Polyline,Polygon,Circle){
var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
map.addLayer(layer);
//创建客户端图层
var graphicsLayer=new GraphicsLayer();
//将客户端图层添加到地图中
map.addLayer(graphicsLayer);
//通过query查询到button对象
var btns=query("button");
on(btns,"click",function(event){
var text=this.innerHTML;
//定义符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0]));
var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 0, 0]));
//声明类型和图形
var geometry;
var graphic;
//根据文本定义相应的geometry
switch(text)
{
case "添加点":
geometry=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,pSymbol);
break;
case "添加线":
//点的坐标对
var paths=[];
paths[0]=[
[510326,3985702],
[510994, 3985676],
[511078, 3985903],
[510433, 3985928]
];
geometry=new Polyline({
"paths":paths,
"spatialReference":map.spatialReference
})
graphic=new Graphic(geometry,lineSymbol);
break;
case "添加面":
//点的坐标对
var ring=[];
ring[0]=[
[510275, 3986100],
[510508, 3986162],
[510596, 3986032],
[510271, 3985847],
[510275, 3986100]
];
geometry=new Polygon({
"rings":ring,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,fill);
break;
case "添加圆":
//圆心
var p=new Point({
"x":510706,
"y":3986100,
"spatialReference":map.spatialReference
});
//半径
var r=20;
geometry=new Circle(p,{
"radius":r
});
graphic=new Graphic(geometry,fill);
break;
}
//将图形添加到图层中
graphicsLayer.add(graphic);
})
})
</script>
</head>
<body>
<div id="mapDiv" class="MapClass"></div>
<button>添加点</button>
<button>添加线</button>
<button>添加面</button>
<button>添加圆</button>
</body>
</html>