全国交通事故增长率

源代码编辑器
<!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>3D热力—全国交通健康指数热度</h1>
        <h3>热力全国各城市的交通健康指数</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', {
          zooms: [4, 7],
          zoom: 4.75,
          center: [102.618687,31.790976],
          showLabel: false,
          viewMode: '3D',
          mapStyle: 'amap://styles/45311ae996a8bea0da10ad5151f72979',
          pitch: 40,
      });

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

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

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

      heatmap.setSource(geo, {
          radius: 200000,
          unit: 'meter',
          height: 500000,
          //radius: 35,
          //unit: 'px',
          //height: 100,
          gradient: {
              0.1: '#2A85B8',
              0.2: '#16B0A9',
              0.3: '#29CF6F',
              0.4: '#5CE182',
              0.5: '#7DF675',
              0.6: '#FFF100',
              0.7: '#FAA53F',
              1: '#D04343',
          },
          value: function (index, feature) {
              return feature.properties.avg;
              var value = feature.properties.mom.slice(0, -1);
              return value + 10 * Math.random();
          },
          // min: -100,
          // max: 100,
          heightBezier: [0, .53, .37, .98],
      });
      loca.add(heatmap);

      map.on('complete', function () {
          heatmap.addAnimate({
              key: 'height',
              value: [0, 1],
              duration: 2000,
              easing: 'BackOut',
              // yoyo: true,
              // repeat: 2,
          });
          heatmap.addAnimate({
              key: 'radius',
              value: [0, 1],
              duration: 2000,
              easing: 'BackOut',
              // 开启随机动画
              transform: 1000,
              random: true,
              delay: 5000,
          });
      });
	  map.on('click', function (e) {
          var feat = heatmap.queryFeature(e.pixel.toArray());
          if(feat){
            map.clearMap();
            map.add(new AMap.Marker({
			  position:feat.lnglat,
              anchor: 'bottom-center',
              content: '<div style="margin-bottom: 15px; border:1px solid #fff; border-radius: 4px;color: #fff; width: 150px; text-align: center;">热力值: '+ feat.value.toFixed(2) +'</div>'
            }));
          }
      });
    </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服公众号
二维码