AntV L7
L7·蚂蚁地理空间数据可视化
蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。
一、点图层可视化
01、波纹图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointLayer</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../../lib/mapbox.js"></script>
<link rel="stylesheet" href="../../lib/mapbox.css">
<script src="../../lib/l7.js"></script>
<script src="../../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: fixed;
top: 5px;
left: 5px;
z-index: 1;
}
</style>
</head>
<body>
<button onclick="toLog()" style="left: 80px;">查看</button>
<button onclick="toDel()" style="left: 160px;">删除</button>
<button onclick="toShow()">切换</button>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 12, //缩放比例
});
// 官方文档:https://l7.antv.antgroup.com/api/point_layer/pointlayer
const { Scene, Mapbox, PointLayer,LayerSwitch } = L7
//L7来管理地图
const scene = new L7.Scene({
id: 'map',
map: new L7.Mapbox({
mapInstance: map
})
})
const data = turf.featureCollection([
turf.point([114.342, 30.5192], { num: 200 }),
turf.point([114.354, 30.493], { num: 300 }),
turf.point([114.355, 30.515], { num: 400 }),
turf.point([114.345, 30.5243], { num: 200 }),
turf.point([114.3561, 30.4932], { num: 300 }),
turf.point([114.3557, 30.5156], { num: 400 }),
turf.point([114.347, 30.5123], { num: 200 }),
turf.point([114.359, 30.49], { num: 300 }),
turf.point([114.355, 30.511], { num: 400 }),
]);
let pointLayer
scene.on('load', () => {
pointLayer = new PointLayer()
.source(data) //数据源 跟mapbox不一样,它只能放要素集合
.shape('circle')
.size(50)
.animate(true)
.active('true')
.color('red')
// .active('blue')
// .filter('num', (num) => {
// return num > 250
// })
scene.addLayer(pointLayer)
const layerSwitch = new LayerSwitch({
layers: [pointLayer],
});
scene.addControl(layerSwitch);
})
</script>
</body>
</html>
02、雷达图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointLayer</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../../lib/mapbox.js"></script>
<link rel="stylesheet" href="../../lib/mapbox.css">
<script src="../../lib/l7.js"></script>
<script src="../../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: fixed;
top: 5px;
left: 5px;
z-index: 1;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 12, //缩放比例
});
// 官方文档:https://l7.antv.antgroup.com/api/point_layer/pointlayer
const { Scene, Mapbox, PointLayer, LayerSwitch } = L7
//L7来管理地图
const scene = new L7.Scene({
id: 'map',
map: new L7.Mapbox({
mapInstance: map
})
})
let pointLayer
scene.on('load', () => {
fetch('../3、组件/output.json').then(response => response.json()).then(res => {
// console.log(res);
pointLayer = new PointLayer()
.source(res) //数据源 跟mapbox不一样,它只能放要素集合
.shape('radar')
.size(50)
.animate(true)
.active(true)
.color('red')
.style({
speed: 5
})
scene.addLayer(pointLayer)
})
})
</script>
</body>
</html>
03、自定义图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointLayer</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../../lib/mapbox.js"></script>
<link rel="stylesheet" href="../../lib/mapbox.css">
<script src="../../lib/l7.js"></script>
<script src="../../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: fixed;
top: 5px;
left: 5px;
z-index: 1;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/streets-v12', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 12, //缩放比例
});
// 官方文档:https://l7.antv.antgroup.com/api/point_layer/pointlayer
const { Scene, Mapbox, PointLayer,LayerSwitch } = L7
//L7来管理地图
const scene = new L7.Scene({
id: 'map',
map: new L7.Mapbox({
mapInstance: map
})
})
const data = turf.featureCollection([
turf.point([114.34, 30.52], { num: 200 }),
]);
scene.on('load', () => {
scene.addImage('position','./position.png')
const pointLayer = new PointLayer()
.source(data) //数据源 跟mapbox不一样,它只能放要素集合
.shape('position')
.size(20)
scene.addLayer(pointLayer)
})
</script>
</body>
</html>
二、线图层可视化
01、流线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointLayer</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../../lib/mapbox.js"></script>
<link rel="stylesheet" href="../../lib/mapbox.css">
<script src="../../lib/l7.js"></script>
<script src="../../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: fixed;
top: 5px;
left: 5px;
z-index: 1;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/dark-v11', //地图风格
center: [114.30, 30.50], //地图中心坐标
zoom: 12, //缩放比例
});
// 官方文档:https://l7.antv.antgroup.com/api/point_layer/pointlayer
const { Scene, Mapbox, PointLayer,LayerSwitch,LineLayer } = L7
//L7来管理地图
const scene = new L7.Scene({
id: 'map',
map: new L7.Mapbox({
mapInstance: map
})
})
scene.on('loaded',()=>{
fetch('./roads.json').then(res=>res.json()).then(res=>{
const layer = new LineLayer()
.source(res)
.size(1)
.shape('line')
.color('rgba(0,0,255,0.4)')
.filter('type',(type)=>{
return type==='primary'
})
.animate({
inteval:1, //流线长度
trailLength:1, //流线间隔
duration:3 //持续时间
})
scene.addLayer(layer)
})
})
</script>
</body>
</html>
三、面图层可视化
01、城市建筑扫光
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointLayer</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../../lib/mapbox.js"></script>
<link rel="stylesheet" href="../../lib/mapbox.css">
<script src="../../lib/l7.js"></script>
<script src="../../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: fixed;
top: 5px;
left: 5px;
z-index: 1;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/dark-v11', //地图风格
center: [120.145, 30.238915], //地图中心坐标
zoom: 12, //缩放比例
});
// 官方文档:https://l7.antv.antgroup.com/zh/examples/gallery/animate/#build_sweep
const { Scene, Mapbox, CityBuildingLayer, PolygonLayer,LineLayer } = L7
//L7来管理地图
const scene = new L7.Scene({
id: 'map',
map: new L7.Mapbox({
mapInstance: map
})
})
fetch(
'https://gw.alipayobjects.com/os/rmsportal/ggFwDClGjjvpSMBIrcEx.json'
).then(async res => {
const pointLayer = new CityBuildingLayer();
pointLayer
.source(await res.json())
.size('floor', [0, 500])
.color('rgba(242,246,250,1.0)')
.animate({
enable: true
})
.active({
color: '#0ff',
mix: 0.5
})
.style({
opacity: 0.7,
baseColor: 'rgb(16, 16, 16)',
windowColor: 'rgb(30, 60, 89)',
brightColor: 'rgb(255, 176, 38)',
sweep: {
enable: true,
sweepRadius: 2,
sweepColor: '#1990FF',
sweepSpeed: 0.5,
sweepCenter: [120.145319, 30.238915]
}
});
scene.addLayer(pointLayer);
});
// fetch(
// 'https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json'
// )
// .then(data => data.json())
// .then(
// ({
// lakeBorderData,
// lakeData,
// landData
// }) => {
// const lakeLayer = new PolygonLayer()
// .source(lakeData)
// .shape('fill')
// .color('#1E90FF')
// .style({
// opacity: 0.4,
// opacityLinear: {
// enable: true,
// dir: 'out' // in - out
// }
// });
// const landLayer = new PolygonLayer()
// .source(landData)
// .shape('fill')
// .color('#3CB371')
// .style({
// opacity: 0.4,
// opacityLinear: {
// enable: true,
// dir: 'in' // in - out
// }
// });
// const lakeBorderLayer = new PolygonLayer()
// .source(lakeBorderData)
// .shape('fill')
// .color('#ccc')
// .style({
// opacity: 0.5,
// opacityLinear: {
// enable: true,
// dir: 'in' // in - out
// }
// });
// scene.addLayer(lakeLayer);
// scene.addLayer(lakeBorderLayer);
// scene.addLayer(landLayer);
// }
// );
// fetch(
// 'https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json'
// )
// .then(res => res.json())
// .then(data => {
// const layer = new LineLayer({
// zIndex: 0,
// depth: true
// })
// .source(data)
// .size(1)
// .shape('line')
// .color('#1990FF')
// .animate({
// interval: 1, // 间隔
// duration: 2, // 持续时间,延时
// trailLength: 2 // 流线长度
// });
// scene.addLayer(layer);
// });
</script>
</body>
</html>
02、深圳3D建筑模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pointLayer</title>
<!-- 1、引入mapbox库以及它的样式 -->
<script src="../../lib/mapbox.js"></script>
<link rel="stylesheet" href="../../lib/mapbox.css">
<script src="../../lib/l7.js"></script>
<script src="../../lib/turf.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
button {
position: fixed;
top: 5px;
left: 5px;
z-index: 1;
}
</style>
</head>
<body>
<!-- 1、给地图准备一个容器 -->
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
// 3、创建地图
const map = new mapboxgl.Map({
container: 'map', //指定地图容器id
style: 'mapbox://styles/mapbox/dark-v11', //地图风格
center: [ 114.050008, 22.529272 ], //地图中心坐标
zoom: 12, //缩放比例
});
// 官方文档:https://l7.antv.antgroup.com/api/point_layer/pointlayer
const { Scene, Mapbox, PointLayer, LayerSwitch,PolygonLayer } = L7
//L7来管理地图
const scene = new L7.Scene({
id: 'map',
map: new L7.Mapbox({
mapInstance: map
})
})
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json'
)
.then(res => res.json())
.then(data => {
const layer = new PolygonLayer({})
.source(data)
.shape('extrude')
.size('h20', [100, 120, 160, 200, 260, 500])
.color('h20', [
'#816CAD',
'#A67FB5',
'#C997C7',
'#DEB8D4',
'#F5D4E6',
'#FAE4F1',
'#FFF3FC'
]);
scene.addLayer(layer);
});
});
</script>
</body>
</html>