更改圖層的渲染方式

1.環(huán)境說明

ArcGIS 10.4.1
JS API 3.15

2.更改渲染方法說明

將動態(tài)圖層添加到地圖中后，支持根據(jù)業(yè)務(wù)字段更改渲染方式。這里根據(jù)渲染的圖層源不同，分兩種情況實現(xiàn)：一是更改從動態(tài)工作空間加載的圖層的渲染方法；二是更改原地圖服務(wù)中圖層的渲染方法。不管是哪一種，更改渲染方式的實現(xiàn)方式是一樣的，都是通過定義LayerDrawingOptions對象實現(xiàn)。

3.更改動態(tài)圖層的渲染方法

對于已經(jīng)添加到地圖服務(wù)中的動態(tài)圖層，還可以修改其渲染方法，如按唯一值渲染等，還可以為動態(tài)圖層增加文字標(biāo)注。

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

//設(shè)置標(biāo)注
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.更改原地圖服務(wù)中圖層的渲染方法

動態(tài)圖層的功能不僅支持更新新添加的動態(tài)圖層的渲染方法，也支持更改原地圖服務(wù)中圖層的渲染方法，還可以設(shè)置圖層的標(biāo)注。支持的渲染方法包括：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;
    //設(shè)置標(biāo)注，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.分級渲染方法

注意：測試中發(fā)現(xiàn)不支持PictureMarkerSymbol和SVG圖標(biāo)的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