<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="geometry" content="diagram"> <link rel="stylesheet" href="./assets/common.css"> <title>point_circle</title> <style> #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id="map"></div> <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> <script src="./assets/jquery-3.2.1.min.js"></script> <script src="./assets/dat.gui.min.js"></script> <script src="../build/L7.js"></script> <script> const scene = new L7.Scene({ id: 'map', mapStyle: 'dark', // 样式URL center: [120.132624,30.281774], pitch: 0, zoom: 10 }); scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => { var layer = scene.HeatMapLayer({ zIndex: 2 }) .source(data, { parser: { type: 'csv', x: 'lng', y: 'lat' }, transforms:[ { type: 'map', callback:function(item){ const [x, y] = item.coordinates; item.lat = item.lat*1; item.lng = item.lng*1; item.v = item.v *1; item.coordinates = [x*1,y*1]; return item; } }, { type: 'hexagon', size: 6000, field:'v', method:'sum' } ] }) .active(true) .shape('hexagon') .style({ coverage: 0.9, angle: 0, }) .color('count', ["#002466","#105CB3","#2894E0","#CFF6FF","#FFF5B8","#FFAB5C","#F27049","#730D1C"]) .render(); console.log(layer); }); }); </script> </body> </html>