-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path飞线基础.html
106 lines (94 loc) · 4 KB
/
飞线基础.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=uVo9NXxwYrugBN7lGxWWY0K3MsPw8Nc9"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
<script src="https://mapv.baidu.com/build/mapv.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
<style>
html,body,#map_container{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.anchorBL,.BMap_cpyCtrl{
display: none;
}
</style>
</head>
<body>
<div id="map_container">
</div>
<script>
var map = initMaps()
var data = initData()
setData(map,data)
function initMaps(){
var map = initMap({
tilt:60,
center:[121.657614,31.324317],
zoom:6,
style:purpleStyle
})
return map
}
function initData(){
var data = []
var cities = ['北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口']
var randomCount = 100
// 飞线 起始坐标以及终点坐标
// 生成贝塞尔曲线坐标集
// 1.实例化贝塞尔曲线对象
// 2.设置起点和终点坐标
// 3.生成贝塞尔曲线坐标集
var curve = new mapvgl.BezierCurve()
while(randomCount--){
var start = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random()*cities.length)])
var end = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random()*cities.length)])
curve.setOptions({
start:[start.lng,start.lat],
end:[end.lng,end.lat]
})
var curveData = curve.getPoints()
data.push({
geometry:{
type:'LineString',
coordinates:curveData
},
properties:{
count:Math.random()
}
})
}
return data
}
function setData(map,data){
// 绘制
// 1.生成mapvgl 视图 View 这些图并不是直接生成在map地图上，另外有个图层
var view = new mapvgl.View({map})
// 2.初始化飞线对象
var flyLine = new mapvgl.FlyLineLayer({
style: 'chaos',
color: 'rgba(33, 242, 214, 0.3)',
textureColor: function(data){
return data.properties.count >0.5?'#ff0000':'#56ccdd'
},
textureWidth: 20,
textureLength: 10,
step:0.3,
})
// 3.将飞线对象加入View对象中
view.addLayer(flyLine)
// 4.将data与飞线对象绑定
flyLine.setData(data)
}
</script>
</body>
</html>