-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathchangeBounds.html
116 lines (99 loc) · 2.63 KB
/
changeBounds.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
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改热力图bounds</title>
<script src="Cesium/Cesium.js"></script>
<script type="text/javascript" src="plugin/viewerCesiumNavigationMixin.js"></script>
<script type="text/javascript" src="plugin/CesiumHeatmap.js"></script>
<link href="Cesium/Widgets/widgets.css" rel="stylesheet" />
<style>
html,
body {
display: block;
margin: 0;
height: 100%;
}
#cesiumContainer {
height: 100%;
}
</style>
</head>
<body>
<div id="cesium-logo"></div>
<div id="cesiumContainer"></div>
<script>
var esri = new Cesium.ArcGisMapServerImageryProvider({
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
enablePickFeatures: false,
})
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: esri,
navigationHelpButton: false,
timeline: false,
animation: false,
fullscreenButton: false,
geocoder: false,
baseLayerPicker: false,
// sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
creditContainer: 'cesium-logo'
})
viewer.extend(Cesium.viewerCesiumNavigationMixin, {})
// 矩形坐标
var bounds = {
west: -109.0,
south: 30.0,
east: -80.0,
north: 40.0
}
var bounds2 = {
west: -109.0,
south: 40.0,
east: -80.0,
north: 50.0
}
// 初始化CesiumHeatmap
var heatMap = CesiumHeatmap.create(
viewer, // 视图层
bounds, // 矩形坐标
{ // heatmap相应参数
maxOpacity: .5,
minOpacity: 0,
blur: .75
}
)
var sourceData = getData(300)
console.log(sourceData, 'sourceData')
// 添加数据 最小值，最大值，数据集
heatMap.setWGS84Data(0, 100, sourceData)
viewer.zoomTo(viewer.entities)
var times = 0
setInterval(function () {
times++
if (times % 2 === 0) {
heatMap.changeBounds(bounds)
heatMap.setWGS84Data(0, 100, sourceData)
} else {
heatMap.changeBounds(bounds2)
heatMap.setWGS84Data(0, 100, sourceData)
}
}, 2000)
// 动态数据 [{x: -97.6433525165054, y: 45.61443064377248, value: 11.409122369106317}]
function getData(length) {
var data = []
for (var i = 0; i < length; i++) {
var x = Math.random() * (-109 + 80) - 80
var y = Math.random() * (50 - 30) + 30
var value = Math.random() * 100
data.push({
x: x,
y: y,
value: value,
radius: 200
})
}
return data
}
</script>
</body>
</html>