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
| // 准备工作 <script src="./js/libgif.js"></script>
// 使用
const image = new Image();
image.src = require('../assets/imgs/rolling2.gif');
const superGif = new SuperGif({ gif: image });
superGif.load(() => {
this.$alarmData.entities.add({
name: i.junctionName,
curData: i,
id: `alarmicon-${i.junctionId}`,
position: Cesium.Cartesian3.fromDegrees(Number(i.lon), Number(i.lat), 30),
billboard: {
image: new Cesium.CallbackProperty(() => {
return superGif.get_canvas().toDataURL("image/png");
}, false),
height: 55, // 这里是坑
width: 55, // 这里是坑
pixelOffset: new Cesium.Cartesian2(0, -30),
heightReference: Cesium.HeightReference.NONE,
eyeOffset: new Cesium.Cartesian3(0, 0, -30),
outlineWidth: 0,
scaleByDistance: new Cesium.NearFarScalar(600, 1, 20000, 0.5),
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(600, 200000) // 视距从600到20万米显示
}
});
})
// apng准备工作 <script src="./js/apngjs.js"></script>
utils.js
/**
* 加载apng
*/
export async function loadApng(url) {
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
let blob = await loaderURL(url)
let arrayBuffer = await blobToArrayBuffer(blob)
let apng = apngjs.parseAPNG(arrayBuffer)
let player = await apng.getPlayer(ctx)
player.play()
return player;
}
async function loaderURL(url) {
function createXmlHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject('Microsoft.XMLHTTP')
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
}
return new Promise((resolve) => {
let xhr = createXmlHttpRequest()
xhr.open('get', url, true)
xhr.responseType = 'blob'
xhr.onload = function (res) {
if (this.status == 200) {
var blob = this.response
resolve(blob)
}
}
xhr.send()
})
}
async function blobToArrayBuffer(blob) {
return new Promise((resolve) => {
// Blob 转 ArrayBuffer
let reader = new FileReader()
reader.readAsArrayBuffer(blob)
reader.onload = function () {
resolve(reader.result)
}
})
}
// 使用
let player = this.apngMap[i['congestionStatus']] || await loadApng(resource)
this.apngMap[i['congestionStatus']] = player
let billboard = {
image: new Cesium.CallbackProperty((time, result) => {
return player.currentFrame.imageElement
}, false),
// pixelOffset: new Cesium.Cartesian2(0, -30),
...that.pointDefault
}
if (entity) {
entity.billboard = billboard;
} else {
entity = this.$alarmData.entities.add({
name: i.junctionName,
id: 'alarm' + i.junctionId,
position: Cesium.Cartesian3.fromDegrees(Number(i.lon), Number(i.lat), 30),
billboard
});
}
|
