85 lines
2.6 KiB
HTML
85 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>LocalImage</title>
|
|
<link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
|
<script type="text/javascript" src="./js/require.min.js" data-main="./js/main"></script>
|
|
<style>
|
|
html, body, #cesiumContainer {
|
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
|
}
|
|
#slider {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0px;
|
|
background-color: #D3D3D3;
|
|
width: 4px;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
#slider:hover {
|
|
cursor: ew-resize;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="cesiumContainer" class="fullSize">
|
|
<div id="slider"></div>
|
|
</div>
|
|
<script>
|
|
function onload(Cesium) {
|
|
var viewer = new Cesium.Viewer('cesiumContainer', {
|
|
skyBox : false,
|
|
skyAtmosphere : false,
|
|
baseLayerPicker : false,
|
|
imageryProvider :new Cesium.SingleTileImageryProvider({
|
|
url : './images/2016c.jpg'
|
|
})
|
|
});
|
|
|
|
var layers = viewer.imageryLayers;
|
|
var blackMarble = layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
|
|
url : './images/2012c.jpg'
|
|
}),1);
|
|
blackMarble.splitDirection = Cesium.ImagerySplitDirection.RIGHT;
|
|
|
|
var slider = document.getElementById('slider');
|
|
viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;
|
|
|
|
var handler = new Cesium.ScreenSpaceEventHandler(slider);
|
|
|
|
var bMoveActive = false;
|
|
|
|
function move(movement){
|
|
if(!bMoveActive)
|
|
return;
|
|
|
|
var nMove = movement.endPosition.x ;//- movement.startPosition.x;
|
|
var splitPosition = (slider.offsetLeft + nMove) / slider.parentElement.offsetWidth;
|
|
slider.style.left = 100.0 * splitPosition + "%";
|
|
viewer.scene.imagerySplitPosition = splitPosition;
|
|
}
|
|
|
|
handler.setInputAction(function(movement) {
|
|
bMoveActive = true;
|
|
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
|
|
handler.setInputAction(function(movement) {
|
|
bMoveActive = true;
|
|
}, Cesium.ScreenSpaceEventType.PINCH_START);
|
|
|
|
handler.setInputAction(function(movement) {
|
|
move(movement);
|
|
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
handler.setInputAction(function(movement) {
|
|
move(movement);
|
|
}, Cesium.ScreenSpaceEventType.PINCH_MOVE);
|
|
|
|
handler.setInputAction(function(movement) {
|
|
bMoveActive = false;
|
|
}, Cesium.ScreenSpaceEventType.LEFT_UP);
|
|
handler.setInputAction(function(movement) {
|
|
bMoveActive = false;
|
|
}, Cesium.ScreenSpaceEventType.PINCH_END);
|
|
};
|
|
</script>
|
|
</body> |