arcgis for js实现阴影立体效果

news2024/9/27 5:05:06

效果

在这里插入图片描述

实现

主要通过effect属性实现

代码: (这里以GeoJSON图层为例, 代码复制即可用)

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Yang的案例</title>

    <style>
      body {
        margin: 0;
      }
      #mapview {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #fff;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.23/"></script>
  </head>
  <body>
    <div id="mapview"></div>

    <script>
      require([
        'esri/Map',
        'esri/views/MapView',
        'esri/Basemap',
        'esri/layers/WebTileLayer',
        'esri/layers/GroupLayer',
        'esri/layers/GeoJSONLayer',
        'esri/layers/VectorTileLayer'
      ], function (Map, MapView, Basemap, WebTileLayer, GroupLayer, GeoJSONLayer) {
        // 初始化底图
        window.map = new Map({
          basemap: 'hybrid'
        })

        // 创建2维视图
        let view = new MapView({
          container: 'mapview',
          map: map,
          zoom: 13, // 初始化级别
          center: [103.97992123657217, 30.680738016500914] // 初始化中心点坐标
        })

        view.when(() => {
          // 去除原本底图
          map.basemap = null

          // 使用geojson实现
          const boundaryLineLayer = new GeoJSONLayer({
            url: 'https://geo.datav.aliyun.com/areas_v3/bound/510105.json',
            effect: 'drop-shadow(0, 8px, 3px, rgba(0,0,0,1))',
            // effect: 'brightness(150%) drop-shadow(20px, 20px, 10px, #000)',
            outFields: ['*'],
            renderer: {
              type: 'simple',
              symbol: {
                type: 'simple-line',
                color: '#000',
                width: 1
              }
            }
          })
          map.add(boundaryLineLayer)
        })
      })
    </script>
  </body>
</html>

effect值说明

关键字	说明	示例
brightness	亮度	1.5
drop-shadow	阴影	50px, 40px, 20px, #000
blur	滤镜/模糊度	4px
grayscale	灰度	2
hue-rotate	色调翻转	120deg
contrast	对比度	200%
bloom	?
invert	?
opacity	透明度	50%
saturate	饱和度	150%
sepia	?	50%