L7 | web

# L7

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建地图场景</title>
    <style>
       html,body{overflow:hidden;margin:0;}
    	#map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/@antv/l7"></script>
<script>

  const scene = new L7.Scene({
    id: 'map',
    map: new L7.GaodeMap({
      style: 'dark', // 样式URL
      center: [120.19382669582967, 30.258134],
      pitch: 0,
      zoom: 6,
      token: '***',
    }),
  });

  scene.on('loaded', () => {
    fetch(
      'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'
    )
      .then(res => res.json())
      .then(data => {
        data.features = data.features.filter(item => {
          return item.properties.capacity > 800;
        });
        const pointLayer = new L7.PointLayer({})
          .source(data)
          .shape('circle')
          .size('capacity', [ 0, 16 ])
          .color('capacity', [
            '#34B6B7',
            '#4AC5AF',
            '#5FD3A6',
            '#7BE39E',
            '#A1EDB8',
            '#CEF8D6'
          ])
          .active(true)
          .style({
            opacity: 0.5,
            strokeWidth: 0
          });

        scene.addLayer(pointLayer);
      });
  });

</script>
</body>
</html>

1.引入 js 库
2.编写渲染容器 DOM
3.初始化地图对象 L7.Scene
4.请求数据
5.数据清洗
6.初始化绘图对象（如：L7.PointLayer）
7.调用 L7.Scene.addLayer 方法绘图

← G2 echarts与地图 →