roller.js
5.19 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
export default
class Roller {
constructor(viewer) {
let body = $('body');
this.initRollerShutter(viewer, {
splitDirection: new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE), // 初始时屏蔽左侧
verticalSplitPosition: body.width() / 2,
horizontalSplitPosition: body.height() / 2,
imageryLayers: [viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
key : 'AqYgyS1gIIDGsxmOlncqrgA83cHnhClLwZmIJXbYXX36pfxKYtUGk12Q3splaf4Y',
url : '//dev.virtualearth.net'
}))], // 参与卷帘的影像图层数组
latestSplitDirection: null // 用于在禁用卷帘后恢复之前的卷帘方向
});
}
initRollerShutter(a, b) {
this.setRollerShutterSplit(a, b);
this.bindSliderEvt(a, b);
}
setRollerShutterSplit(viewer, rollerShutterConfig) {
let splitPosition = null, imageryLayer, body = $("body");
if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
splitPosition = rollerShutterConfig.verticalSplitPosition;
} else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
splitPosition = rollerShutterConfig.horizontalSplitPosition;
}
for (imageryLayer of rollerShutterConfig.imageryLayers) {
imageryLayer.splitDirection = rollerShutterConfig.splitDirection;
}
if (splitPosition) { // 如果禁用卷帘就没有必要设置分割位置
if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
viewer.scene.imagerySplitPosition.x = splitPosition / body.width();
} else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) ||
rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
viewer.scene.imagerySplitPosition.y = splitPosition / body.height();
}
}
}
bindSliderEvt(viewer, rollerShutterConfig) {
let verticalSlider = document.getElementById('vertical-slider'); // 垂直分割条
let horizontalSlider = document.getElementById('horizontal-slider'); // 水平分割条
verticalSlider.addEventListener('mousedown', mouseDown, false);
horizontalSlider.addEventListener('mousedown', mouseDown, false);
let windowHeight = $('body').height();
let sliderMove = e => { // 鼠标拖拽时执行
// 解决拖拽鼠标粘滞的问题
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.LEFT, Cesium.ImagerySplitDirection.NONE)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.RIGHT, Cesium.ImagerySplitDirection.NONE))) {
verticalSlider.style.left = e.clientX + 'px';
rollerShutterConfig.verticalSplitPosition = e.clientX;
} else if (rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.TOP)) || rollerShutterConfig.splitDirection.equals(new Cesium.Cartesian2(Cesium.ImagerySplitDirection.NONE, Cesium.ImagerySplitDirection.BOTTOM))) {
let clientY = e.clientY;
if (clientY < 0) {
clientY = 0;
} else if (clientY > windowHeight) {
clientY = windowHeight - $('#horizontal-slider').height();
}
horizontalSlider.style.top = clientY + 'px';
rollerShutterConfig.horizontalSplitPosition = windowHeight - clientY;
}
this.setRollerShutterSplit(viewer, rollerShutterConfig);
}
document.addEventListener('mouseup', mouseUp, false);
function mouseUp(e) {
document.removeEventListener('mousemove', sliderMove, false);
}
function mouseDown(e) {
document.addEventListener('mousemove', sliderMove, false);
}
}
}