Cesium卷簾對比分析實現(xiàn)，也經(jīng)常應用在項目中，現(xiàn)闡述如下。

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.加載左側(cè)圖層

var layers = viewer.imageryLayers;

//arcgis圖層

var earthAtNight = layers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({

? ? ? ? ? url : 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'

? ? }));

//arcgis圖層設置在左側(cè)

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;

}

完整源代碼請訪問地址