炫码科技-高德地图 LOCA 数据可视化 API 2.0——杭州高峰期路口延误

炫码科技-高德地图 LOCA 数据可视化 API 2.0——杭州高峰期路口延误

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>杭州高峰期路口延误指数评级</title>
  <style>
    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
        
    .demo-title {
      position: absolute;
      top: 25px;
      left: 25px;
      z-index: 1;
    }

    h1 {
      font-size: 18px;
      margin: 0;
      color: rgb(180, 180, 190);
    }

    h3 {
      font-size: 12px;
      font-weight: normal;
      margin-top: 5px;
      color: rgb(150,150,150);
    }
  </style>
</head>

<body>
  <div class="demo-title">
    <h1>蜂窝图--杭州高峰期路口延误指数评级</h1>
    <h3>蜂窝柱状高度及颜色映射路口的延误指数,其中EF等级是拥堵较严重路口 </h3>
  </div>
  <div id="map"></div>

  <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
  <script src="https://webapi.amap.com/loca?v=2.0.0&key=您申请的key值"></script>
  <script>
    var map = new AMap.Map('map', {
        zoom: 11.43,
        center: [120.2446746826172, 30.199146446037616],
        pitch: 55,
        rotation: 20,
        // showLabel: true,
        viewMode: '3D',
        mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
    });

    var loca = new Loca.Container({
        map,
    });

    loca.ambLight = {
        intensity: 0.4,
        color: '#ced5ed',
    };
    loca.dirLight = {
        intensity: 0.02,
        color: '#666',
        target: [10, 10, 10],
        position: [0, -1, 0.1],
    };
    loca.pointLight = {
        color: 'rgb(155,173,80)',
        position: [120.14133, 30.246611, 20000],
        intensity: 2.2,
        // 距离表示从光源到光照强度为 0 的位置,0 就是光不会消失。
        distance: 40000,
    };

    var geo = new Loca.GeoJSONSource({
        url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/hz_road_level.json',
    });

    var ll = new Loca.HexagonLayer({
        // loca,
        zIndex: 10,
        opacity: 1,
        visible: true,
        zooms: [2, 22],
        acceptLight: true,
    });

    var colors = ['#F4FFB3', '#BFDDA8', '#96CA8D', '#75BA89', '#5EAC86', '#4D9A96', '#3F748F', '#1D3748'].reverse();
    var heights = [100, 200, 300, 900, 1000, 1200, 1500, 3000];
    ll.setSource(geo);

    // 计算路口rank之和
    function sum(arr) {
        var sum = 0;
        arr.forEach(a => {
            sum += a.properties.rank;
        });
        return sum;
    }

    ll.setStyle({
        unit: 'meter',
        radius: 120,
        gap: 0,
        altitude: 0,
        height: function (index, feature) {
            var ranks = sum(feature.coordinates);
            // return ranks < 60 ? heights[2] : heights[6];
            return ranks < 20 ?
                heights[0] : ranks < 40 ?
                    heights[1] : ranks < 60 ?
                        heights[2] : ranks < 80 ?
                            heights[3] : ranks < 100 ?
                                heights[4] : ranks < 120 ?
                                    heights[5] : ranks < 130 ?
                                        heights[6] : heights[7];
        },
        topColor: function (index, feature) {
            var ranks = sum(feature.coordinates);
            // return ranks < 60 ? colors[1] : colors[6];
            return ranks < 20 ?
                colors[0] : ranks < 40 ?
                    colors[1] : ranks < 60 ?
                        colors[2] : ranks < 80 ?
                            colors[3] : ranks < 100 ?
                                colors[4] : ranks < 120 ?
                                    colors[5] : ranks < 130 ?
                                        colors[6] : colors[7];
        },
        sideBottomColor: function (index, feature) {
            var ranks = sum(feature.coordinates);
            // return ranks < 60 ? colors[1] : colors[6];
            return ranks < 20 ?
                colors[0] : ranks < 40 ?
                    colors[1] : ranks < 60 ?
                        colors[2] : ranks < 80 ?
                            colors[3] : ranks < 100 ?
                                colors[4] : ranks < 120 ?
                                    colors[5] : ranks < 130 ?
                                        colors[6] : colors[7];
        },
        sideTopColor: function (index, feature) {
            var ranks = sum(feature.coordinates);
            // return ranks < 60 ? colors[1] : colors[6];
            return ranks < 20 ?
                colors[0] : ranks < 40 ?
                    colors[1] : ranks < 60 ?
                        colors[2] : ranks < 80 ?
                            colors[3] : ranks < 100 ?
                                colors[4] : ranks < 120 ?
                                    colors[5] : ranks < 130 ?
                                        colors[6] : colors[7];
        }
    })
    loca.add(ll);
    // 高度升起动画
    map.on('complete', function () {
      setTimeout(function () {
        ll.show(500);
        ll.addAnimate({
          key: 'height',
          value: [0, 1],
          duration: 500,
          easing: 'Linear',
          transform: 500,
          random: true,
          delay: 10000,
        });
      }, 800);
    });
    loca.animate.start();

    // 图例
    var lengend = new Loca.Legend({
        loca: loca,
        title: {
            label: '延误指数',
            fontColor: 'rgba(255,255,255,0.4)',
            fontSize: '16px'
        },
        style: {
            backgroundColor: 'rgba(255,255,255,0.1)',
            left: '20px',
            bottom: '40px',
            fontSize: '12px'
        },
        dataMap: [
            { label: '> 130', color: colors[7] },
            { label: '< 130', color: colors[6] },
            { label: '< 120', color: colors[5] },
            { label: '< 100', color: colors[4] },
            { label: '< 80', color: colors[3] },
            { label: '< 60', color: colors[2] },
            { label: '< 40', color: colors[1] },
            { label: '< 20', color: colors[0] },
        ],
    });

    var dat = new Loca.Dat();
    dat.addLight(loca.ambLight, loca, '环境光');
    dat.addLight(loca.dirLight, loca, '平行光');
    dat.addLight(loca.pointLight, loca, '点光');
  </script>
</body>

</html>
5 1 投票
文章评分
订阅评论
提醒
0 评论
最旧
最新 最多投票
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x