绘制炫酷飞线动画 。在其中会使用
强制边绑定算法是重点。 百度地图可视化文档 MapV开发文档 (baidu.com)
炫酷飞线动画-强制边绑定算法
1. 初始化样式和引入需要的JS库
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地图基础库 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=******"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
2. 初始化地图容器
- 注意因为这里使用了
common.js进行初始化地图，所以这里的容器id为固定的map_container。
<div id="map_container"></div>
3. 初始化地图
- 使用
common.js文件中的initMap函数对地图进行初始化。
function initMyMap() {
// 根据城市名称获取到当前城市的中心点坐标
let centerCity = mapv.utilCityCenter.getCenterByCityName('重庆')
return initMap(
{
tilt: 0, // 地图的倾斜角
heading: 0, // 地图旋转的角度
center: [centerCity.lng, centerCity.lat], // 地图初始显示的中心点坐标
style: purpleStyle, // 地图样式
zoom: 5 // 地图初始缩放比例
}
)
}
4. 准备数据
准备的数据是随机生成指定数量的一些数据，线的数据和点的数据是一致的。不同的是后面使用不同的方式进行渲染。
在准备的数据中还使用了强制边绑定算法进行实现一种各条线汇聚的效果。
/**
* 准备数据信息
* @returns {[]}
*/
function initData() {
let data = []
// 城市数据信息
let cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口', '台湾', '香港']
// 确定一个需要汇聚所有线的目标城市
let targetCity = mapv.utilCityCenter.getCenterByCityName('重庆')
// 随机生成线和点的数量
let randomCount = 1000
/* 使用强制边绑定算法实现边的汇聚效果开始 */
let nodeData = [
{
// 目标城市的经度
x: targetCity.lng,
// 目标城市的纬度
y: targetCity.lat
}
]
// 边数据
let edgeData = [
{
source: 1,
target: 0
}
]
// 循环生成 随机个 点数据 和 边数据
for (let i = 0; i < randomCount; i++) {
// 获取每一条线的起始点坐标
let start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])
// 添加每一个点的数据
nodeData.push(
{
// 这里让每个数据在渲染的时候是一种散列开的效果 是一个随机算法
x: start.lng - 2 + Math.random() * 2,
y: start.lat - 2 + Math.random() * 2
}
)
// 边数据
edgeData.push(
{
source: i + 1,
target: 0
}
)
}
// 使用强制边绑定算法 进行强制边绑定调用该函数之后的结果是一个函数
let bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData)
// 调用得到的 bundling是一个 函数 调用这个函数返回 绑定结果集
let res = bundling()
/* 强制边绑定算法结束 */
// 对结果进行遍历
for (let i = 0; i < res.length; i++) {
// 线
let line = res[i]
// 坐标
let coordinates = []
for (let j = 0; j < line.length; j++) {
coordinates.push(
[
line[j].x,
line[j].y
]
)
}
data.push(
{
geometry: {
type: 'LineString',
coordinates
}
}
)
}
return data
}
5. 渲染数据
- 使用
mapvgl中的View创建图层管理器。
let view = new mapvgl.View(
{
map
}
)
- 使用
mapvgl中的LineLayer图层创建线图层。并将其添加到图层管理器中，和与准备的数据进行绑定。
// 创建线图层
let lineLayer = new mapvgl.LineLayer(
{
color: 'rgba(255,0,0,.3)',
width: 1,
// 线出现重叠的时候进行高亮显示
blend: 'lighter'
}
)
// 将图层添加到图层管理器中
view.addLayer(lineLayer)
// 将数据与图层进行绑定
lineLayer.setData(data)
- 使用
mapvgl中的LinePointLayer创建轨迹点图层，这个图层对象在官方文档中没有介绍但是可以通过官网的实现案例中找到实现方法进行实现。其他没有的图层对象也可以采用相似的方式进行查找使用。
// 创建轨迹点图层
let linePointLayer = new mapvgl.LinePointLayer(
{
// 点的尺寸
size: 5,
// 点的运动速度
speed: 30,
color: 'rgba(255, 255, 255, 0.8)',
// animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_UNIFORM_SPEED, // 这个动画是匀速的
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 动画类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 形状
blend: 'lighter'
}
)
view.addLayer(linePointLayer)
linePointLayer.setData(data)
6. 案例的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>replay-dataV-mapVGl-Cool-Fly-Line</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地图基础库 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=*******"></script>
<!-- 公共的文件代码 里面包含 地图初始化 和 实用样式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根据城市名称获取城市的坐标 -->
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<!--使用mapcgl的时候需要引入-->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
</head>
<body>
<div id="map_container"></div>
<!-- 复盘炫酷飞线动画 -->
<script>
let map = initMyMap()
let data = initData()
setData(map, data)
function initMyMap() {
// 根据城市名称获取到当前城市的中心点坐标
let centerCity = mapv.utilCityCenter.getCenterByCityName('重庆')
return initMap(
{
tilt: 0, // 地图的倾斜角
heading: 0, // 地图旋转的角度
center: [centerCity.lng, centerCity.lat], // 地图初始显示的中心点坐标
style: purpleStyle, // 地图样式
zoom: 5 // 地图初始缩放比例
}
)
}
/**
* 准备数据信息
* @returns {[]}
*/
function initData() {
let data = []
// 城市数据信息
let cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口', '台湾', '香港']
// 确定一个需要汇聚所有线的目标城市
let targetCity = mapv.utilCityCenter.getCenterByCityName('重庆')
// 随机生成线和点的数量
let randomCount = 1000
/* 使用强制边绑定算法实现边的汇聚效果开始 */
let nodeData = [
{
// 目标城市的经度
x: targetCity.lng,
// 目标城市的纬度
y: targetCity.lat
}
]
// 边数据
let edgeData = [
{
source: 1,
target: 0
}
]
// 循环生成 随机个 点数据 和 边数据
for (let i = 0; i < randomCount; i++) {
// 获取每一条线的起始点坐标
let start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)])
// 添加每一个点的数据
nodeData.push(
{
// 这里让每个数据在渲染的时候是一种散列开的效果 是一个随机算法
x: start.lng - 2 + Math.random() * 2,
y: start.lat - 2 + Math.random() * 2
}
)
// 边数据
edgeData.push(
{
source: i + 1,
target: 0
}
)
}
// 使用强制边绑定算法 进行强制边绑定调用该函数之后的结果是一个函数
let bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData)
// 调用得到的 bundling是一个 函数 调用这个函数返回 绑定结果集
let res = bundling()
/* 强制边绑定算法结束 */
// 对结果进行遍历
for (let i = 0; i < res.length; i++) {
// 线
let line = res[i]
// 坐标
let coordinates = []
for (let j = 0; j < line.length; j++) {
coordinates.push(
[
line[j].x,
line[j].y
]
)
}
data.push(
{
geometry: {
type: 'LineString',
coordinates
}
}
)
}
return data
}
function setData(map, data) {
let view = new mapvgl.View(
{
map
}
)
// 创建线图层
let lineLayer = new mapvgl.LineLayer(
{
color: 'rgba(255,0,0,.3)',
width: 1,
// 线出现重叠的时候进行高亮显示
blend: 'lighter'
}
)
// 将图层添加到图层管理器中
view.addLayer(lineLayer)
// 将数据与图层进行绑定
lineLayer.setData(data)
// 创建轨迹点图层
let linePointLayer = new mapvgl.LinePointLayer(
{
// 点的尺寸
size: 5,
// 点的运动速度
speed: 30,
color: 'rgba(255, 255, 255, 0.8)',
// animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_UNIFORM_SPEED, // 这个动画是匀速的
animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 动画类型
shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE, // 形状
blend: 'lighter'
}
)
view.addLayer(linePointLayer)
linePointLayer.setData(data)
}
</script>
</body>
</html>
