百度地圖可視化參考文檔 MapV開發(fā)文檔 (baidu.com)
Baidu地圖飛線動畫
1. 在head中初始化樣式和引入所需的JS庫文件
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地圖基礎(chǔ)庫 -->
<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>
<!-- 使用根據(jù)城市名稱獲取城市的坐標 -->
<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>
<!-- 使用飛線圖層需要使用的依賴 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
2. 初始化一個容器，容器id固定為 map_container,是由common.js決定
- 由于使用了一個封裝好的
comm.js文件所以需要固定容器的id嫂伞。
在common.js中容器的id
<div id="map_container"></div>
3. 使用commn.js中的initMap方法初始化一個地圖
/**
* 初始化地圖
*/
function initMyMap() {
// 根據(jù)城市名稱獲取城市的中心點坐標 （經(jīng)緯度數(shù)組對象 ）
let centerCity = mapv.utilCityCenter.getCenterByCityName('上海')
return initMap(
{
// 切斜角度
tilt: 60,
// 旋轉(zhuǎn)角度
heading: 0,
// 地圖樣式
style: purpleStyle,
// 地圖縮放比例
zoom: 6,
// 地圖的中心點坐標
center: [centerCity.lng, centerCity.lat]
}
)
}
4. 準備數(shù)據(jù)源
數(shù)據(jù)中的每一個數(shù)據(jù)項代表一條貝塞爾曲線半等。貝賽爾曲線又由一些點構(gòu)成拷肌，最后通過
mapvgl的飛線圖層FlyLineLayer創(chuàng)建一條條的飛線。
4.1 生成貝賽爾曲線坐標集
- 實例化貝塞爾曲線對象(
BezierCurve) ;這是mapvgl中的內(nèi)置工具柳击。
let curve = new mapvgl.BezierCurve()
- 設置起點坐標和終點坐標 缀棍；通過
setOptions方法設置貝賽爾曲線的起點坐標和終點坐標。
// 2. 設置起點和終點坐標
let start = mapv.utilCityCenter.getCenterByCityName('上海')
let end = mapv.utilCityCenter.getCenterByCityName('北京')
curve.setOptions(
{
start: [start.lng, start.lat],
end: [end.lng, end.lat]
}
)
- 生成貝塞爾曲線坐標集 垒棋；使用
getPoints()方法獲取到生成的貝賽爾曲線坐標集。并將其設置到data數(shù)組中痪宰。
let curveData = curve.getPoints()
data.push({
geometry: {
type: 'LineString',
coordinates: curveData
}
})
準備數(shù)據(jù)源部分的代碼
/**
* 準備數(shù)據(jù)源
* @returns {[]}
*/
function initData() {
// 生成的數(shù)據(jù)信息
let data = []
// 城市數(shù)據(jù)信息
let cities = ['北京', '天津', '上海', '重慶', '石家莊', '太原', '呼和浩特', '哈爾濱', '長春',
'沈陽', '濟南', '南京', '合肥', '杭州', '南昌', '福州', '鄭州', '武漢', '長沙', '廣州',
'南寧', '西安', '銀川', '蘭州', '西寧', '烏魯木齊', '成都', '貴陽', '昆明', '拉薩', '旱鸺埽口']
// 需要定義 700 個 data 的數(shù)據(jù)項
let randomCount = 100
while (randomCount--) {
// 獲取每一個城市的中心點坐標 隨機生成 在 所有城市范圍內(nèi)挑選 生成的隨機數(shù)是 [0,cities.length] 創(chuàng)建開始開始城市和終點城市
let start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
let end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
// 創(chuàng)建貝塞爾曲線對象
let curve = new mapvgl.BezierCurve();
// 根據(jù)起點和終點生成貝塞爾曲線坐標集
curve.setOptions(
{
start: [start.lng, start.lat],
end: [end.lng, end.lat]
}
)
let curveData = curve.getPoints()
// 3. 創(chuàng)建data數(shù)據(jù)
data.push(
{
geometry: {
type: 'LineString',
coordinates: curveData
}
}
)
}
return data;
}
5. 設置數(shù)據(jù)源
- 創(chuàng)建圖層管理器對象：需要傳遞當前的
map對象畔裕。
// 創(chuàng)建圖層管理器
let view = new mapvgl.View(
{map}
);
- 創(chuàng)建飛線圖層:使用的是
FlyLineLayer對象。
let flyLineLayer = new mapvgl.FlyLineLayer(
{
// 飛線動畫方式 normal乖订，默認值扮饶，飛線動畫速度均勻 chaos，飛線動畫速度不均勻
style: 'chaos',
// 底線顏色
color: 'rgba(33, 242, 214, 0.3)',
// 飛線動畫的顏色
textureColor: 'red',
// 飛線動畫的寬度
textureWidth: 20,
// 飛線動畫的長度乍构，占整條線的百分比甜无，取值0-100
textureLength: 10,
// 飛線動畫的步長，步長越大動畫速度越快 默認值 0.1
step: 0.1
}
);
- 將飛線圖層添加到圖層管理器中:
view.addLayer(flyLineLayer);
- 將準備的數(shù)據(jù)和 飛線圖層綁定 :
flyLineLayer.setData(data);
這部分的完整代碼
/**
* 繪制數(shù)據(jù)源
* @param map
* @param data
*/
function setData(map, data) {
// 創(chuàng)建圖層管理器
let view = new mapvgl.View(
{map}
);
let flyLineLayer = new mapvgl.FlyLineLayer(
{
// 飛線動畫方式 normal蜡吧，默認值毫蚓，飛線動畫速度均勻 chaos，飛線動畫速度不均勻
style: 'chaos',
// 底線顏色
color: 'rgba(33, 242, 214, 0.3)',
// 飛線動畫的顏色
textureColor: 'red',
// 飛線動畫的寬度
textureWidth: 20,
// 飛線動畫的長度昔善，占整條線的百分比元潘，取值0-100
textureLength: 10,
// 飛線動畫的步長，步長越大動畫速度越快 默認值 0.1
step: 0.1
}
);
view.addLayer(flyLineLayer);
flyLineLayer.setData(data);
}
6. 該案例的完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>datav-Mapvgl-fly-line</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_container {
width: 100%;
height: 100%;
}
</style>
<!-- 百度地圖基礎(chǔ)庫 -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1*****"></script>
<!-- 公共的文件代碼 里面包含 地圖初始化 和 實用樣式 -->
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<!-- 使用根據(jù)城市名稱獲取城市的坐標 -->
<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>
<!-- 使用飛線圖層需要使用的依賴 -->
<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.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: 60,
// 旋轉(zhuǎn)角度
heading: 0,
// 地圖樣式
style: purpleStyle,
// 地圖縮放比例
zoom: 6,
// 地圖的中心點坐標
center: [centerCity.lng, centerCity.lat]
}
)
}
/**
* 準備數(shù)據(jù)源
* @returns {[]}
*/
function initData() {
// 生成的數(shù)據(jù)信息
let data = []
// 城市數(shù)據(jù)信息
let cities = ['北京', '天津', '上海', '重慶', '石家莊', '太原', '呼和浩特', '哈爾濱', '長春',
'沈陽', '濟南', '南京', '合肥', '杭州', '南昌', '福州', '鄭州', '武漢', '長沙', '廣州',
'南寧', '西安', '銀川', '蘭州', '西寧', '烏魯木齊', '成都', '貴陽', '昆明', '拉薩', '壕停口']
// 需要定義 700 個 data 的數(shù)據(jù)項
let randomCount = 100
while (randomCount--) {
// 獲取每一個城市的中心點坐標 隨機生成 在 所有城市范圍內(nèi)挑選 生成的隨機數(shù)是 [0,cities.length] 創(chuàng)建開始開始城市和終點城市
let start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
let end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length, 10)])
// 創(chuàng)建貝塞爾曲線對象
let curve = new mapvgl.BezierCurve();
// 根據(jù)起點和終點生成貝塞爾曲線坐標集
curve.setOptions(
{
start: [start.lng, start.lat],
end: [end.lng, end.lat]
}
)
let curveData = curve.getPoints()
// 3. 創(chuàng)建data數(shù)據(jù)
data.push(
{
geometry: {
type: 'LineString',
coordinates: curveData
}
}
)
}
return data;
}
/**
* 繪制數(shù)據(jù)源
* @param map
* @param data
*/
function setData(map, data) {
// 創(chuàng)建圖層管理器
let view = new mapvgl.View(
{map}
);
let flyLineLayer = new mapvgl.FlyLineLayer(
{
// 飛線動畫方式 normal翩概，默認值，飛線動畫速度均勻 chaos返咱，飛線動畫速度不均勻
style: 'chaos',
// 底線顏色
color: 'rgba(33, 242, 214, 0.3)',
// 飛線動畫的顏色
textureColor: 'red',
// 飛線動畫的寬度
textureWidth: 20,
// 飛線動畫的長度钥庇，占整條線的百分比，取值0-100
textureLength: 10,
// 飛線動畫的步長咖摹，步長越大動畫速度越快 默認值 0.1
step: 0.1
}
);
view.addLayer(flyLineLayer);
flyLineLayer.setData(data);
}
</script>
</body>
</html>
