Cesium卷帘对比分析实现，也经常应用在项目中，现阐述如下。
1.定义viewer并加载高德地图作为底图
var viewer = new Cesium.Viewer("cesiumContainer", {
imageryProvider: new Cesium.UrlTemplateImageryProvider({ //加载高德地图
url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
minimumLevel: 3,
maximumLevel: 18
}),
baseLayerPicker: false,
infoBox: false,
});
2.加载左侧图层
var layers = viewer.imageryLayers;
//arcgis图层
var earthAtNight = layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
url : 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
}));
//arcgis图层设置在左侧
earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT;
3.设置图像拆分位置
var slider = document.getElementById("slider"); //获取DIV
viewer.scene.imagerySplitPosition =slider.offsetLeft/slider.parentElement.offsetWidth;
4.计算拆分
function move(movement) {
if (!moveActive) {
return;
}
var relativeOffset = movement.endPosition.x;
var splitPosition =
(slider.offsetLeft + relativeOffset) /
slider.parentElement.offsetWidth;
slider.style.left = 100.0 * splitPosition + "%";
viewer.scene.imagerySplitPosition = splitPosition;
}
完整源代码请访问地址
