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条评论!
可以可以!