ArcGIS API For JavaScript(二)调用动态地图服务

原创 2018年04月17日 11:22:08

                     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>

 


7API中的小部件(鹰眼视图)

<!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


那些国家和机构承认雅思

那些国家和机构承认雅思常 见 问 题 1. 什么是IELTS雅思?   IELTS 雅思是International English Language Testing System(国际英语语言测试制...
  • stanely
  • stanely
  • 2001-06-04 22:00:00
  • 1002

(三)ArcGIS API For Javascript之调用动态地图服务

引言 调用动态地图服务 需求 1根据需求隐藏服务中的某一个图层 11代码解释 2通过属性查询地图服务中的信息 21代码实现 22代码解释 3通过空间查询地图服务中的信息 31代码实现 32代码解释 4...
  • LoveCarpenter
  • LoveCarpenter
  • 2016-09-06 21:23:33
  • 17676

ArcGIS API For Javascript之调用动态地图服务+属性、空间查询

引言 调用动态地图服务 需求 1根据需求隐藏服务中的某一个图层 11代码解释 2通过属性查询地图服务中的信息 21代码实现 22代码解释 3通过空间查询地图服务中的信息 31代码实现 32代码解释 4...
  • u012123612
  • u012123612
  • 2016-12-14 14:09:50
  • 4843

arcgis-api-for-js-之添加图层到地图及地图服务设置可见图层

1. 前言 ArcGISDynamicMapServiceLayer 类代表动态图层,因此就有很大的属性与方法来操作视图服务。 2. 添加图层到地图 我们使用 addLayer() 方法将图层加...
  • cj9551
  • cj9551
  • 2018-01-25 20:30:12
  • 114

c#动态类型,及动态对象的创建,合并2个对象,map

经常会遇到这样的情况,我们在响应客户端请求的数据的时候需要对数据进行处理,比如数据库中的数据是int型,它可能表示某个枚举,或者其它的逻辑意义(数据库这样的设计可能是从数据安全性、存储量上等角度考虑)...
  • Joyhen
  • Joyhen
  • 2015-12-15 14:54:23
  • 4875

Android 定期动态更改启动页

我们用android手机打开一个app,会发现一个现象就是好多的app的首页是定期变化的(说白了其实就是服务器端的图片定期被更新了,android端需要定期检测并确定是否需要开启线程进行下载并保存起来...
  • Zophar_Development
  • Zophar_Development
  • 2017-12-20 17:57:52
  • 69

地图动态标绘--B/S应用(一)

动态标绘广泛应用于电力、通信和应急等多个行业和领域。它可以用形象生动的矢量符号描述各种业务对象,表示各种资源,还可以动态渲染业务进度和流程。 在前篇地图动态标绘一我们讲了动态标绘的基本构成及在C/S应...
  • supermapsupport
  • supermapsupport
  • 2016-12-13 16:15:24
  • 2077

UML动态模型图简单介绍

UML动态模型图描述了系统动态行为的各个方面,包括用例图、序列图、协作图、活动图和状态图。下面就每种图做一个简单介绍: 用例图 用例图描述系统外部的执行者与系统提供的用例之间的某种联系。所谓用例是...
  • jiary5201314
  • jiary5201314
  • 2015-03-17 20:06:57
  • 790

UML入门 之 交互图 -- 时序图 协作图详解

.作者 : 万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/17927131. 动态图概念 : 从静态图中抽取瞬间值的变化...
  • m0_37135879
  • m0_37135879
  • 2017-04-10 16:59:27
  • 1667

autocad 动态加载ARCGISONLINE地图数据

我在公司以前开发过一个使用CAD加载GIS数据,并实现编辑以及渲染等功能的系统,应用于规委。原系统中数据 的刷新都是手动进行的。今天脑子一转,试试自动刷新数据的效率。        1. 要想自动刷...
  • buct2007000811
  • buct2007000811
  • 2013-12-20 17:21:48
  • 574
收藏助手
不良信息举报
您举报文章:ArcGIS API For JavaScript(二)调用动态地图服务
举报原因:
原因补充:

(最多只允许输入30个字)