码上欢乐
相关内容   简体   繁体

ArcGIS API For Javascript之动态图层

本文转载自  查看原文  2017-02-21 11:46  4343    webgis+js二次开发

 

 

 

1.引言

      在ArcGIS 10.1版本之后，ArcGIS提供了一种新的功能：动态图层。准确的说，动态图层并不是一种新的地图服务，它更像是地图服务（MapServer）的一种扩展。 
      动态图层主要特点：

  • 改变地图服务的现有图层
  • 动态图层适用于海量图层的情况
  • 不需要将shp文件发布为服务，服务器可以直接读取shp文件在前端显示

2.调用动态图层

      在前面已经说过动态图层并不是一种新的服务类型，而是地图服务的一种扩展，因此我们不需要发布服务，只需要对地图服务添加动态图层功能即可。启用地图服务的步骤为：

  • 给相应的地图服务启用动态工作空间
  • 选择服务器相应的硬盘地址并赋予其id
  • 将相应位置注册到ArcGIS Server服务器（保证ArcGIS Server可以访问数据）
  • 在Web端进行调用

2.1.启用动态图层

在本次实例中我们用到的地图服务为：http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer,如果不知道该服务怎么发布，请看：发布动态地图服务

  • 我们打开Manager->登录，找到该服务，点击功能，选择允许每次请求修改图层顺序和符号->添加

这里写图片描述

  • 硬盘上的数据

这里写图片描述

注:D:\myshp文件夹下面有一个shp文件：lunkuoxian.shp

  • 因此我们选择工作空间类型为：shpfile文件夹，工作空间id在此处取名为my，硬盘路径：D：\myshp

这里写图片描述

  • 点击确定，重新启动服务

这里写图片描述

这里写图片描述

  • 注册文件夹到服务器

点击站点->数据存储->注册文件夹（因为我们是文件夹，所以是注册文件夹，如果是数据库，那么就要注册数据库）

这里写图片描述

这里写图片描述

这里写图片描述

  • 在Services Directory 查看动态图层是否启用

在浏览器输入：http://localhost:6080/arcgis/rest/services进入Test文件夹，找到我们的地图服务MyService，点进去，在最下发发现：

这里写图片描述

注意动态图层的地址为：http://localhost:6080/arcgis/rest/services/Test/MyService/MapServer/dynamicLayer

2.2.Web端调用

2.2.1 代码实现

  • 首先我们加载地图
require(["esri/map", "dojo/dom", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/layers/TableDataSource", "esri/layers/LayerDataSource", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "dojo/domReady!"], function ( Map,dom,on, ArcGISDynamicMapServiceLayer, FeatureLayer, TableDataSource, LayerDataSource, SimpleRenderer, SimpleMarkerSymbol,SimpleLineSymbol) { var map = new Map("mapDiv"); var layer1 = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services//Test/MyService/MapServer"); map.addLayer(layer1); });
  • 添加一个按钮（用于添加动态图层）
<button id="btn">添加动态图层</button>
  • 1
  • 1
  • 给按钮添加事件
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/MyService/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); })

2.2.2 完整代码

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/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/MyService/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/MyService/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>

运行结果之前：

这里写图片描述

运行结果之后：

这里写图片描述

3.动态图层的属性查询

     在真实需求中,我们不仅仅是将shp在地图中显示那么简单，我们往往要查询该图层的属性信息,我们在前面代码的基础上添加上属性查询。

3.1方法1（通过click直接获取）

3.1.1代码实现

  • 给要素图层添加点击事件
layer2.on("click", function(evt) { //得到点击的graphics var graphic=evt.graphic; //得到该属性信息 var attributes=graphic.attributes; //得到该属性信息转换成字符串 var result=jsonUtil.stringify(attributes) //将结果弹出一下 alert(result); //获得要素图层的主键名称 })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

3.1.2全部代码

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/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/MyService/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/MyService/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>

运行结果：

这里写图片描述

3.2通过查询获得属性

3.2.1代码实现

  • 定义一个按钮（用户获得属性）
<button id="attr">用户弹出属性</button>
  • 1
  • 1
  • 给相应的按钮绑定事件
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); }); })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

3.2.2全部代码

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" /> <script type="text/Javascript" src="http://localhost/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/MyService/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/MyService/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>

4.补充

4.1 启用文件地理数据库三点不同

  • 文件的目录

这里写图片描述

  • 命名空间配置

这里写图片描述

  • 注册文件夹配置

这里写图片描述

  • 代码调用差别

这里写图片描述

注意：忽略了要素集的存在，即调用是lunkuoxian，而不是vector.lunkuoxian，调用的时候后面没有*.shp


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 ArcGIS api for javascript——合并切片和动态图层 Arcgis javascript api 动态图层自图层可见性设置 ArcGIS_api_for_js_添加动态图层 ArcGIS api for javascript——动态创建图层列表 arcgis js 动态图层点击事件 openlayers加载arcgis动态图层服务 ArcGIS Server10.1 动态图层服务 ArcGIS Server 动态图层发布调用图解 ArcGIS api for javascript——图层-创建WMS图层类型的图层 ArcGIS api for javascript-图层控制（图层树）
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM