cesium-卷帘效果
cesium-卷帘效果
使用“卷帘图层”工具以交互方式显示被卷帘图层下方的图层。使用此工具可轻松地查看某特定图层下面的内容，而无需在内容列表中关闭该图层。
核心代码
/*** 卷帘*/addJuanlian(){let viewer = this._viewer;let layers = viewer.imageryLayers;if(this.anthorLayer){layers.remove(this.anthorLayer)}//天地图tokenlet TDT_tk = "tdt_token";//天地图影像let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;this.anthorLayer = layers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: TDT_IMG_C,layer: "tdtImg_c",style: "default",format: "tiles",tileMatrixSetID: "c",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],maximumLevel: 50,show: false}));let balckMarble = this.anthorLayer;balckMarble.splitDirection = Cesium.ImagerySplitDirection.LEFT;let slider = document.getElementById('juanlian');slider.style.display = 'block';viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;let handler = new Cesium.ScreenSpaceEventHandler(slider);let moveActive = false;function move(movement) {if(!moveActive) {return;}let relativeOffset = movement.endPosition.x ;let 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);},
完整代码
DOCTYPE html>
<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"/><title>cesium-天气效果title><script src="../lib/Cesium-1.89/Build/Cesium/Cesium.js">script><script src="../../static/lib/vue.min.js">script><script src="../../static/lib/snow.js">script><script src="../../static/lib/rain.js">script><script src="../../static/lib/fog.js">script><style>@import url(../lib/Cesium-1.89/Build/Cesium/Widgets/widgets.css);html,body, #temp {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#juanlian {position: absolute;left: 50%;top: 0;background-color: #D3D3D3;width: 5px;height: 100%;z-index: 9999;display: none;}#juanlian:hover {cursor: ew-resize;}style>
head>
<body>
<div id="temp"><div style="display: -webkit-flex;display: flex;width: 100%;height: 100%"><div style="width: 90%;height: 100%"><div id="cesiumContainer"><div id="juanlian">div>div>div><div style="width: 10%;height: 100%;background-color: #d3d3d3;padding: 30px"><button class="btn" @click="addJuanlian">卷帘button><button class="btn" @click="removeJuanlian">移除卷帘button>div>div>
div>
<script>let EarthComp = new Vue({el: "#temp",data: {_viewer: undefined,snow:null,//雪rain:null,//雨fog:null,//雾},mounted: function () {let that = this;this.earthInit();},methods: {/*** 地球初始化*/earthInit() {//天地图tokenlet TDT_tk = "tdt_token";//Cesium tokenlet cesium_tk = "token";//标注let TDT_CIA_C = "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;// 添加mapbox自定义地图实例let layer = new Cesium.MapboxStyleImageryProvider({url: 'https://api.mapbox.com/styles/v1',username: 'sungang',styleId: 'cky44gl8m0rwn15pqt8ovyhrs',accessToken: 'pk.eyJ1Ijoic3VuZ2FuZyIsImEiOiJja2VqaW5rbWwwdWc2MnlwaGVrMnBhbnRuIn0.UlFQNpPyJjiYfETSNo5Zkg',scaleFactor: true});//初始页面加载Cesium.Ion.defaultAccessToken = cesium_tk;let viewer = new Cesium.Viewer('cesiumContainer', {geocoder: false, // 位置查找工具baseLayerPicker: false,// 图层选择器（地形影像服务）timeline: false, // 底部时间线homeButton: false,// 视角返回初始位置fullscreenButton: false, // 全屏animation: false, // 左下角仪表盘（动画器件）sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）navigationHelpButton: false, //导航帮助按钮imageryProvider: layer});//调用影响中文注记服务viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: TDT_CIA_C,layer: "tdtImg_c",style: "default",format: "tiles",tileMatrixSetID: "c",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],maximumLevel: 50,show: false}))this._viewer = viewer;// 去除版权信息this._viewer._cesiumWidget._creditContainer.style.display = "none";},/*** 卷帘*/addJuanlian(){let viewer = this._viewer;let layers = viewer.imageryLayers;if(this.anthorLayer){layers.remove(this.anthorLayer)}//天地图tokenlet TDT_tk = "tdt_token";//天地图影像let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;this.anthorLayer = layers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: TDT_IMG_C,layer: "tdtImg_c",style: "default",format: "tiles",tileMatrixSetID: "c",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],maximumLevel: 50,show: false}));let balckMarble = this.anthorLayer;balckMarble.splitDirection = Cesium.ImagerySplitDirection.LEFT;let slider = document.getElementById('juanlian');slider.style.display = 'block';viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;let handler = new Cesium.ScreenSpaceEventHandler(slider);let moveActive = false;function move(movement) {if(!moveActive) {return;}let relativeOffset = movement.endPosition.x ;let 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);},/*** 移除卷帘*/removeJuanlian(){let slider = document.getElementById('juanlian');slider.style.display = 'none';let layers = this._viewer.imageryLayers;layers.remove(this.anthorLayer);},},})
script>
body>
html>
实现效果
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！