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.TableDataSource
                var 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.TableDataSource
                var 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));

                    //图层ID
                    var 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);
                });