原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=SplitDirection.html&label=All

效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
  @import url(../templates/bucket.css);

  #slider {
    position: absolute;
    left: 50%;
    top: 0px;
    background-color: #d3d3d3;
    width: 5px;
    height: 100%;
    z-index: 9999;
  }

  #slider:hover {
    cursor: ew-resize;
  }
</style>
<div id="cesiumContainer" class="fullSize">
  <div id="slider"></div>
</div>
<div id="loadingOverlay">
  <h1>加载中...</h1>
</div>
<div id="toolbar"></div>
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
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  sceneModePicker: false,
  baseLayerPicker: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const points = viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
const billboards = viewer.scene.primitives.add(new Cesium.BillboardCollection());

function testPoints() {
  Sandcastle.declare(testPoints);

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.0, 40.0),
    point: {
      show: true,
      color: Cesium.Color.SKYBLUE,
      pixelSize: 10,
      outlineColor: Cesium.Color.GREEN,
      outlineWidth: 3,
      splitDirection: Cesium.SplitDirection.LEFT,
    },
  });

  points.add({
    position: new Cesium.Cartesian3.fromDegrees(-75, 35),
    color: Cesium.Color.RED,
    splitDirection: Cesium.SplitDirection.RIGHT,
  });
  points.add({
    position: new Cesium.Cartesian3.fromDegrees(-125, 35),
    color: Cesium.Color.WHITE,
    splitDirection: Cesium.SplitDirection.NONE,
  });
  points.add({
    position: new Cesium.Cartesian3.fromDegrees(-100, 20),
    color: Cesium.Color.YELLOW,
    splitDirection: Cesium.SplitDirection.LEFT,
  });
}

function testBillboards() {
  Sandcastle.declare(testBillboards);

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.0, 50.0),
    billboard: {
      show: true,
      image: "../images/facility.gif",
      pixelSize: 100,
      splitDirection: Cesium.SplitDirection.LEFT,
    },
  });

  billboards.add({
    position: new Cesium.Cartesian3.fromDegrees(-75, 35),
    image: "../images/facility.gif",
    splitDirection: Cesium.SplitDirection.RIGHT,
  });
  billboards.add({
    position: new Cesium.Cartesian3.fromDegrees(-125, 35),
    image: "../images/facility.gif",
    splitDirection: Cesium.SplitDirection.NONE,
  });
  billboards.add({
    position: new Cesium.Cartesian3.fromDegrees(-100, 20),
    image: "../images/Cesium_Logo_overlay.png",
    splitDirection: Cesium.SplitDirection.LEFT,
  });
}

// 实现滑块（slider）的拖动交互，动态调整场景的分割位置。
const slider = document.getElementById("slider");
viewer.scene.splitPosition = slider.offsetLeft / slider.parentElement.offsetWidth;

const handler = new Cesium.ScreenSpaceEventHandler(slider);

let moveActive = false;

function move(movement) {
  if (!moveActive) {
    return;
  }
  const relativeOffset = movement.endPosition.x;
  const splitPosition =
    (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
  slider.style.left = `${100.0 * splitPosition}%`;
  viewer.scene.splitPosition = splitPosition;
}

// 鼠标按下或触摸开始，激活拖动
handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
  moveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);

// 鼠标移动或触摸移动，则调用move函数，更新滑块位置和splitPosition
handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

// 鼠标释放或者触摸结束，则停止拖动
handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
  moveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);

Sandcastle.addToolbarMenu([
  {
    text: "点要素们",
    onselect: function () {
      testPoints();
      Sandcastle.highlight(testPoints);
    },
  },
  {
    text: "广告牌们",
    onselect: function () {
      testBillboards();
      Sandcastle.highlight(testBillboards);
    },
  },
]);

Sandcastle.reset = function () {
  viewer.entities.removeAll();
  points.removeAll();
  billboards.removeAll();
};