先用 HTML CDN的方式跑起来一个地图案例： 官方案例地址：https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491-499
我的案例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>L7</title> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' /> <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script> <script src='https://unpkg.com/@antv/l7'></script> </head> <body> <div style="width: 800px;height: 600px; position: absolute;" id="map"></div> <script> const scene = new L7.Scene({ id: 'map', //GaodeMap Mapbox 需要上面的mapbox-gl.js map: new L7.Mapbox({ style: 'dark', // 样式URL dark blank light center: [110.19382669582967, 30.258134], pitch: 40, zoom: 3, // token: 'mapbox token', }), }); fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json') .then(res => res.json()) .then(data => { const pointLayer = new L7.PointLayer({}) .source(data.list, { parser: { type: 'json', x: 'j', y: 'w' } }) .shape('cylinder') .size('t', function (level) { return [1, 2, level * 2 + 20]; }) .color('t', [ '#094D4A', '#146968', '#1D7F7E', '#289899', '#34B6B7', '#4AC5AF', '#5FD3A6', '#7BE39E', '#A1EDB8', '#CEF8D6' ]) .style({ opacity: 1.0 }); scene.addLayer(pointLayer); }); </script> </body> </html>运行结果：
我的案例使用的是Mapbox。如果不引用mapbox-gl.js会出现下面的错误。
注意事项：
div设置宽高之后必须指定position，否则宽高无效。吐槽一下scene居然没有设置宽高的方法，只有一个getSize()。折腾了好久才折腾出这样的一个模样出来。
