<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel='stylesheet' />
<script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
</head>
<style>
* {
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#slider {
position: absolute;
left: 50%;
top: 0px;
background-color: #d3d3d3;
width: 5px;
height: 100%;
z-index: 9999;
}
#slider:hover {
cursor: ew-resize;
}
.bmgl-widget-credits {
display: none;
}
</style>
<body>
<div id="container" class="fullSize">
<div id="slider"></div>
</div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar"></div>
</body>
<script>
bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
var viewer = new bmgl.Viewer("container", {
mapId: 'bigemap.dc-satellite',
requestRenderMode:false
});
var layers = viewer.imageryLayers;
var earthAtNight = layers.addImageryProvider(
new bmgl.BMImageryProvider({
mapId: 'bigemap.dc-map',
})
);
earthAtNight.splitDirection = bmgl.ImagerySplitDirection.LEFT; // Only show to the left of the slider.
// Sync the position of the slider with the split position
var slider = document.getElementById("slider");
viewer.scene.imagerySplitPosition =
slider.offsetLeft / slider.parentElement.offsetWidth;
var handler = new bmgl.ScreenSpaceEventHandler(slider);
var moveActive = false;
function move(movement) {
var relativeOffset = movement.endPosition.x;
var splitPosition =
(slider.offsetLeft + relativeOffset) /
slider.parentElement.offsetWidth;
slider.style.left = 100.0 * splitPosition + "%";
viewer.scene.imagerySplitPosition = splitPosition;
}
handler.setInputAction(function () {
moveActive = true;
}, bmgl.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function () {
moveActive = true;
}, bmgl.ScreenSpaceEventType.PINCH_START);
handler.setInputAction(move, bmgl.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(move, bmgl.ScreenSpaceEventType.PINCH_MOVE);
handler.setInputAction(function () {
moveActive = false;
}, bmgl.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function () {
moveActive = false;
}, bmgl.ScreenSpaceEventType.PINCH_END);
</script>
</html>