arcgis js（六）设置不透明度

1、在上一章节我们已经能够自由切换天地图底图了，这一节继续接着上节的代码往里面添加新功能，我们知道，在地图学中地图是可以不断叠加的，即使像天地图这么庞大的地图显示也是由不同的图层叠加现实的，当然它用的是瓦片形式，比如影像地图上面叠加影像注记，就得到了我们看到的这种形式，包括在上面进行的点、线、面等绘图功能，都是一层一层的图层，既然是图层就会发生覆盖，我们经常会对比上面和下面的图层，一种方式是采用swipe卷帘工具，但是它不能看到叠加的情况，一般我们都是设置最上面一层的图层的不透明度来实现上下层的对比。

2、在英文中opacity是不透明度的意思，在arcgis js中opacity的取值范围是[0,1]，0代表完全透明，1代表完全不透明。

3、在地图上加载其他图层的方式也比较简单，这里采用url的形式，我是在arcgis server上发布数据，可以发布在本地，也可以是服务器上的，没有服务器的小伙伴用本机的arcgis发布一个本地服务即可。如何安装arcgis server、如何发布arcgis服务请在网上查找资料，实在搞不定的可以留言给我。需要注意的是发布的服务图层和底图应在同一个坐标系。

4、假设提取了某地的图斑信息，发布为arcgis服务，用esri/widgets/LayerList将需要做的操作放置到列表当中，这里的功能主要有"全局显示"、"图层信息"、"增加不透明度"、"减少不透明度"，具体代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS API for JavaScript</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.20/"></script>

    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    <script>
        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/layers/WebTileLayer",
            "esri/layers/MapImageLayer",
            "esri/widgets/LayerList",
            "esri/widgets/BasemapLayerList",
            "esri/widgets/Expand",
            "esri/geometry/SpatialReference",
            "esri/geometry/Point",
            "esri/layers/support/TileInfo",
        ],
            function (esriConfig, Map, MapView, FeatureLayer, WebTileLayer, MapImageLayer,
                LayerList, BasemapLayerList, Expand,
                SpatialReference, Point, TileInfo) {
                var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
                var token = ""; //天地图token，在官网申请
                var tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "origin": {
                        "x": -180,
                        "y": 90
                    },
                    "spatialReference": {
                        "wkid": 4490
                    },
                    "lods": [
                        { "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
                        { "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
                        { "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
                        { "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
                        { "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
                        { "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
                        { "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
                        { "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
                        { "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
                        { "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
                        { "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
                        { "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
                        { "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
                        { "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
                        { "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
                        { "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
                        { "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
                        { "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
                        { "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
                    ]
                });

                //影像地图
                var tdtImageLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图影像地图",
                    visible: true
                });

                //影像注记
                var tdtAnnoImageLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图影像注记",
                    visible: true
                });

                //矢量地图
                var tdtVecLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图矢量地图",
                    visible: false
                });

                //矢量注记
                var tdtAnnoVecLayer = new WebTileLayer({
                    urlTemplate: tiandituBaseUrl + "/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=" + token,
                    subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    tileInfo: tileInfo,
                    spatialReference: { wkid: 4490 },
                    title: "天地图矢量注记",
                    visible: false
                });

                const map = new Map({
                    basemap: {
                        baseLayers: [tdtImageLayer, tdtAnnoImageLayer, tdtVecLayer, tdtAnnoVecLayer]
                    }

                });

                //定位到济南市中心
                var cityCenter = new Point(116.985, 36.671, new SpatialReference({ wkid: 4490 }));
                const view = new MapView({
                    map: map,
                    center: cityCenter,
                    zoom: 13,
                    container: "viewDiv",
                    ui: {
                        components: ["zoom", "compass"]
                    },
                });

                let basemapLayerList = new BasemapLayerList({
                    view: view,

                });

                var layerListExpand = new Expand({
                    expandIconClass: "esri-icon-layer-list",
                    view: view,
                    content: basemapLayerList
                });
                view.ui.add(layerListExpand, "top-right");

                const featureLayer = new FeatureLayer({
                    url: "http://localhost:6080/arcgis/rest/services/XC/xcgengdibianhua/MapServer",
                    title: "变化图斑"
                });
                map.add(featureLayer);

                function defineActions(event) {
                    var item = event.item;
                    if (item.title === "变化图斑") {
                        item.actionsSections = [
                            [
                                {
                                    title: "全局显示",
                                    className: "esri-icon-zoom-out-fixed",
                                    id: "full-extent"
                                },
                                {
                                    title: "图层信息",
                                    className: "esri-icon-description",
                                    id: "information"
                                }
                            ],
                            [
                                {
                                    title: "减少透明度",
                                    className: "esri-icon-up",
                                    id: "increase-opacity"
                                },
                                {
                                    title: "增加透明度",
                                    className: "esri-icon-down",
                                    id: "decrease-opacity"
                                }
                            ]
                        ];
                    }
                }

                view.when(function () {
                    var layerList = new LayerList({
                        view: view,
                        listItemCreatedFunction: defineActions
                    });

                    layerList.on("trigger-action", function (event) {
                        var visibleLayer = featureLayer;
                        var id = event.action.id;

                        if (id === "full-extent") {
                            view.goTo(visibleLayer.fullExtent).catch(function (error) {
                                if (error.name != "AbortError") {
                                    console.error(error);
                                    alert(error);
                                }
                            });
                        } else if (id === "information") {
                            window.open(visibleLayer.url);
                        } else if (id === "increase-opacity") {
                            if (visibleLayer.opacity < 1) {
                                visibleLayer.opacity += 0.2;
                            }
                        } else if (id === "decrease-opacity") {
                            if (visibleLayer.opacity > 0) {
                                visibleLayer.opacity -= 0.2;
                            }
                        }
                    });
                    view.ui.add(layerList, "top-right");
                });


            });


    </script>


</head>

<body>

    <div id="viewDiv"></div>

</body>

</html>

5、代码说明：首先用FeatureLayer实例化一个对象用来加载服务数据，将url和title作为参数放到构造函数中，定义layerList传入列表对象，列表对象用一个列表对象函数defineActions创建，在该函数里面定义item，每个item都有三个属性：title、className、id，title负责显示在web端，id用于判断点击的是哪个item，这些事件会在"trigger-action"中触发，来执行具体的操作，效果如下：