更改图层的渲染方式

1.环境说明

ArcGIS 10.4.1
JS API 3.15

2.更改渲染方法说明

将动态图层添加到地图中后，支持根据业务字段更改渲染方式。这里根据渲染的图层源不同，分两种情况实现：一是更改从动态工作空间加载的图层的渲染方法；二是更改原地图服务中图层的渲染方法。不管是哪一种，更改渲染方式的实现方式是一样的，都是通过定义LayerDrawingOptions对象实现。

3.更改动态图层的渲染方法

对于已经添加到地图服务中的动态图层，还可以修改其渲染方法，如按唯一值渲染等，还可以为动态图层增加文字标注。

var lyrDrawingOptions = new LayerDrawingOptions();
lyrDrawingOptions.renderer = new SimpleRenderer(createSymbol(dynamicLayerDetails[layerId].geometryType));

//设置标注
var lblClass = new LabelClass({
    labelExpression: "\"OID:\" CONCAT [OBJECTID]",
    labelPlacement: 'always-horizontal',
    symbol:{
        "type": "esriTS",
        "color": [0,0,0],
        "haloColor":[245,245,245],
        "haloSize":1,
        "font": {
            "family":"Microsoft YaHei",
            "size": "14px"
        }
    }
});
lyrDrawingOptions.labelingInfo = [lblClass];
lyrDrawingOptions.showLabels = true;

drawingOptions[layerId] = lyrDrawingOptions;
baseLayer.setLayerDrawingOptions(drawingOptions);

4.更改原地图服务中图层的渲染方法

动态图层的功能不仅支持更新新添加的动态图层的渲染方法，也支持更改原地图服务中图层的渲染方法，还可以设置图层的标注。支持的渲染方法包括：SimpleRenderer、UniqueValueRenderer、ClassBreaksRenderer。

4.1. 唯一值渲染方法

function updateContinentSymbolBtnHandler(){
    var layerId = parseInt(dom.byId("mapServiceLayers").value);

    var renderer = new UniqueValueRenderer(createSymbol("esriGeometryPolygon"),"CONTINENT");
    renderer.addValue("Africa",createSymbol("esriGeometryPolygon"));
    renderer.addValue("Antarctica",createSymbol("esriGeometryPolygon"));
    renderer.addValue("Asia",createSymbol("esriGeometryPolygon"));
    renderer.addValue("Australia",createSymbol("esriGeometryPolygon"));
    renderer.addValue("Europe",createSymbol("esriGeometryPolygon"));
    renderer.addValue("Oceania",createSymbol("esriGeometryPolygon"));
    renderer.addValue("South America",createSymbol("esriGeometryPolygon"));
    renderer.addValue("North America",createSymbol("esriGeometryPolygon"));

    //更改渲染
    var lyrDrawingOptions = new LayerDrawingOptions();
    lyrDrawingOptions.renderer = renderer;
    //设置标注，labelExpression不能有中文，另外附加文字必须使用\"
    var lblClass = new LabelClass({
        labelExpression: "\"name:\" CONCAT [CONTINENT]",
        labelPlacement: "always-horizontal",
        symbol:{
            "type": "esriTS",
            "color": [255,0,0],
            "haloColor":[245,245,245],
            "haloSize":1,
            "font": {
                "family":"Microsoft YaHei",
                "size": "14px"
            }
        }
    });
    lyrDrawingOptions.labelingInfo = [lblClass];
    lyrDrawingOptions.showLabels = true;

    drawingOptions[layerId] = lyrDrawingOptions;
    baseLayer.setLayerDrawingOptions(drawingOptions);
}

4.2.分级渲染方法

注意：测试中发现不支持PictureMarkerSymbol和SVG图标的SimpleMarkerSymbol。

function updateCitiesSymbolBtnHandler(){
    //cities图层
    var layerId = 0;

    var svgSymbol = new SimpleMarkerSymbol("path",12,null,randomColor());
    svgSymbol.setPath("M0 32h16v-32h-16v32zM10 4h4v4h-4v-4zM10 12h4v4h-4v-4zM10 20h4v4h-4v-4zM2 4h4v4h-4v-4zM2 12h4v4h-4v-4zM2 20h4v4h-4v-4zM18 10h14v2h-14zM18 32h4v-8h6v8h4v-18h-14z");
    var picSms = new PictureMarkerSymbol("school_bus.png",12,12);

    var renderer = new ClassBreaksRenderer(createSymbol("esriGeometryPoint"),"POP");
    renderer.addBreak(10, 50000, createSymbol("esriGeometryPoint"));
    renderer.addBreak(50000, 100000, createSymbol("esriGeometryPoint"));
    //以下符号未生效
renderer.addBreak(100000, 250000, svgSymbol);
    renderer.addBreak(250000, 500000, svgSymbol);
    renderer.addBreak(500000, 1000000, svgSymbol);
    renderer.addBreak(1000000, 5000000, picSms);
    renderer.addBreak(5000000, 10000000,picSms);

    //更改渲染
    var lyrDrawingOptions = new LayerDrawingOptions();
    lyrDrawingOptions.renderer = renderer;
    drawingOptions[layerId] = lyrDrawingOptions;
    baseLayer.setLayerDrawingOptions(drawingOptions);
}

5.源码

xinligis github