ArcGIS JavaScript开发-动态图层全面解析四

更改图层的渲染方式
1.环境说明
ArcGIS 10.4.1JS 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
文章来源：http://www.jianshu.com/p/5065d8ca3de9