Article directory
Previous: Get started with echarts quickly
1. The first step
Click the link to jump to the official website of the Map geographic information visualization library to learn relevant application knowledge. The AK information to be added here is mentioned in the third step
Second, the second step
Search Baidu Map Development
3. The third step
Create an application after entering the SDK official website
Four, source code analysis
https://www.bilibili.com/video/BV13h411t7b1?p=8&spm_id_from=pageDriver
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>MapVGL</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="static/common.js"></script>
<script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
1. Initialization of the map
<script>
// 地图的初始化
var map = new BMapGL.Map('map_container') //初始化map
map.centerAndZoom(new BMapGL.Point(113,23),8.5); // 设置初始化地图位置，此处设置广州的point，地图的缩放比例为8.5
map.setTilt(30) // 地图的倾斜角度
map.setHeading(30) // 设置旋转角度
var citys = ['北京','上海','深圳','广州','福州'];
var count = 20;
var data = [];
2. Construct and generate data
while (count--){
// 构造数据
// var startPoint = mapv.utilCityCenter.getCenterByCityName('广州');//设置起点
// var endPoint = mapv.utilCityCenter.getCenterByCityName('福州')//设置终点
var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random()*citys.length)]);//设置随机起点
var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random()*citys.length)])//设置随机终点
console.log(startPoint,endPoint) // 打印如下
// 通过传入起点和终点，生成带高度的贝塞尔曲线坐标集，可以用来生成飞线数据
var curve = new mapvgl.BezierCurve({
start: [startPoint.lng, startPoint.lat],
end: [endPoint.lng, endPoint.lat]
});
// 生成曲线数据,打印如下
const curveData = curve.getPoints()
console.log(curveDate)
// 生成数据
data.push({
gometry:{
type:'LineString',
coordinates:curveData
},
// 生成随机的路径线颜色值
properties:{
color:`rgb(${
Math.floor(Math.random *255)},${
Math.floor(Math.random *255)},${
Math.floor(Math.random *255)})`
}
})
}
3. Visualization layers
// 初始化MapVGL容器对象，用来管理各可视化图层对象。
var view = new mapvgl.View({
map:map});
// 飞线图层
var layer = new mapvgl.FlyLineLayer({
// 设置路径线的style
style:'chaos',
// 设置路径线的速度
step:0.5,
color: 'rgba(50, 50, 200, 1)', // 路径的颜色
// 根据数据data生成文理颜色
textureColor: function(data){
return data.properties.color
},
textureWidth: 10, // 线段的宽度
textureLength: 30, // 线段长度，0 - 100
});
view.addLayer(layer)
layer.setData(data)
</script>
</body>
</html>
5. Cases
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>MapVGL</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
<script src="//mapv.baidu.com/build/mapv.min.js"></script>
<script src="static/common.js"></script>
<script src="https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<script>
var map = initMap({
tilt: 50.5,
heading: 0,
center: [106.716879,29.044285],
zoom: 5,
style: whiteStyle,
skyColors: [
// 地面颜色
'rgba(226, 237, 248, 0)',
// 天空颜色
'rgba(186, 211, 252, 1)'
]
});
var view = new mapvgl.View({
map: map
});
var data = [];
var citys = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙',
'广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 50;
// 构造数据
while (randomCount--) {
var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
data.push({
geometry: {
type: 'Point',
coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
}
});
}
var rippleLayer = new mapvgl.RippleLayer({
size: 500000,
unit: 'm',
color: 'rgb(255, 51, 0)',
enablePicked: true,
onClick: (e) => {
// 点击事件
console.log(e);
},
});
view.addLayer(rippleLayer);
rippleLayer.setData(data);
setTimeout(() => {
rippleLayer.setOptions({
size: 50,
duration: 4,
unit: 'px',
color: 'rgb(255, 51, 0)'
});
}, 4000);
</script>
</body>
</html>