什么是百度地图可视化
MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。
地图可视化开发流程
- 引入 js 库
// 地图对象js库
<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密钥"></script>
// 引入mapv对象，该对象封装了一些方法供我们调用
<script src="https://mapv.baidu.com/build/mapv.js"></script>
// 这是一个帮助我们快速初始化地图的一个库，引入后我们调用一个方法即可初始化一个地图
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
// mapvgl对象
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
引入了上述4个库之后，就会在window下挂载以下全局变量：
BMapGL
mapv
mapvgl
initMap
whiteStyle
- 编写容器组件
<div id="map_container"></div>
id名称必须为map_container，因为static/common.js这个库对id定死了
- 初始化 Map 对象
var map = initMap({
tilt: 56,
heading: 0.3,
center: [109.792816,27.702774],
zoom: 5,
style: whiteStyle,
skyColors: [
// 地面颜色
'rgba(226, 237, 248, 0)',
// 天空颜色
'rgba(186, 211, 252, 1)'
]
});
- 初始化绘制数据，数据格式为：
[{
geometry: {
type: 'Point',
coordinates: [x, y]
},
// 每个点对应的数据大小
properties: {
count: Math.random() * 100
// other properties...
}
}, {
// other data...
}]
// 构造数据
var data = [];
var citys = [
'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨',
'长春', '沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州',
'武汉', '长沙', '广州', '南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐',
'成都', '贵阳', '昆明', '拉萨', '海口'
];
var randomCount = 300;
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]
},
properties: {
count: Math.random() * 100
}
});
}
- 初始化 mapvgl.View 图层管理器
var view = new mapvgl.View({
map: map
});
- 初始化 mapvgl.PointLayer 图层
var pointLayer = new mapvgl.PointLayer({
blend: 'lighter',
size: 5,
color: 'rgba(102, 0, 204, 0.6)'
});
- 调用 view.addLayer 添加图层到图层管理器
view.addLayer(pointLayer);
- 调用 mapvgl.PointLayer.setData 关联图层和数据
pointLayer.setData(data);
在Vue中画一个地图飞线效果
在vue中实现百度地图里面炫酷的效果，是不需要echarts，echarts和百度地图其实两个不同的东西，这一点不要搞混。
- 引入mapvgl等库
<script src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
<!-- 这是一个帮助我们快速初始化的一个库，引入后我们调用一个方法即可初始化一个地图 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 相当于是一个工具函数库，通过这个库可以快捷的获取一些城市的坐标等 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
这是mapvgl的库， 用来制作各种悬空3D的效果
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<!-- 飞线是基于`Threejs`实现，使用前需要额外引入`mapvgl.threelayers`包 -->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.89/dist/mapvgl.threelayers.min.js"></script>
- 注册到全局Vue里面
// 地图相关全局对象
Vue.prototype.$bmap = window.BMapGL
// initMap方法
Vue.prototype.$initMap = window.initMap
Vue.prototype.$mapvgl = window.mapvgl
Vue.prototype.$mapv = window.mapv
// 地图样式
Vue.prototype.$purpleStyle = window.purpleStyle
- 代码示例
<template>
<div id="map_container"></div>
</template>
<script>
export default {
methods: {
initData() {
const data = []
const cities = ['北京', '天津', '上海', '重庆', '海口']
let randomCount = 100 // 模拟的飞线的数量
// 通过传入起点和终点，生成带高度的贝塞尔曲线坐标集，可以用来生成飞线数据
const curve = new this.$mapvgl.BezierCurve()
// 构造数据
while (randomCount--) {
// 根据城市获取城市的经纬度
const startPoint = this.$mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
const endPoint = this.$mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
// 给白塞尔曲线设置起始点
curve.setOptions({
start: [startPoint.lng, startPoint.lat],
end: [endPoint.lng, endPoint.lat]
})
// 生成飞线数据
const curveModelData = curve.getPoints()
data.push({
geometry: {
// 类型
type: 'LineString',
// 坐标集
coordinates: curveModelData
},
// 数量
properties: {
count: Math.random()
}
})
}
return data
},
setData(data, map) {
// 初始化一个画布
const view = new this.$mapvgl.View({
map: map
})
// 初始化一个飞线图层
const flylineLayer = new this.$mapvgl.FlyLineLayer({
style: 'chaos',
step: 0.3,
color: 'rgba(33, 242, 214, 0.3)',
// 通过颜色来设置判断数据的大小
textureColor: function(data) {
return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd'
},
textureWidth: 20,
textureLength: 10
})
// 把图层加到画布中
view.addLayer(flylineLayer)
// 飞线图层和数据进行绑定
flylineLayer.setData(data)
}
},
mounted() {
// 初始化地图
const map = this.$initMap({
tilt: 60,
heading: 0,
center: [103.438656, 25.753594],
zoom: 6,
style: this.$purpleStyle
})
this.setData(this.initData(), map)
}
}
</script>
<style>
#map_container {
width: 100%;
height: 100%;
}
</style>
