MapBox地图

使用Mapbox 地图

1、注册MapBox token

注册地址 Mapbox Access Tokens

2、引入mapbox.gl JS 和 css

使用mapbox 需要单独引入 mapbox

  1.   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
  3.   <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>

引入 L7

  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.Mapbox({
  4.     style: 'dark', // 样式URL
  5.     center: [120.19382669582967, 30.258134],
  6.     pitch: 0,
  7.     zoom: 12,
  8.     token: 'mapbox token',
  9.   }),
  10. });

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

添加可视化图层

  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> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}
  7.         #map { position:absolute; top:0; bottom:0; width:100%; }
  8.     </style>
  9. </head>
  10. <body>
  11. <div id="map"></div>
  12.   <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
  14.   <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
  15. <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-2.0.0/dist/l7.js"></script>
  16. <script>
  17.   const scene = new L7.Scene({
  18.     id: 'map',
  19.     map: new L7.Mapbox({
  20.       style: 'dark', // 样式URL
  21.       center: [120.19382669582967, 30.258134],
  22.       pitch: 0,
  23.       zoom: 12,
  24.       token: 'mapbox token',
  25.     }),
  26.   });
  28. fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
  29.   .then(res => res.json())
  30.   .then(data => {
  31.     const pointLayer = new L7.PointLayer({})
  32.       .source(data.list, {
  33.         parser: {
  34.           type: 'json',
  35.           x: 'j',
  36.           y: 'w'
  37.         }
  38.       })
  39.       .shape('cylinder')
  40.       .size('t', function(level) {
  41.         return [ 1, 2, level * 2 + 20 ];
  42.       })
  43.       .color('t', [
  44.         '#094D4A',
  45.         '#146968',
  46.         '#1D7F7E',
  47.         '#289899',
  48.         '#34B6B7',
  49.         '#4AC5AF',
  50.         '#5FD3A6',
  51.         '#7BE39E',
  52.         '#A1EDB8',
  53.         '#CEF8D6'
  54.       ])
  55.       .style({
  56.         opacity: 1.0
  57.       });
  58.     scene.addLayer(pointLayer);
  59.   });
  61. </script>
  62. </body>
  63. </html>