高德地图

使用高德地图

注册账号并申请Key

  • 首先，注册开发者账号，成为高德开放平台开发者
  • 登陆之后，在进入「应用管理」 页面「创建新应用」
  • 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

引入 L7

2.0版本在L7内部动态引入了高德地图JS API，因此不再需要单独引入高德JS API，只需设置 type 为 amap 并且传入token

  1. <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0/dist/l7.js"></script>

添加div 标签指定地图容器

同时需要为Div设置 高度和宽度

  1. <div id="map"></div>

初始化 L7 Scene

  1. const scene = new L7.Scene({
  2.   id: 'map',
  3.   map: new L7.GaodeMap({
  4.     style: 'dark', // 样式URL
  5.     center: [120.19382669582967, 30.258134],
  6.     pitch: 0,
  7.     zoom: 12,
  8.     token: '高德地图token',
  9.   }),
  10. });

这样我们就完成了通过L7 实例化高德地图

添加可视化图层

  • 首先我们需要获取数据，获取数据方法，这里我们获取在线的json数据
  • 然后我们就可以初始一个Layer，并添加到Scene就完成了图层的添加。
  1. fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
  2.   .then(res => res.json())
  3.   .then(data => {
  4.     const pointLayer = new L7.PointLayer({})
  5.       .source(data.list, {
  6.         parser: {
  7.           type: 'json',
  8.           x: 'j',
  9.           y: 'w',
  10.         },
  11.       })
  12.       .shape('cylinder')
  13.       .size('t', function(level) {
  14.         return [1, 2, level * 2 + 20];
  15.       })
  16.       .color('t', [
  17.         '#094D4A',
  18.         '#146968',
  19.         '#1D7F7E',
  20.         '#289899',
  21.         '#34B6B7',
  22.         '#4AC5AF',
  23.         '#5FD3A6',
  24.         '#7BE39E',
  25.         '#A1EDB8',
  26.         '#CEF8D6',
  27.       ])
  28.       .style({
  29.         opacity: 1.0,
  30.       });
  31.     scene.addLayer(pointLayer);
  32.   });

完整demo代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>创建地图场景</title>
  6.     <style>
  7.        html,body{overflow:hidden;margin:0;}
  8.         #map { position:absolute; top:0; bottom:0; width:100%; }
  9.     </style>
  10. </head>
  11. <body>
  12. <div id="map"></div>
  13. <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0/dist/l7.js"></script>
  14. <script>
  16.   const scene = new L7.Scene({
  17.     id: 'map',
  18.     map: new L7.GaodeMap({
  19.       style: 'dark', // 样式URL
  20.       center: [120.19382669582967, 30.258134],
  21.       pitch: 0,
  22.       zoom: 12,
  23.       token: '高德地图token',
  24.     }),
  25.   });
  27. fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
  28.   .then(res => res.json())
  29.   .then(data => {
  30.     const pointLayer = new L7.PointLayer({})
  31.       .source(data.list, {
  32.         parser: {
  33.           type: 'json',
  34.           x: 'j',
  35.           y: 'w'
  36.         }
  37.       })
  38.       .shape('cylinder')
  39.       .size('t', function(level) {
  40.         return [ 1, 2, level * 2 + 20 ];
  41.       })
  42.       .color('t', [
  43.         '#094D4A',
  44.         '#146968',
  45.         '#1D7F7E',
  46.         '#289899',
  47.         '#34B6B7',
  48.         '#4AC5AF',
  49.         '#5FD3A6',
  50.         '#7BE39E',
  51.         '#A1EDB8',
  52.         '#CEF8D6'
  53.       ])
  54.       .style({
  55.         opacity: 1.0
  56.       });
  57.     scene.addLayer(pointLayer);
  58.   });
  60. </script>
  61. </body>
  62. </html>