- 引入js库
- 编写渲染容器DOM
- 初始化地图对象 L7.Scene
- 请求数据
- 数据清洗
- 初始化绘图对象
- 调用L7.Scene.addLayer方法绘图
Demo:
代码:
<!--
* @Author: your name
* @Date: 2020-07-03 10:57:44
* @LastEditTime: 2020-07-03 12:24:25
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /css/test-l7.html
-->
<!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">
<title>Document</title>
<script src="https://unpkg.com/@antv/l7"></script>
<style>
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id='l7-map'></div>
<script>
const scene = new L7.Scene({
id:'l7-map',
map: new L7.GaodeMap(
{
style:'dark',//light
center:[120,30],//地图中心点的经纬座标
pitch:0,//看地图的仰角
zoom:6,//放大比例
token:'2235b3ee920641f8d7fb01b57aed8b71'
}
)
})
scene.on('loaded',function(){
fetch(
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json'//全球发电站的数据
)
.then(res=>res.json())
.then(data=>{
console.log(data);
data.features = data.features.filter(item=>item.properties.capacity > 1000);
const pointLayer = new L7.PointLayer({})
.source(data)
.shape('circle')
.size('capacity',[0,16])//key 范围
.color('capacity',[
'#34B6B7',//小气泡
'#4AC5AF',
'#5FD3A6',
'#7BE39E',
'#A1EDB8',
'#CEF8D6'//大气泡
])
.style({
strokeWidth:0,
opacity:0.5,
})
.active(true);
scene.addLayer(pointLayer);
})
})
</script>
</body>
</html>