css旋转底座与 arcgis for js地图应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33982898/article/details/145303290

效果图

在这里插入图片描述

实现

基础效果

代码是html形式, 复制后直接运行即可

椭圆图形需要将圆形按X轴旋转

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css旋转底座</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: #000;
      }
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background: linear-gradient(135deg, rgba(16, 101, 91, 1) 0%, rgba(16, 101, 91, 0.2) 100%);
      }

      @keyframes chassisRotate1 {
        0% {
          transform: translateX(-50%) rotateX(75deg) rotateZ(0deg);
        }
        100% {
          transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
        }
      }

      @keyframes chassisRotate2 {
        0% {
          transform: translateX(-50%) rotateX(74deg) rotateZ(360deg);
        }
        100% {
          transform: translateX(-50%) rotateX(74deg) rotateZ(0deg);
        }
      }

      @keyframes chassisRotate3 {
        0% {
          transform: translateX(-50%) rotateX(73deg) rotateZ(0deg);
        }
        100% {
          transform: translateX(-50%) rotateX(73deg) rotateZ(360deg);
        }
      }

      @keyframes chassisRotate4 {
        0% {
          transform: translateX(-50%) rotateX(72deg) rotateZ(360deg);
        }
        100% {
          transform: translateX(-50%) rotateX(72deg) rotateZ(0deg);
        }
      }

      @keyframes chassisRotate5 {
        0% {
          transform: translateX(-50%) rotateX(73.9deg) rotateZ(0deg);
        }
        100% {
          transform: translateX(-50%) rotateX(73.9deg) rotateZ(360deg);
        }
      }

      .chassis {
        position: absolute;
        bottom: 130px;
        left: 50%;
        transform: translateX(-50%);
      }
      .chassis > div {
        position: absolute;
        left: 50%;
        border-radius: 50%;
      }

      .circle1 {
        bottom: -96px;
        width: 355px;
        height: 355px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(16, 101, 91, 1) 0%, rgba(16, 101, 91, 0.2) 100%);
        border: 5px solid rgba(16, 101, 91, 1);
        transform: translateX(-50%) rotateX(75deg);
        box-shadow: 0 0 50px 10px rgba(16, 101, 91, 1);
        animation: chassisRotate1 3s linear infinite forwards;
      }

      .circle2 {
        bottom: -141px;
        width: 420px;
        height: 420px;
        border: 8px dashed rgba(16, 101, 91, 1);
        transform: translateX(-50%) rotateX(74deg);
        animation: chassisRotate2 30s linear infinite forwards;
      }

      .circle3 {
        bottom: -183px;
        width: 480px;
        height: 480px;
        border: 8px dotted rgba(16, 101, 91, 1);
        transform: translateX(-50%) rotateX(73deg);
        animation: chassisRotate3 22s linear infinite forwards;
      }

      .circle4 {
        bottom: -226px;
        width: 540px;
        height: 540px;
        border: 10px solid rgba(16, 101, 91, 1);
        border-left-width: 0.5px;
        border-right-width: 0.5px;
        transform: translateX(-50%) rotateX(72deg);
        animation: chassisRotate4 10s linear infinite forwards;
      }

      .circle5 {
        bottom: -257px;
        width: 600px;
        height: 600px;
        border: 2px solid rgba(16, 101, 91, 0.5);
        transform: translateX(-50%) rotateX(73.9deg);
        box-shadow: 0 0 20px 10px inset rgba(16, 101, 91, 0.3);
        animation: chassisRotate5 10s linear infinite forwards;
      }
    </style>
  </head>
  <body>
    <div class="chassis">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
      <div class="circle5"></div>
    </div>
  </body>
</html>

叠加地图效果

如果地图加载很慢或加载不出来
1、turf工具包下载慢，可以打开VPN代理
2、天地图token切换成自己的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css旋转底座</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: #000;
      }
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background: linear-gradient(135deg, rgba(16, 101, 91, 1) 0%, rgba(16, 101, 91, 0.2) 100%);
      }

      @keyframes chassisRotate1 {
        0% {
          transform: translateX(-50%) rotateX(75deg) rotateZ(0deg);
        }
        100% {
          transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
        }
      }

      @keyframes chassisRotate2 {
        0% {
          transform: translateX(-50%) rotateX(74deg) rotateZ(360deg);
        }
        100% {
          transform: translateX(-50%) rotateX(74deg) rotateZ(0deg);
        }
      }

      @keyframes chassisRotate3 {
        0% {
          transform: translateX(-50%) rotateX(73deg) rotateZ(0deg);
        }
        100% {
          transform: translateX(-50%) rotateX(73deg) rotateZ(360deg);
        }
      }

      @keyframes chassisRotate4 {
        0% {
          transform: translateX(-50%) rotateX(72deg) rotateZ(360deg);
        }
        100% {
          transform: translateX(-50%) rotateX(72deg) rotateZ(0deg);
        }
      }

      @keyframes chassisRotate5 {
        0% {
          transform: translateX(-50%) rotateX(73.9deg) rotateZ(0deg);
        }
        100% {
          transform: translateX(-50%) rotateX(73.9deg) rotateZ(360deg);
        }
      }

      .chassis {
        position: absolute;
        bottom: 130px;
        left: 50%;
        transform: translateX(-50%);
      }
      .chassis > div {
        position: absolute;
        left: 50%;
        border-radius: 50%;
      }

      .circle1 {
        bottom: -96px;
        width: 355px;
        height: 355px;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(16, 101, 91, 1) 0%, rgba(16, 101, 91, 0.2) 100%);
        border: 5px solid rgba(16, 101, 91, 1);
        transform: translateX(-50%) rotateX(75deg);
        box-shadow: 0 0 50px 10px rgba(16, 101, 91, 1);
        animation: chassisRotate1 3s linear infinite forwards;
      }

      .circle2 {
        bottom: -141px;
        width: 420px;
        height: 420px;
        border: 8px dashed rgba(16, 101, 91, 1);
        transform: translateX(-50%) rotateX(74deg);
        animation: chassisRotate2 30s linear infinite forwards;
      }

      .circle3 {
        bottom: -183px;
        width: 480px;
        height: 480px;
        border: 8px dotted rgba(16, 101, 91, 1);
        transform: translateX(-50%) rotateX(73deg);
        animation: chassisRotate3 22s linear infinite forwards;
      }

      .circle4 {
        bottom: -226px;
        width: 540px;
        height: 540px;
        border: 10px solid rgba(16, 101, 91, 1);
        border-left-width: 0.5px;
        border-right-width: 0.5px;
        transform: translateX(-50%) rotateX(72deg);
        animation: chassisRotate4 10s linear infinite forwards;
      }

      .circle5 {
        bottom: -257px;
        width: 600px;
        height: 600px;
        border: 2px solid rgba(16, 101, 91, 0.5);
        transform: translateX(-50%) rotateX(73.9deg);
        box-shadow: 0 0 20px 10px inset rgba(16, 101, 91, 0.3);
        animation: chassisRotate5 10s linear infinite forwards;
      }

      #mapView {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>

    <!-- <script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
    <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 class="chassis">
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="circle4"></div>
      <div class="circle5"></div>
    </div>

    <!-- 地图容器 -->
    <div id="mapView"></div>

    <script>
      require([
        'esri/Map',
        'esri/views/MapView',
        'esri/Basemap',
        'esri/layers/WebTileLayer',
        'esri/layers/GroupLayer',
        'esri/layers/GeoJSONLayer',
        'esri/layers/GraphicsLayer',
        'esri/Graphic'
      ], function (
        Map,
        MapView,
        Basemap,
        WebTileLayer,
        GroupLayer,
        GeoJSONLayer,
        GraphicsLayer,
        Graphic
      ) {
        var tiandituBaseUrl = 'http://{subDomain}.tianditu.gov.cn' // 天地图服务地址
        var token = 'b5a612fc171599a0f5c51aa03efd4948' // 我个人的天地图token, 地图加载不出来的话就换成自己的

        // 天地图底图
        var imgLayer = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl + '/DataServer?T=img_w/wmts&x={col}&y={row}&l={level}&tk=' + token,
          subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
          copyright: '天地图影像图'
        })
        var ciaLayer = new WebTileLayer({
          urlTemplate:
            tiandituBaseUrl +
            '/DataServer?T=cia_w?T=vec_c/wmts&x={col}&y={row}&l={level}&tk=' +
            token,
          subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
          copyright: '天地图影像注记'
        })
        var vecBasemap = new Basemap({
          baseLayers: [imgLayer, ciaLayer],
          title: '影像图',
          id: 'img_w',
          thumbnailUrl:
            'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/0/0/0'
        })

        // 初始化底图
        const map = new Map({
          basemap: vecBasemap // 指定一个底图
          // basemap: 'dark-gray-vector'
        })

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

        // 添加点击
        view.on('click', function (e) {
          console.log('>>> 点击的坐标: ')
          console.log(`${e.mapPoint.longitude}, ${e.mapPoint.latitude}`)
        })

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

          // 边界线
          const boundaryLineLayer = new GeoJSONLayer({
            url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',
            // effect: 'brightness(1) drop-shadow(0, 10px, 10px, rgba(0,0,0,1))',
            outFields: ['*'],
            renderer: {
              type: 'simple',
              symbol: {
                type: 'simple-line',
                // color: 'rgba(1,174,254,1)',
                color: '#B1E4B1',
                width: 2
              }
            }
          })

          boundaryLineLayer.queryFeatures().then(res => {
            const line = res.features[0]
            const rings = line.geometry.rings

            // 装扩展边界的图形图层
            const extendLayer = new GraphicsLayer({ title: '扩展边界图层' })
            map.add(extendLayer)

            const colors = ['#106B5A', '#118971', '#0CAE8A', '#15C99E']
            // const colors = ['red', 'blue', 'pink', 'orange']
            for (let i = 0; i <= 3; i++) {
              const poly = turf.polygon(rings) // 转为turf多边形

              // 向下平移的距离, 循环生成的多个图形必须是从下至上的顺序
              let distance = -8 + 2 * i

              const translatedPoly = turf.transformTranslate(poly, distance, 350)

              const graphic = new Graphic({
                geometry: {
                  type: 'polygon',
                  rings: translatedPoly.geometry.coordinates[0]
                },
                symbol: {
                  type: 'simple-fill',
                  color: colors[i],
                  outline: {
                    width: 0,
                    color: '#7BD6F4'
                  }
                }
              })
              extendLayer.add(graphic)
            }

            // 天地图蒙层
            const maskLayer = new GroupLayer({
              layers: [
                imgLayer,
                ciaLayer,
                new GeoJSONLayer({
                  url: 'https://geo.datav.aliyun.com/areas_v3/bound/510100.json',
                  blendMode: 'destination-in',
                  outFields: ['*'],
                  renderer: {
                    type: 'simple',
                    symbol: {
                      type: 'simple-fill',
                      color: [227, 139, 79, 1],
                      outline: {
                        color: [0, 122, 204, 0.8],
                        width: 2
                      }
                    }
                  }
                })
              ]
            })

            // 边界线和蒙层图层最后加载
            map.add(maskLayer)
            map.add(boundaryLineLayer)
          })
        })
      })
    </script>
  </body>
</html>