标签：disposers viewer 压平 xt3d ._ Cesium earth
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>
预览地址
标签：disposers,viewer,压平,xt3d,._,Cesium,earth 来源： https://blog.csdn.net/xietao20/article/details/120693155
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。