arcgis js 4.18新体验：阴影滤镜图层_arcgis js effect 地图伪3d地图-CSDN博客

arcgis api for javascript 4.18发布，其所有图层添加了effect属性，类似前端css的filter滤镜属性。结合之前经验，利用该新滤镜效果可实现伪3D效果。本文展示了arcgis js 4.18阴影滤镜图层效果，并给出完整代码，相关资源已打包上传。

前言：

arcgis api for javascript 4.18 又双叕出了，感叹 esri 开发团队高产的同时，又不得不怀疑自己能否追的上技术更新换代的速度。唯有变被动为主动，不断的提高自己，才能跟上时代的发展啊。

之前试验过3D，效果是这样的：

亦或者是伪3D的二维地图效果：

正文：

简单的了解了一下下，4.18所有的图层都添加了一个effect 这样一个属性，就是图层添加一个类似于前端css的filter 的滤镜属性，可以实现滤镜的效果

结合之前的经验，现在用这个新的滤镜效果的话，也可以直接实现伪3D效果

话不多说，老规矩先看下今天实现的效果：

arcgis js 4.18新体验：阴影滤镜图层

直接上今天代码吧（是完整的代码哦），里面用到的技术是蒙版效果与滤镜属性相结合；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css"/>

    <title>滤镜示例</title>
    <style>
        html, body, #mapContent {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="mapContent"></div>
</div>
</body>
<script src="https://js.arcgis.com/4.18/"></script>
<script>
    require([
        'esri/config',
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/GeoJSONLayer",
        "esri/layers/GraphicsLayer",
        "esri/layers/TileLayer",
        "esri/layers/GroupLayer",
        "esri/Graphic",
    ], function (esriConfig, Map, MapView, GeoJSONLayer, GraphicsLayer, TileLayer, GroupLayer, Graphic
    ) {

        const worldImagery = new TileLayer({
            portalItem: {
                id: "10df2279f9684e4a9f6a7f08febac2a9"
            },
            popupEnabled: false,
        });
        worldImagery.when(() => {
            worldImagery.sublayers.forEach((layer) => {
                if (layer.popupEnabled === true) {
                    layer.popupEnabled = false;
                }
            });
        });

        const tileLayer = new TileLayer({
            portalItem: {
                id: "10df2279f9684e4a9f6a7f08febac2a9"
            },
            popupEnabled: false
        });
        tileLayer.when(() => {
            tileLayer.sublayers.forEach((layer) => {
                if (layer.popupEnabled === true) {
                    layer.popupEnabled = false
                }
            });
        });

        const ahsLayer = new GeoJSONLayer({
            url: './json/geo_ah_shi.json',
            labelingInfo: {
                labelExpressionInfo: {expression: "$feature.SHI_MC"},
                symbol: {
                    type: "text",
                    color: [255, 255, 255, 1],
                    font: {  // autocasts as new Font()
                        size: 12,
                        weight: "bold"
                    }
                }
            },
            id: "ahsLayer",
            popupEnabled: false,
            renderer: {
                type: 'simple',
                symbol: {
                    type: "simple-fill",
                    color: [255, 0, 0, 0],
                    outline: {
                        color: [128,128,128, 0.7],
                        width: "2px"
                    }
                }
            },
        });
        const ahsLayerIn = new GeoJSONLayer({
            url: './json/geo_ah_shi.json',
            id: "ahsLayerIn",
            popupEnabled: false,
            renderer: {
                type: 'simple',
                symbol: {
                    type: "simple-fill",
                    color: [255, 0, 0, 0],
                    outline: {
                        color: [0,255,255, 0.7],
                        width: "2px"
                    }
                }
            },
        });
        const graphicsLayer = new GraphicsLayer({
            blendMode: "destination-in",
            title: "layer"
        });

        const groupLayer = new GroupLayer({
            layers: [
                tileLayer,
                ahsLayerIn,
                graphicsLayer
            ],
            opacity: 0
        });

        const map = new Map({
            layers: [worldImagery,ahsLayer,groupLayer]
        });


        var view = new MapView({
            container: "mapContent",
            map: map,
            center: [117.190322, 31.896501],
            zoom: 7,
            constraints: {
                snapToZoom: false,
                minScale: 147914381
            }
        });

        async function highlightCity(query) {
            let symbol = {
                type: "simple-fill",
                color: [0, 0, 0, 1],
                outline: null
            };
            let {features: [feature]} = await ahsLayer.queryFeatures(query);
            graphicsLayer.removeAll();
            if (feature) {
                let gra = feature.clone();
                graphicsLayer.add(gra);
                gra.symbol = symbol;
                view.goTo(feature.geometry.extent.expand(2),{
                    duration:1000
                });
                worldImagery.effect= "blur(8px) grayscale(0.8)";
                groupLayer.effect = "brightness(1.5) drop-shadow(16px, 16px, 16px)";
                groupLayer.opacity = 1;
            }else{
                worldImagery.effect= null;
                groupLayer.effect = null;
                groupLayer.opacity = 0;
            }
        };

        view.on('click', async (evt) => {
            let query = {
                geometry: view.toMap(evt),
                returnGeometry: true,
                outFields: ["*"]
            }
            highlightCity(query)
        })
    })
</script>
</html>

用的的json和源码都打包上传资源了

地址：https://download.csdn.net/download/KK_bluebule/13722282