MovePrompt.js
6.74 KB
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
export default {
movePrompt: class MovePrompt {
constructor(viewer, opt) {
if (!opt) opt = {};
var randomId = Number((new Date()).getTime());
this.id = randomId;
this.style = opt.style;
this.viewer = viewer;
if (!this.viewer) return;
this.scene = this.viewer.scene;
this.camera = this.viewer.camera;
this.mapContainer = this.viewer.container.id;
this.rendHandler = null;
if (!this.mapContainer) return;
this.trackPopUpId = "trackPopUp" + randomId;
this.promptContentId = "promptContent" + randomId;
this.promptDivId = "promptDiv" + randomId;
this.trackPopUpContentId = "trackPopUpContent" + randomId;
this.closeBtnId = "closeBtn" + randomId;
var infoDiv;
var max_width = 300;
var max_height = 500;
infoDiv = window.document.createElement("div");
infoDiv.id = this.trackPopUpId;
infoDiv.className = "trackPopUp";
this.content = opt.content || ""; //提示框内容
if (!opt.type || opt.type == 1) {
infoDiv.innerHTML = '<div id="' + this.trackPopUpContentId + '" class="cesium-popup" style="top:0;left:0;">' +
'<div class="cesium-prompt-content-wrapper" id="' + this.promptDivId + '">' +
'<div id="trackPopUpLink" class="cesium-popup-content" style="max-width: ' + max_width + 'px;max-height: ' + max_height + 'px">' +
'<span class="promptContent" id="' + this.promptContentId + '">' + this.content + '</span>' +
'</div>' +
'</div>' +
'</div>';
} else {
infoDiv.innerHTML = '<div id="' + this.trackPopUpContentId + '" class="cesium-popup" style="top:0;left:0;">' +
'<a class="cesium-popup-close-button" href="javascript:void(0)" id="' + this.closeBtnId + '">×</a>' +
'<div class="cesium-popup-content-wrapper" id="' + this.promptDivId + '">' +
'<div id="trackPopUpLink" class="cesium-popup-content" style="max-width: ' + max_width + 'px;max-height: ' + max_height + 'px">' +
'<span class="popupContent" id="' + this.promptContentId + '">' + this.content + '</span>' +
'</div>' +
'</div>' +
'<div class="cesium-popup-tip-container">' +
'<div class="cesium-popup-tip"></div>' +
'</div>' +
'</div>';
}
window.document.getElementById(this.mapContainer).appendChild(infoDiv);
window.document.getElementById(this.trackPopUpId).style.display = "block";
this.offset = opt.offset || {};
this.infoDiv = window.document.getElementById(this.trackPopUpId);
this.trackPopUpContent = window.document.getElementById(this.trackPopUpContentId);
this.promptDiv = window.document.getElementById(this.promptDivId);
this.promptContent = window.document.getElementById(this.promptContentId);
this.trackPopUpLink = window.document.getElementById(this.promptContentId);
this.popupCartesian = opt.popupCartesian;
this.rendHandler = null;
this.show = (opt.show == undefined ? true : opt.show);
if(opt.type==2){
if(!this.popupCartesian){
console.warn("缺少空间坐标！");
return ;
}
}
if (opt.type && opt.type != 1 && this.popupCartesian) {
var clsBtn = window.document.getElementById(this.closeBtnId);
var that = this;
clsBtn.addEventListener("click", function () {
that.setVisible(false);
});
this.rendHandler = this.viewer.scene.postRender.addEventListener(function () {
if (that.popupCartesian) {
var px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.scene, that.popupCartesian);
that.trackPopUpContent.style.left = px.x + (that.offset.x || 0)+ (Math.ceil(-that.trackPopUpContent.offsetWidth / 2)) + "px";
that.trackPopUpContent.style.top = px.y + (that.offset.y ||0)+ (-that.trackPopUpContent.offsetHeight) + "px";
var res = false;
var e = that.popupCartesian,
i = that.camera.position,
n = that.scene.globe.ellipsoid.cartesianToCartographic(i).height;
if (!(n += 1 * that.scene.globe.ellipsoid.maximumRadius, Cesium.Cartesian3.distance(i, e) > n)) {
res = true;
}
if (res && that.show) {
if (that.infoDiv) that.infoDiv.style.display = "block";
} else {
if (that.infoDiv) that.infoDiv.style.display = "none";
}
}
});
}
}
setHtml(html) {
if (!html) {
return;
}
if (this.trackPopUpLink) {
this.trackPopUpLink.innerText = html;
}
}
destroy() {
if (this.infoDiv && this.mapContainer) {
this.infoDiv.style.display = "none";
window.document.getElementById(this.mapContainer).removeChild(this.infoDiv);
this.infoDiv = null;
}
if (this.rendHandler) {
this.rendHandler();
this.rendHandler = null;
}
}
displayPrompt(display) {
if (this.infoDiv) this.infoDiv.style.display = display ? "block" : "none";
}
updateStyle(opt) {
if (!opt) opt = {};
this.promptDiv.style.background = opt.rgba || "rgba(0,0,0,.4)";
this.promptContent.style.color = opt.fontColor || "white";
}
updatePrompt(px, html) {
if (!px) return;
this.infoDiv.style.display = "block";
this.trackPopUpContent.style.left = px.x + (this.offset.x || 30) + "px";
this.trackPopUpContent.style.top = px.y + (this.offset.y || 30) + "px";
this.setHtml(html);
}
setVisible(isOpen) {
if(isOpen==undefined) isOpen = true;
if(isOpen){
this.infoDiv.style.display = "block";
this.show = true;
}else{
this.infoDiv.style.display = "none";
this.show = false;
}
}
}
}