- 引入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>