cesium卷帘对比
该功能在cesium官网上有
官网示例：https://sandcastle.cesium.com/?src=Imagery%20Layers%20Split.html
记得把js和css的地址换成自己的
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /><meta name="description" content="Use the split property to only show layers on one side of a slider."><meta name="cesium-sandcastle-labels" content="Beginner, Tutorials, Showcases"><title>Cesium Demotitle><script type="text/javascript" src="../Sandcastle-header.js">script><script type="text/javascript" src="../CesiumUnminified/Cesium.js">script>head><body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html"><style>@import url(../templates/bucket.css);#slider {position: absolute;left: 50%;top: 0px;background-color: #d3d3d3;width: 5px;height: 100%;z-index: 9999;}#slider:hover {cursor: ew-resize;}style><div id="cesiumContainer" class="fullSize"><div id="slider">div>div><div id="loadingOverlay"><h1>Loading...h1>div><div id="toolbar">div><script id="cesium_sandcastle_script">function startup(Cesium) {'use strict';//Sandcastle_Beginconst viewer = new Cesium.Viewer("cesiumContainer", {imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url:"https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",}),baseLayerPicker: false,infoBox: false,});const layers = viewer.imageryLayers;const earthAtNight = layers.addImageryProvider(//这也是一种加载地图的方式,但是在国内网络限制,未必能加载出来// new Cesium.IonImageryProvider({ assetId: 3812 })new Cesium.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}));earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.// Sync the position of the slider with the split positionconst slider = document.getElementById("slider");viewer.scene.imagerySplitPosition =slider.offsetLeft / slider.parentElement.offsetWidth;const handler = new Cesium.ScreenSpaceEventHandler(slider);let moveActive = false;function move(movement) {if (!moveActive) {return;}const relativeOffset = movement.endPosition.x;const splitPosition =(slider.offsetLeft + relativeOffset) /slider.parentElement.offsetWidth;slider.style.left = `${100.0 * splitPosition}%`;viewer.scene.imagerySplitPosition = splitPosition;}handler.setInputAction(function () {moveActive = true;}, Cesium.ScreenSpaceEventType.LEFT_DOWN);handler.setInputAction(function () {moveActive = true;}, Cesium.ScreenSpaceEventType.PINCH_START);handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);handler.setInputAction(function () {moveActive = false;}, Cesium.ScreenSpaceEventType.LEFT_UP);handler.setInputAction(function () {moveActive = false;}, Cesium.ScreenSpaceEventType.PINCH_END);//Sandcastle_EndSandcastle.finishedLoading();}if (typeof Cesium !== 'undefined') {window.startupCalled = true;startup(Cesium);}script>
body>html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！