ArcGIS API For JavaScript（二）调用动态地图服务
在ArcGIS API 中给我们提供了一个类叫做ArcGISDynamicMapServiceLayer利用这个类，我们可以获得发布的地图服务。调用动态地图服务一般只需要两步：①通过地图服务的URL创建一个ArcGISDynamicMapServiceLayer对象
②将动态地图服务的对象添加到地图容器中
1、创建一个动态地图发布：
可参阅博客： （一）ArcGIS Server之发布动态地图服务
https://blog.csdn.net/lovecarpenter/article/details/52205093
2、调用动态地图服务
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"],
function(Map,ArcGISDynamicMapServiceLayer){
var map = new Map("mapDiv");
//利用url创建一个动态地图服务对象
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
//将地图服务对象添加到地图容器中
map.addLayer(layer);
})
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div> //定义一个容器，设置宽度和高度，边界宽度1，颜色白色
</body>
</html>
运行结果：
3、根据需求隐藏服务中的某一个图层
首先查看自己的发布的服务，一共有两个图层，现在想隐藏“省界_region”图层。
①添加一个按钮
<button id="btn" value="confirm" style="width:80px; height:30px;">隐藏图层</button>
②修改require（）函数
require(["esri/map","dojo/dom","dojo/on","esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/domReady!"],
function(Map,dom,on,ArcGISDynamicMapServiceLayer){
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer);
//给id为btn的按钮绑定click事件
on(dom.byId("btn"),"click",function()
{
layer.setVisibleLayers([0]);
})
})
完整代码：
运行结果：
①此代码功能的实现非常简单，只利用了setVisibleLayers方法，告诉服务，我要显示图层编号为0的图层，也就是国界线图层。
②在require中加载了一个新的模块dojo/dom模块，此模块给我们提供了一个方法dom.byId(id),我们可以通过id获得dom对象，类似于document.getElementById()方法。
③在require中加载了一个新的模块dojo/on模块，在dojo中on是用来绑定事件的,on(target,type,listener)的第一个参数是给哪一个对象绑定事件，第二个参数是事件的类型，第三个是参数是回调函数。
3、通过属性查询地图服务中的信息
首先查看“省界”图层的属性表，以下来实现通过“NAME”属性来进行查询
在实现这个功能的时候我们分几步开始考虑：
①在网页上创建一个查询输入框
②将文本框中的信息提取，并创建属性查询对象
③将查询到的省份要素提取，利用graphics高亮显示
3.1创建查询文本框
NAME:<input type="text" placeholder="请输入省份名称"> <input type="button" value="省份查询">
3.2 提取文本框中的省份名称，创建属性查询对象
function(Map,query,on,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer);
query("#btn").on("click",function(){
//获得省份的名称
var name=query(".nm")[0].value;
//实例化查询参数
var findParams = new FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [1];
findParams.searchFields = ["NAME"];
findParams.searchText = name;
//实例化查询对象
var findTask = new FindTask("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
//进行查询
findTask.execute(findParams,showFindResult)
});
3.3 将查询到的省份信息（几何信息）获取，利用graphics高亮显示
function showFindResult(queryResult)
{
if (queryResult.length == 0) {
alert("没有该元素");
return;
}
for (var i = 0; i < queryResult.length; i++) {
//获得该图形的形状
var feature= queryResult[i].feature;
var geometry = feature.geometry;
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
}
}
运行结果：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require(["esri/map","dojo/query","dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/graphic",
"dojo/domReady!"],
function(Map,query,on,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer);
query("#btn").on("click",function(){
//获得省份的名称
var name=query(".nm")[0].value; //提取输入值
//实例化查询参数
var findParams = new FindParameters();
findParams.returnGeometry = true; //返回几何
findParams.layerIds = [1]; //图层号
findParams.searchFields = ["NAME"]; //查询字段
findParams.searchText = name; //字段值
//实例化查询对象
var findTask = new FindTask("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
//进行查询
findTask.execute(findParams,showFindResult) //创建查询
});
function showFindResult(queryResult)
{
if (queryResult.length == 0) {
alert("没有该元素");
return;
}
for (var i = 0; i < queryResult.length; i++) {
//获得该图形的形状
var feature= queryResult[i].feature;
var geometry = feature.geometry;
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 2);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
}
}
})
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
NAME:<input type="text" class="nm" placeholder="请输入省份名称"> <input type="button" id="btn" value="省份查询">
</body>
</html>
3.4 通过空间查询地图服务中的信息
当我点击地图时，将我点击的图形进行高亮显示，此时就用到了空间查询。为了实现该功能我们可以分为以下几步：
①因为要点击地图，所以首先我们给地图绑定点击事件
②获得点击的地图坐标(点坐标)，并创建空间查询参数对象
③将省份图层与点相交的省份查询出来，然后利用graphic进行高亮显示
3.4.1 给地图绑定点击事件
map.on("click",mapClick);
3.4.2 获得点击的地图坐标(点坐标)，并创建空间查询参数对象
function mapClick(e){
//获得用户点击的地图坐标
var point=e.mapPoint;
//实例化查询参数
query=new Query();
query.geometry = point;
query.outFields = ["*"];
query.outSpatialReference = map.spatialReference;
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
query.returnGeometry = true;
//实例化查询对象
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer/1");
//注意：创建查询任务时，引用的服务多了一个“/1”，代表的是使用第二个图层创建点击查询任务
//进行查询
queryTask.execute(query,showFindResult)
}
3.4.3 将省份图层与点相交的省份查询出来，然后利用graphic进行高亮显示
function showFindResult(queryResult)
{
if (queryResult.features == 0) {
alert("没有该元素");
return;
}
for (var i = 0; i < queryResult.features.length; i++) {
//获得该图形的形状
var feature = queryResult.features[i];
var geometry = feature.geometry;
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
}
}
运行结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require(["esri/map","dojo/query","dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/graphic",
"dojo/domReady!"],
function(Map,query,on,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer);
map.on("click",mapClick);
function mapClick(e){
//获得用户点击的地图坐标
var point=e.mapPoint;
//实例化查询参数
query=new Query();
query.geometry = point;
query.outFields = ["*"];
query.outSpatialReference = map.spatialReference;
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
query.returnGeometry = true;
//实例化查询对象
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer/1");
//进行查询
queryTask.execute(query,showFindResult)
}
function showFindResult(queryResult)
{
if (queryResult.features == 0) {
alert("没有该元素");
return;
}
for (var i = 0; i < queryResult.features.length; i++) {
//获得该图形的形状
var feature = queryResult.features[i];
var geometry = feature.geometry;
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
}
}
})
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
附：最好使用第二个方法
绑定事件之后，在某些情况下也要解除事件的绑定，下面提供几种方法解除事件绑定：
①直接通过事件句柄解除（dojo新版本）
//绑定事件
var handle=map.on("click",mapClick);
//解除事件
handle.remove();
②通过老版本的方法解除
//绑定事件
var handle=map.on("click",mapClick);
//解除事件
dojo.disconnect(handle)
实例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require(["esri/map","dojo/query","dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/graphic",
"dojo/domReady!"],
function(Map,query,on,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic)
{
var map = new Map("mapDiv");
var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer);
var handler;
query("button").on("click",function(event){ //为button添加点击事件
//获得按钮的文本信息
var value=this.innerHTML; //获取button的值
if(value=="要素选择") // //如果点击了要素选择
handler = dojo.connect(map, "onClick", mapClick); //添加监听事件
else if(value=="移除要素选择") //如果点击了移除选择
dojo.disconnect(handler); //移除监听事件
})
function mapClick(e){
//获得用户点击的地图坐标
var point=e.mapPoint;
//实例化查询参数
query=new Query();
query.geometry = point;
query.outFields = ["*"];
query.outSpatialReference = map.spatialReference;
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
query.returnGeometry = true;
//实例化查询对象
var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer/1");
//进行查询
queryTask.execute(query,showFindResult);
}
function showFindResult(queryResult)
{
if (queryResult.features == 0) {
alert("没有该元素");
return;
}
for (var i = 0; i < queryResult.features.length; i++) {
//获得该图形的形状
var feature = queryResult.features[i];
var geometry = feature.geometry;
//定义高亮图形的符号
//1.定义面的边界线符号
var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255, 0, 0]), 1);
//2.定义面符号
var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([0, 255, 0, 1]));
//创建客户端图形
var graphic = new Graphic(geometry, PolygonSymbol);
//将客户端图形添加到map中
map.graphics.add(graphic);
}
}
})
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
<button>要素选择</button>
<button>移除要素选择</button>
</body>
</html>
6、地图的基本操作（拉框放大、缩小；平移；全图；漫游）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<script>
require(["esri/map",
"dojo/on",
"dojo/dom",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/query","esri/toolbars/navigation",
"dojo/domReady!"],
function (Map,on,dom,
ArcGISDynamicMapServiceLayer,query,Navigation
) {
var map = new Map("mapDiv",{
logo: false
});
var layer = new ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer)
//创建地图操作对象
var navToolbar = new Navigation(map);
//给按钮添加绑定事件
query("button").on("click",function(event){
//获得按钮的文本信息
var value=this.innerHTML;
switch(value){
case "平移":
navToolbar.activate(Navigation.PAN);
break;
case "拉框缩小":
navToolbar.activate(Navigation.ZOOM_OUT);
break;
case "拉框放大":
navToolbar.activate(Navigation.ZOOM_IN);
break;
case "全图":
navToolbar.zoomToFullExtent();
break;
case "漫游":
//默认是漫游操作
navToolbar.deactivate();
break;
}
})
});
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
<button>拉框放大</button>
<button>拉框缩小</button>
<button>平移</button>
<button>全图</button>
<button>漫游</button>
</body>
</html>
7、API中的小部件（鹰眼视图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<style>
#view {
height: 200px;
width: 200px;
border:1px solid red;
border-right-color:blue;
position:relative;
left:920px;
top:-200px;
}
</style>
<script>
require(["esri/map","dojo/dom","esri/dijit/OverviewMap","dojo/domReady!"], function (
Map,dom, OverviewMap){
var map = new Map("mapDiv",
{
basemap: "topo"
});
//1.创建小部件对象
var overviewMapDijit = new OverviewMap({
map: map,
visible: true,
},dom.byId("view"));//指定将小部件绑定在哪个DOM元素上面
//2.启用小部件
overviewMapDijit.startup();
});
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
<div id="view"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<style>
</style>
<script>
require(["esri/map","dojo/dom","esri/dijit/OverviewMap","dojo/domReady!"], function (
Map,dom, OverviewMap){
var map = new Map("mapDiv",
{
basemap: "topo"
});
//1.创建小部件对象
var overviewMapDijit = new OverviewMap({
attachTo: "top-right",
map: map,
visible: true,
},dom.byId("view"));//指定将小部件绑定在哪个DOM元素上面
//2.启用小部件
overviewMapDijit.startup();
});
</script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
8、显示坐标值
<html>
<head>
<meta charset="UTF-8">
<title>ArcGIS JavaScript API: ESRI_StreetMap_World_2D</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<style>
#mapdiv{
width:900px;
height:600px;
border:1px solid #000;
}
#info{
/*设置坐标显示栏的样式 使用绝对定位；设置宽度和高度、边界线和背景颜色；左边距和上边距*/
position: absolute;
width:240px;
height:20px;
border:1px solid rgb(214, 58, 162);
left: 665px;
top:540px;
background-color: antiquewhite;
}
</style>
<script type="text/javascript">
dojo.require("esri.map"); //调用esri.map模块
var map, navToolbar, editToolbar, tileLayer, toolbar;
var mapDyUrl = "http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer";
function Init()
{
try
{
map = new esri.Map("mapdiv"); //使用html标签创建一个Map对象
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapDyUrl); //定义一个切片地图服务图层
map.addLayer(dynamicMapServiceLayer); //将切片地图服务图层添加至map中
dojo.connect(map, "onMouseMove", MapMouseMove); //为map对象添加鼠标移动事件监听
}
catch(e)
{
alert("地图初始化失败:"+e.message);
}
}
dojo.addOnLoad(Init); //调用函数
function MapMouseMove(evt) //显示坐标值
{
try
{
var mp = evt.mapPoint;
dojo.byId("info").innerHTML = "经度：" + mp.x.toFixed(4) +" "+ "纬度：" + mp.y.toFixed(4);
}
catch(e)
{
alert("显示坐标值错误："+e.message);
}
}
</script>
</head>
<body class="tundra">
<div id="mapdiv"></div>
<div id="info"></div>
</body>
</html>
<!-- -->是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。
/* */是CSS的注释标签
/* */（注释代码块）、//（注释单行）是JS的注释标签。
9、向地图中添加图形元素
<!DOCTYPE html>
<html lang="en">
<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" />
<script src="http://js.arcgis.com/3.9/"></script>
<style>
#mapDiv {
height: 600px;
width: 900px;
border:1px solid red;
}
</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//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/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_SOLID, new Color([255, 0, 0]), 3);
//定义点符号l
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([0, 0, 255]));
//定义面符号
var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([0, 255, 0]));
//声明一个类型和图形
var geometry;
var graphic;
//根据文本定义相应的geometry
switch(text)
{
case "添加点":
geometry=new Point({
"x":117,
"y":31,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,pSymbol);
break;
case "添加线":
//点的坐标对
var paths=[];
paths[0]=[
[117,31],
[118,32],
[119,33],
[120,34]
];
geometry=new Polyline({
"paths":paths,
"spatialReference":map.spatialReference
})
graphic=new Graphic(geometry,lineSymbol);
break;
case "添加面":
//点的坐标对
var ring=[];
ring[0]=[
[117,31],
[118,32],
[119,33],
[120,34],
[120,30],
[118,31]
];
geometry=new Polygon({
"rings":ring,
"spatialReference":map.spatialReference
});
graphic=new Graphic(geometry,fill);
break;
case "添加圆":
//圆心
var p=new Point({
"x":117,
"y":31,
"spatialReference":map.spatialReference
});
//半径
var r=200000;
geometry=new Circle(p,{
"radius":r
});
graphic=new Graphic(geometry,fill);
break;
}
//将图形添加到图层中
graphicsLayer.add(graphic);
})
})
</script>
</head>
<body class="tundra">
<div id="mapDiv" class="MapClass"></div>
<button>添加点</button>
<button>添加线</button>
<button>添加面</button>
<button>添加圆</button>
</body>
</html>
10、鼠标交互式画图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</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" />
<script src="http://js.arcgis.com/3.9/"></script>
<style>
#mapDiv {
height: 600px;
width: 900px;
border:1px solid red;
}
</style>
<script>
require(["esri/map",
"dojo/dom",
"dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer", //动态地图服务图层
"dojo/query", //查询
"esri/toolbars/draw", //工具条绘图控件
"esri/symbols/SimpleLineSymbol", //简单线符号
"esri/graphic", //图形
"esri/symbols/SimpleMarkerSymbol", //简单点符号
"esri/symbols/SimpleFillSymbol", //简单填充符号
"dojo/domReady!"],
function (Map,dom,on, ArcGISDynamicMapServiceLayer,query, Draw, SimpleLineSymbol,Graphic,SimpleMarkerSymbol,SimpleFillSymbol) {
var map = new esri.Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/%E5%90%88%E5%B7%A5%E5%A4%A7%E5%B9%B3%E9%9D%A2%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer)
var toolbar = new Draw(map, { showTooltips: true }); //为地图添加工具条，并且显示提示
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255]), 3); //设置线型、颜色和宽度
var marker= new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new dojo.Color([255, 0, 0])); //设置点的形状、颜色
var fill= new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([0, 255, 0])); //设置填充符号、颜色
on(toolbar,"draw-complete", function (result) {
var geometry=result.geometry;
var type=geometry.type;
var graphic;
switch (type)
{
case "point":
graphic= new Graphic(geometry, marker);
break;
case "polyline":
graphic= new Graphic(geometry, lineSymbol);
break;
case "polygon":
graphic= new Graphic(geometry, fill);
break;
}
map.graphics.add(graphic);
toolbar.deactivate();
});
//为按钮绑定点击事件
query("button").on("click",function(event){
var value=this.innerHTML; //获取按钮字面值
switch(value)
{
case "绘制点":
{
toolbar.activate(Draw.POINT, {
showTooltips:true
})
break;
}
case "绘制线":
{
toolbar.activate(Draw.POLYLINE, {
showTooltips:true
})
break;
}
case "绘制面":
{
toolbar.activate(Draw.POLYGON, {
showTooltips:true
})
break;
}
case "绘制*线":
{
toolbar.activate(Draw.FREEHAND_POLYLINE, {
showTooltips:true
})
break;
}
case "绘制*面":
{
toolbar.activate(Draw.FREEHAND_POLYGON, {
showTooltips:true
})
break;
}
}
});
});
</script>
</head>
<body class="tundra">
<div id="mapDiv" class="MapClass"></div>
<button>绘制点</button>
<button>绘制线</button>
<button>绘制*线</button>
<button>绘制面</button>
<button>绘制*面</button>
</body>
</html>
11、图形元素属性查询
<!DOCTYPE html>
<html lang="en">
<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" />
<script src="http://js.arcgis.com/3.9/"></script>
<style>
#mapDiv {
height: 600px;
width: 900px;
border:1px solid red;
}
</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/geometry/Point",
"dojo/domReady!"],
function(Map,ArcGISDynamicMapServiceLayer,
GraphicsLayer,on,query,Color,Graphic,
SimpleMarkerSymbol,SimpleLineSymbol,Point)
{
var map = new Map("mapDiv");
var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//%E4%B8%AD%E5%9B%BD%E5%90%84%E7%9C%81%E7%AE%80%E5%9B%BE/MapServer");
map.addLayer(layer);
//创建客户端图层
var graphicsLayer=new GraphicsLayer();
//将客户端图层添加到地图中
map.addLayer(graphicsLayer);
//添加点图形的函数
function addGraphic()
{
//定义线符号
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 255]), 1);
//定义点符号
var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0]),3);
//声明几何
var geometry;
//声明图形
var graphic;
//添加第一个点图形
geometry=new Point({ //构造一个几何图形，设置坐标值和空间参照系
"x":117,
"y":31,
"spatialReference":map.spatialReference
})
var attr = { "h":"安徽省"}; //定义一个属性
graphic=new Graphic(geometry,pSymbol,attr); //用几何图形、点符号和属性构造一个图形
graphicsLayer.add(graphic); //将图形添加至图形图层
//添加第二个点图形
geometry=new Point({
"x":117,
"y":35,
"spatialReference":map.spatialReference,
});
var attr = { "h":"山东省"};
graphic=new Graphic(geometry,pSymbol,attr);
graphicsLayer.add(graphic);
//添加第三个点图形
geometry=new Point({
"x":115,
"y":30,
"spatialReference":map.spatialReference,
});
var attr = { "h":"湖北省"};
graphic=new Graphic(geometry,pSymbol,attr);
graphicsLayer.add(graphic);
}
//调用添加点图形的函数
addGraphic();
//绑定事件
/* dojo.connect(graphicsLayer, "onClick", function(event){
var graphic=event.graphic;
alert(graphic.attributes["h"]);
})*/
on(graphicsLayer,"click",function(event){
var graphic=event.graphic; //获得图形图层中点击的图形
alert(graphic.attributes["h"]); //提示属性值
})
})
</script>
</head>
<body class="tundra">
<div id="mapDiv" class="MapClass"></div>
</body>
</html>
参考资料：（三）ArcGIS API For Javascript之调用动态地图服务
https://blog.csdn.net/lovecarpenter/article/details/52453725
ArcGIS API for JavaScript 3.23
https://developers.arcgis.com/javascript/3/jsapi/graphic-amd.html#attributes
地理信息科学
Writed By NX
QQ:1051926720