ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图

场景还原：

定位某个矢量图斑范围面，过滤展示该图斑，以图斑为中心，截图图斑周边并附带影像底图的截图。

在前端要实现地图截图，首先想到的是使用arcgis rest api中的export接口，这是没问题的，export方法可以很轻松的实现图片导出。官网rest api导出截图的参考地址如下：

Export Map—ArcGIS REST APIs | ArcGIS Developers

通过bbox控制导出范围，用于定位到指定图斑范围；layers控制要导出的图层；layerDefs控制图层过滤条件。

通过设置这几个属性，基本上可以满足大部分需求，但layers只能控制单个服务内部的所有图层，无法满足影像数据的叠加，因为影像都会发布成切片，也不可能放在动态服务中一同发布。为了实现影像底图等多图层的叠加，需要动态图层dynamicLayers。

首先需了解下什么是动态图层。

动态图层它是需要依附于一个开启动态图层的地图服务,然后把数据资源所在位置注册为这个地图服务的动态工作空间（shape、raster、filegdb、database等），也就是将动态工作空间寄宿到该服务里，在Web前端调用的时候指定图层关联的数据源进行符号化、查询等操作。

开启动态服务的过程可参考以下文章，不再截图操作。
ArcGIS server使用动态工作空间的服务发布及利用ArcGIS API for Javascript添加动态图层_最后的精灵的博客-CSDN博客

了解动态图层后，开始使用在服务上添加动态图层，考虑到矢量图斑要素方便存储到地理空间数据库，影像由于数据量可能很大，一般用文件存储在服务器中，因此可以考虑在影像服务上开启动态图层，关联上矢量要素图层。本文只做示例，展示在矢量图层上开启动态图层。

保存后重启地图服务方可生效。

参考代码：

以下展示两种方式：

（1）将动态图层数据以要素图层方式加载到地图，使用export的dynamicLayers属性参数设置。

                var workspaceId = "xizh";var layerName = "sde.sde.zrbhdbhtb1";console.log("当前增加的图层名：" + layerName);//定义一种数据源//1.TableDataSourcevar tableDS = new TableDataSource();tableDS.workspaceId = workspaceId;tableDS.dataSourceName = layerName;//2.定义动态图层数据var layerSource = new LayerDataSource();layerSource.dataSource = tableDS;//3.以featurelayer来加载，支持在此基础上的query操作。注意url地址var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/YSKJ/CheckSpot/MapServer/dynamicLayer", {id: layerName,mode: FeatureLayer.MODE_ONDEMAND,outFields: ["*"],infoTemplate: new InfoTemplate(tableDS.dataSourceName, "${*}"),source: layerSource}); map.addLayer(featureLayer);//设置图层渲染featureLayer.on("load", function () {var renderer = new SimpleRenderer(createSymbol(featureLayer.geometryType));featureLayer.setRenderer(renderer);dynamicLayerInfos = baseLayer.createDynamicLayerInfosFromLayerInfos();console.log(dynamicLayerInfos)const dynamicLayers = [{id: 102,source: {type: "dataLayer",dataSource: {type: "table",workspaceId: "xizh",dataSourceName: dom.byId("dynamicLayers").value,},},// definitionExpression: "",drawingInfo: {renderer: {type: "simple",symbol: {type: "esriSFS",style: "esriSFSSolid",color: [166, 36, 100, 255],outline: {type: "esriSLS",style: "esriSLSSolid",color: [0, 0, 255, 255],width: 2.0}}},transparency: 0,showLabels: true,labelingInfo: [{labelPlacement: "esriServerPolygonPlacementAlwaysHorizontal",labelExpression: "[zhqbhdmc]",useCodedValues: false,symbol: {type: "esriTS",color: [255, 255, 0, 255],verticalAlignment: "bottom",horizontalAlignment: "left",font: {family: "sim-sun",size: 10,style: "normal",weight: "bold",decoration: "none"}}}]}},{id: 101,source: {type: "mapLayer",mapLayerId: 0}}];esriRequest("http://localhost:6080/arcgis/rest/services/YSKJ/CheckSpot/MapServer/export", {query: {format: "png8",f: "json",bbox: "21.362888485827725,-39.40536624794468,212.63711151417232,98.94486123571511",size: "400,400",dpi: 200,dynamicLayers: JSON.stringify(dynamicLayers)}}).then(res => {console.log(res);});})

（2）将动态图层数据添加到原动态服务中，以layers属性参数设置。

                var workspaceId = "xizh";var layerName = "sde.sde.zrbhdbhtb1";console.log("当前增加的图层名：" + layerName);//定义一种数据源//1.TableDataSourcevar tableDS = new TableDataSource();tableDS.workspaceId = workspaceId;tableDS.dataSourceName = layerName;//2.定义动态图层数据var layerSource = new LayerDataSource();layerSource.dataSource = tableDS;//3.更新到现有的dynamicmapservicelayer中console.log("加载前：");printMsg(dynamicLayerInfos);var dynamicLayerInfo = new DynamicLayerInfo();dynamicLayerInfo.id = dynamicLayerInfos.length;dynamicLayerInfo.name = layerName;dynamicLayerInfo.source = layerSource;dynamicLayerInfos.splice(0, 0, dynamicLayerInfo);  //将新加的图层添加在数组最前面，在地图中会绘制在最上面。baseLayer.setDynamicLayerInfos(dynamicLayerInfos);console.log("加载后：");printMsg(dynamicLayerInfos);//根据图层几何类型设置符号var dynamicLayerUrl = baseLayer.url + "/dynamicLayer";var layerJson = {"source": layerSource.toJson()};var layersRequest = esriRequest({url: dynamicLayerUrl,content: {layer: JSON.stringify(layerJson),f: "json"},handleAs: "json",callbackParamName: "callback"});layersRequest.then(function (response) {console.log("Success: ", response.geometryType);var lyrDrawingOptions = new LayerDrawingOptions();lyrDrawingOptions.renderer = new SimpleRenderer(createSymbol(response.geometryType));//图层IDvar layerId = dynamicLayerInfos.length - 1;drawingOptions[layerId] = lyrDrawingOptions;baseLayer.setLayerDrawingOptions(drawingOptions);//esriRequest("http://localhost:6080/arcgis/rest/services/YSKJ/CheckSpot/MapServer/export", {query: {format: "png8",f: "json",bbox: "21.362888485827725,-39.40536624794468,212.63711151417232,98.94486123571511",size: "400,400",dpi: 200,// dynamicLayers: JSON.stringify(dynamicLayers)}}).then(res => {console.log(res);});}, function (error) {console.log("Error: ", error.message);});

ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图相关推荐

初学ArcGIS API for JavaScript
初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的 ...
Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
ArcGIS API for JavaScript：Layer之间那点儿事
先来看一个模型: |–TiledMapServiceLayer | |–ArcGISTiledMapServiceLayer |–DynamicLayer | |– ...
缓冲区分析—ArcGIS API for JavaScript
缓冲区分析是地理信息系统中的空间分析基本功能之一,是众多空间分析方法的基础.缓冲区分析是指为了识别某地理实体或空间物体对其周围的邻近性或影响度而在其周围建立的一定宽度的带状区. 缓冲区介绍缓冲区分析 ...
ArcGIS API For JavaScript学习笔记
之前学习ArcGIS API For JavaScript的一些记录,有些是转载的,不过转载的自己有重新做过一遍,这里做个总结,方便后面来学习回顾. 1.ArcGIS API For JavaScri ...
地理信息系统（GIS）系列——ArcGIS API for JavaScript 3.9（1）
Visual Studio 智能提示配置:将以下 JavaScript 文件引入项目中 arcgis_js_v39_sdk\arcgis_js_api\sdk\jshelp\jsapi_vsdoc12 ...
Arcgis api for Javascript + arcgisServer + arcSDE笔记（1）
最近要搞的项目要用Arcgis api for Javascript做地图模块,自己开始学相关的技术.这是之前整理的笔记,现在传到博客上,也作为学习的记录 0 环境搭建 Arcgis软件统一使用10. ...
ArcGIS API for JavaScript 3.23汉化（下）
ArcGIS API for JavaScript 3.23汉化(下) 4更为具体一.Default API configurations 默认API配置三.Retrieve data from ...
ArcGIS API for Javascript学习
一.ArcGIS API for Javascript 介绍 ArcGIS API for Javascript 是由美国 Esri 公司推出,跟随ArcGIS 9.3 同时发布的,是Esri 基于d ...

ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图

ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图相关推荐

最新文章

热门文章