AGS JS开发-动态图层全面解析三

将动态图层添加到原地图服务中

---

1.环境说明

ArcGIS 10.4.1
JS API 3.15

2.实现思路

加载的基本思路：定义动态图层；加载到地图中；定义渲染方法。

每个动态地图服务各自关联的有一个DynamicLayerInfo类型的数组和一个LayerDrawingOptions类型的数组。DynamicLayerInfo类型的数组记录了动态图层的数据源信息。LayerDrawingOptions类型的数组记录了动态图层的渲染信息。

每次向动态地图服务增加一个新的动态图层，DynamicLayerInfo类型的数组也增加了一条新纪录。图层在地图中绘制顺序与该数组索引号相关，索引号越小的越在地图上层绘制，索引号最大的绘制在地图最底层。

新添加的动态图层需要定义渲染方法，不然不会在地图中显示出来。动态图层的渲染方法定义在LayerDrawingOptions类型的对象中。

3.将动态图层添加到原地图服务中

3.1.第一步：获取动态地图服务中动态图层信息

动态地图服务提供了createDynamicLayerInfosFromLayerInfos()方法，可以获取与该服务关联的所有动态图层信息。默认未添加任何动态图层的情况下，该方法返回的是地图服务本身包含的图层信息数组。

var baseLayer = new ArcGISDynamicMapServiceLayer("http://portal140.xinli.local/server/rest/services/worldcities/MapServer");
map.addLayer(baseLayer);

baseLayer.on("load",function(){
    //该方法只会返回原地图服务中包含的图层，动态的加不会算在内。
    dynamicLayerInfos = baseLayer.createDynamicLayerInfosFromLayerInfos();
});

3.2. 第二步：向原地图服务中添加动态图层

基本思路：先定义数据源；再定义动态图层；最后添加到地图服务关联的DynamicLayerInfo类型的数组中。需要注意的是图层的绘制顺序与该数组的索引号相关，索引号越小的越在地图上层绘制。

var workspaceId = "FGDBWorkspace1224";
var layerName = dom.byId("dynamicLayers").value;
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);

3.3. 第三步：符号化新添加的动态图层

新添加的动态图层需要定义渲染方法才会在地图中显示出来。在渲染前有个需要解决的问题是如何判断图层的几何类型。这里提供的方法是通过解析新添加的动态图层的rest地址返回信息来实现。

每个动态地图服务关联了一个LayerDrawingOptions类型的数组，该数组使用图层ID号作为索引号。如果需要定义某个动态图层的渲染方法，只需要在数组中定义以该图层ID作为索引号的渲染方法即可。

//根据图层几何类型设置符号
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);
}, function(error) {
    console.log("Error: ", error.message);
});

4.移除地图服务中的动态图层

在添加动态图层一节中提到每个动态地图服务关联的有一个DynamicLayerInfo类型的数组。如果要移除动态图层，不管是新添加的动态图层还是原服务中的图层，只需要从该数组中删除对应记录即可。

function removeDynamicLayerBtnHandler(){
    var idx = 0;
    for(idx in dynamicLayerInfos){
        if(dynamicLayerInfos[idx].name == dom.byId("dynamicLayers").value){
            //维护自定义的数组
            var layerId = dynamicLayerInfos[idx].id;
            dynamicLayerDetails.splice(layerId,1);
            drawingOptions.splice(layerId,1);

            //移除动态添加的图层
            dynamicLayerInfos.splice(idx,1);
            baseLayer.setDynamicLayerInfos(dynamicLayerInfos);

            break;
        }
    }
}

5.源码

xinligis github