Cesium|xt3d 兼容西部世界模型压平效果
效果
代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cesium|xt3d</title>
<!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
<script src="http://earthsdk.com/v/last/XbsjCesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cesium@1.84.0/Build/Cesium/Widgets/widgets.css">
<script src="http://earthsdk.com/v/last/XbsjEarth/XbsjEarth.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入xt3d -->
<script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.box span {
display: block;
margin-top: 10px;
}
.defultbtn {
display: inline-block;
text-align: center;
min-width: 60px;
height: 38px;
padding: 0 10px;
line-height: 38px;
border-radius: 100px;
border: 1px solid #C9C9C9;
background-color: #FFF;
color: #555;
cursor: pointer;
}
.defultbtn:hover {
background-color: #b3daf8;
}
.btnon {
background-color: #1E9FFF;
color: #fff;
border: 1px solid #1E9FFF;
}
</style>
</head>
<body>
<div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
<earth-comp></earth-comp>
</div>
<script>
//测试西部世界压平功能 其他功能可自行测试
// 1 创建Earth的vue组件
var EarthComp = {
template: `
<div style="width: 100%; height: 100%">
<div ref="earthContainer" style="width: 100%; height: 100%">
</div>
<div class="box" style="position: absolute; left: 98px; top: 18px; color: white; border-radius: 25px;min-width:200px; font-size:24px; font-family: 宋体;">
<div class="defultbtn" :class="{'btnon':polygonEditing}" @click="polygonEditing = !polygonEditing">多边形编辑</div>
</div>
</div>
`,
data() {
return {
polygonEditing: true,
_earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
};
},
// 1.1 资源创建
mounted() {
// 1.1.1 创建地球
var earth = new XE.Earth(this.$refs.earthContainer);
// 1.1.2 场景配置
earth.sceneTree.root = {
"children": [{
"czmObject": {
"name": "默认离线影像",
"xbsjType": "Imagery",
"xbsjImageryProvider": {
"createTileMapServiceImageryProvider": {
"url": 'http://earthsdk.com/v/last/Apps/Assets/Textures/NaturalEarthII',
"fileExtension": 'jpg',
},
"type": "createTileMapServiceImageryProvider"
}
}
}, {
"czmObject": {
"xbsjType": "Tileset",
"name": "三维瓦片1x",
"url": "http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json",
"xbsjFlattenGuid": "93916e9b-82dd-4a56-b15e-27303b08e781",
"xbsjClippingPlanes": {},
"skipLevelOfDetail": false
}
}, {
"czmObject": {
"xbsjType": "FlattenedPolygonCollection",
"xbsjGuid": "93916e9b-82dd-4a56-b15e-27303b08e781",
"name": "压平多边形组1",
"polygons": [{
"positions": [
1.9016970582304769, // 第一个点的经度，单位是弧度
0.5972442199495571, // 第一个点纬度，单位是弧度
1.901705173920893, // 第二个点的经度，单位是弧度
0.597244064486611, // 第二个点纬度，单位是弧度
1.9017051803683183,
0.5972514238789111,
1.90169684143085,
0.5972513210237236
],
"height": 426 // 高度
}]
}
}]
};
var tileset = earth.sceneTree.root.children[1].czmObject;
var flat = earth.sceneTree.root.children[2].czmObject;
flat.polygons[0].showHelper = false; // 是否开启线框显示，编辑状态下，不要开启，二者显示有影响
flat.polygons[0].editing = true; // 是否开启编辑状态
// 设置相机位置
// earth.camera.position.toString()和earth.camera.toAllJSONStr()这两个方法可获取相机位置
earth.camera.position = [1.901702007648937, 0.5972368795713086, 495.4360416207723];
earth.camera.rotation = [6.283185307179421, -0.7855047653582576, 6.283185307179586];
// 1.1.5 数据绑定
// disposers 用来收集资源销毁函数，并在析构时自动调用！
{
this._disposers = [];
this._disposers.push(XE.MVVM.bind(this, 'polygonEditing', flat.polygons[0], 'editing'));
}
this._earth = earth;
// only for Debug
window.earth = earth;
window.tileset = tileset;
let viewer = earth.czm.viewer;
//创建xt3d对象 只需拿到viewer对象即可
initXT3dObject(viewer);
},
// 1.2 资源销毁
beforeDestroy() {
// vue程序销毁时，需要清理相关资源
this._earth = this._earth && this._earth.destroy();
this._disposers.forEach(d => d());
this._disposers.length = 0;
},
}
// 2 创建vue程序
// XE.ready()用来加载Cesium.js等相关资源
XE.ready().then(() => {
var app = new Vue({
el: '#vueApp',
components: {
EarthComp,
},
});
});
function initXT3dObject(viewer) {
let position = Cesium.Cartesian3.fromDegrees(108.95941621110282, 34.219778688269066, 426.0398065050199);
let wall = new xt3d.WallObject.CircleWall(viewer, position, {
radius: 100,
wallHeight: 30,
materialType: xt3d.WallObject.MaterialTypes.LINEFLOW,
wallColor: Cesium.Color.GREEN
});
}
</script>
</body>
</html>
预览地址
xt3d 在线预览地址