一、前言
ArcGIS 10.1版本之后,提供了一种新的功能:动态图层。准确的说,动态图层并不是一种新的地图服务,它更像是地图服务(MapServer)的一种扩展。动态图层主要特点是:(1)改变地图服务的现有图层;(2)动态图层适用于海量图层的情况;(3)不需要将 shp 文件发布为服务,服务器可以之间读取 shp 文件在前端显示;
二、调用动态图层
在前面已经说过动态图层并不是一种新的服务类型,而是地图服务的一种扩展,因此我们不需要发布服务,只需要对地图服务添加动态图层功能即可。启用地图服务的步骤为:(1)给相应的地图服务启用动态工作空间;(2)选择服务器相应的硬盘地址并赋予其 id;(3)将相应位置注册到 ArcGIS Server 服务器(保证 ArcGIS Server 可以访问数据);(4)在 Web 端进行调用;
2.1 启用动态图层
(1)首先需要发布动态地图服务,发布成功后,我们打开 Manager->登陆,找到该服务,点击功能,选择允许每次请求修改图层顺序和符号->添加
(2)选择本地数据
注:D:\myshp文件夹下面有一个shp文件:lunkuoxian.shp
(3)因此我们选择工作空间类型为:shpfile文件夹,工作空间id在此处取名为my,硬盘路径:D:\myshp
(4)点击确定,重新启动服务
(5)注册文件夹到服务器
点击站点->数据存储->注册文件夹(因为我们是文件夹,所以是注册文件夹,如果是数据库,那么就要注册数据库)
(6)在 Service Directory 中查看动态图层是否启用
在浏览器中输入:http://localhost:6080/arcgis/rest/services,进入到 Test 文件夹,找到发布的地图服务 MyService,点进去后在最小方找到:
访问动态图层的地址为:http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer
三、Web端调用
代码实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Web端调用动态地图服务</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
<script type="text/javascript">
require(["esri/map",
"dojo/dom",
"dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/TableDataSource",
"esri/layers/LayerDataSource",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleLineSymbol",
"dojo/domReady!"], function (
Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol) {
var map = new Map("mapDiv");
var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer");
map.addLayer(layer1);
on(dom.byId("btn"),"click",function(e){
//定义一个数据源
var dataSource = new TableDataSource();
//此处为我们设置的命名空间
dataSource.workspaceId = "my";
//命名空间下面的shp
dataSource.dataSourceName = "lunkuoxian.shp";
//定义一个图层数据源
var layerSource = new LayerDataSource();
//给图层数据源赋值
layerSource.dataSource = dataSource;
//定义一个要素图层:注意链接为动态图层的地址
var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer/dynamicLayer", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
source: layerSource
});
//定义线符号
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//定义渲染器
var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
//定义渲染器
layer2.setRenderer(renderer);
layer2.refresh();
map.addLayer(layer2);
})
});
</script>
</head>
<body>
<div id="mapDiv" style="height:600px;"></div>
<button id="btn">添加动态图层</button>
</body>
</html>
运行结果前:
运行结果后:
四、动态图层属性查询
1、通过 Click 之间获取
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动态图层的属性查询—click方法</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
<script type="text/javascript">
require(["esri/map",
"dojo/dom",
"dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/TableDataSource",
"esri/layers/LayerDataSource",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleLineSymbol","dojo/json",
"dojo/domReady!"], function (
Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil) {
var map = new Map("mapDiv");
var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer");
map.addLayer(layer1);
on(dom.byId("btn"),"click",function(e){
//定义一个数据源
var dataSource = new TableDataSource();
//此处为我们设置的命名空间
dataSource.workspaceId = "my";
//命名空间下面的shp
dataSource.dataSourceName = "lunkuoxian.shp";
//定义一个图层数据源
var layerSource = new LayerDataSource();
//给图层数据源赋值
layerSource.dataSource = dataSource;
//定义一个要素图层:注意链接为动态图层的地址
var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer/dynamicLayer", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
source: layerSource
});
//定义线符号
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//定义渲染器
var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
//定义渲染器
layer2.setRenderer(renderer);
layer2.refresh();
map.addLayer(layer2);
layer2.on("click", function(evt) {
//得到点击的graphics
var graphic=evt.graphic;
//得到该属性信息
var attributes=graphic.attributes;
//得到该属性信息转换成字符串
var result=jsonUtil.stringify(attributes)
//将结果弹出一下
alert(result);
//获得要素图层的主键名称
})
})
});
</script>
</head>
<body>
<div id="mapDiv" style="height:600px;"></div>
<button id="btn">添加动态图层</button>
</body>
</html>
结果:
2、通过查询获得
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动态图层的属性查询—通过查询获得属性</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.17/3.17/init.js"></script>
<script type="text/javascript">
require(["esri/map",
"dojo/dom",
"dojo/on",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/TableDataSource",
"esri/layers/LayerDataSource",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleLineSymbol","dojo/json","esri/tasks/query",
"dojo/domReady!"], function (
Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer,SimpleLineSymbol,jsonUtil,Query) {
var map = new Map("mapDiv");
var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer");
map.addLayer(layer1);
on(dom.byId("btn"),"click",function(e){
//定义一个数据源
var dataSource = new TableDataSource();
//此处为我们设置的命名空间
dataSource.workspaceId = "my";
//命名空间下面的shp
dataSource.dataSourceName = "lunkuoxian.shp";
//定义一个图层数据源
var layerSource = new LayerDataSource();
//给图层数据源赋值
layerSource.dataSource = dataSource;
//定义一个要素图层:注意链接为动态图层的地址
var layer2 = new FeatureLayer("http://localhost:6080/arcgis/rest/services/Test/MyMapService/MapServer/dynamicLayer", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
source: layerSource
});
//定义线符号
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//定义渲染器
var renderer = new esri.renderer.SimpleRenderer(lineSymbol);
//定义渲染器
layer2.setRenderer(renderer);
layer2.refresh();
map.addLayer(layer2);
on(dom.byId("attr"),"click",function(){
//得到要素图层的主键属性
var idProperty = layer2.objectIdField;
//定义查询参数
var query = new Query();
//是否返回几何形状
query.returnGeometry = false;
//图层的主键名称(根据自己要求修改)
query.objectIds = [247];
//查询条件1=1意思是:只根据主键查询,忽略where子句
query.where = "1=1";
//进行查询
layer2.selectFeatures(query, FeatureLayer.SELECTION_NEW,function(result){
//因为我们根据主键查询,一定只有一个元素
var graphic=result[0];
//获得属性
var attributes=graphic.attributes;
//得到该属性信息转换成字符串
var result=jsonUtil.stringify(attributes)
//将结果弹出一下
alert(result);
});
})
})
});
</script>
</head>
<body>
<div id="mapDiv" style="height:600px;"></div>
<button id="btn">添加动态图层</button>
<button id="attr">用户弹出属性</button>
</body>
</html>
结果图: