Cesium 自定义二三维切换按钮(工作记录)

有时我们不想用cesium自带的那个二三维切换,想自己写切换按钮,通过给按钮绑定事件,然后触发切换;

以下是示例


<!DOCTYPE html>
<head>
    <title>2d,3d转换</title>
	<style>
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
		}
		li{
		    list-style:none;
		    padding:5px 10px;
		    border:1px solid #fff;
		    color:#fff;
		    margin-top:10px;
		    cursor:pointer;
		}
		#btn{
		    position:fixed;
		    top:20px;
		    left:20px;
		    
		}
    </style>
    <script src="./js/jquery.min.js"></script>
</head>
<body>
<!--
	描述:cesium球
-->
<div id="cesiumContainer"></div>
<div id="btn">
    <li class="cesium_2d">2维</li>
    <li class="cesium_3d">3维</li>
    <li class="cesium_view">哥伦布视图</li>
</div>
<script type="module">
    var tk = "74a092e3e31bc7f89edcac92296653be";  //天地图token
	import {EC} from '../3d/EC.js';
	new EC.load('A',()=>{
		let earth = new EC.Earth("cesiumContainer",{ 
			skyBox : EC.TAG.SKYBOX.customStyle()
		})
        //	earth.core  等同于 Viewer
		earth.core.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk="+tk,
            layer: "tdtImgAnnoLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        }));
        
        window.earth = earth;
        
        
        
	});

	
	
// 	earth.core.scene.morphTo2D(1)  //二维
// 	earth.core.scene.morphTo3D(1)  //三维
// 	earth.core.scene.morphToColumbusView(1)  //哥伦布视图
	
</script>
<script>
console.log($)
	$('.cesium_2d').click(function(){
	    window.earth.core.scene.morphTo2D(1)  //二维
	})
	$('.cesium_3d').click(function(){
	    window.earth.core.scene.morphTo3D(1)  //二维
	});
	$('.cesium_view').click(function(){
	    window.earth.core.scene.morphToColumbusView(1)  //二维
	})
</script>
	
</body>

 

示例地址:http://www.htmlbox.cc/demo//examples/editor.html#cesium_2dto3d  (2d转3d)

点击查看所有示例集合

转载请务必注明出处,欢迎分享

地图开发 2019-02-05 17:29:10 通过 网页 浏览(1069)

共有1条评论!

  1. 匿名网友 2021-09-26 15:27:01 1#

    可以可以!

发表评论