cesium实现卷帘分屏效果 |
您所在的位置：网站首页 › 传送门2分屏 › cesium实现卷帘分屏效果 |
cesium实现卷帘分屏效果
|
文章目录
1.实现效果2.实现方法2.1实现思路2.2具体代码
Cesium实战系列文章总目录：
传送门
1.实现效果
参考官方沙盒分屏示例：传送门 为实现卷帘分屏效果，思路是添加两个图层，底图全部显示，而上层图层控制只在左侧显示。 （1）设置图层分区显示 通过ImageryLayer的splitDirection属性可以设置当前图层的显示区域，API：传送门 可以设置当前图层在左侧，右侧还是全图显示。 （1）创建分屏线div 首先需要创建竖直的分屏线，可以通过设置div的样式实现。 // 创建div // 设置样式 #split { position: absolute; left: 50%; top: 0; background-color: red; width: 3px; height: 100%; }（2）创建地图viewer，并添加图层，这里的两个图层使用默认必应底图和OSM在线暗色风格地图。 const viewer = new Cesium.Viewer("cesiumContainer"); // 加载OSM在线地图（黑色风格） const layerLeft = viewer.imageryLayers.addImageryProvider( new Cesium.UrlTemplateImageryProvider({ url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png", subdomains: ["a", "b", "c", "d"], }) );（3）设置图层分屏显示与分屏位置 通过分屏线与屏幕左侧偏移量和其父div宽度的比值作为图层左右分屏的比值，即左侧地图显示占全图的比例。 // 设置分屏显示 layerLeft.splitDirection = Cesium.ImagerySplitDirection.LEFT; // 设置分屏位置 const split = document.getElementById("split"); viewer.scene.imagerySplitPosition = split.offsetLeft / split.parentElement.offsetWidth; |
（2）设置分区位置 通过scene类的imagerySplitPosition属性进行设置，API：传送门 
【本文地址】
今日新闻 |
推荐新闻 |