Cesium卷帘对比（含源代码）

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;

}

完整源代码请访问地址