效果

代码

 <!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 Debugwindow.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 在线预览地址

Cesium|xt3d 兼容西部世界模型压平效果相关推荐

Cesium|xt3d gltf标绘绘制编辑
Cesium|xt3d gltf标绘绘制编辑效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN">< ...
Cesium|xt3d模型展开动画
Cesium|xt3d模型展开动画效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
大模型已涌现社会行为，斯坦福爆火论文打造《西部世界》雏形
源|机器之心 <西部世界>的游戏逐渐走进现实. 我们能否创造一个世界?在那个世界里,机器人能够像人类一样生活.工作.社交,去复刻人类社会的方方面面. 这种想象,曾在影视作品<西部世界 ...
Cesium|xt3d 光柱椎体（粒子效果）
Cesium|xt3d 实例名称效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head& ...
Cesium|xt3d 雷达追踪圆锥体
Cesium|xt3d 雷达追踪圆锥体效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><he ...
炸裂，AI 打造了一个西部世界！
大家好,我是程序员小灰. 今天继续分享几个看到的,非常不错的 AI 项目. 如果感觉,项目更新太快,学不动了! 别慌,收藏等于学会. 一.PAniC-3D Stable Diffusion 刚火的时 ...
图灵奖得主杨立昆：GPT模式五年就不会有人用了，世界模型才是AGI未来
本文经授权转自公众号腾讯科技(ID:qqtech) 2023年6月9日的北京智源大会上开幕式上,机器学习三巨头之一杨立昆(Yann Lecun)进行了远程致辞,发表了名为<朝向能学习, 思考和计 ...
杨强教授第四范式内部分享：漫谈《西部世界》、GAN及迁移学习
本文来自AI新媒体量子位(QbitAI) 以下内容根据杨强教授演讲编写,略微有所删减. 有些人看过电视剧<西部世界>-在<西部世界>里,你可能问的一个关键问题是什么?就是当剧中 ...
科学式家｜杨强教授漫谈《西部世界》、生成式对抗网络及迁移学习
「范式大学」由第四范式发起,致力于成为"数据科学家"的黄埔军校,校长为第四范式首席科学家,华人界首个国际人工智能协会AAAI Fellow.唯一的AAAI 华人执委杨强教授. ［范 ...
Meta祭出元宇宙「阿拉丁神灯」！LeCun称世界模型将带来像人一样的AI
视学算法报道编辑:桃子好困袁榭拉燕 [新智元导读]2022年2月24日凌晨,在Meta AI实验室讨论会上,小扎亲自带队公布了多项技术内容:语音生成元宇宙场景的Builder Bot. ...

Cesium|xt3d 兼容西部世界模型压平效果

Cesium|xt3d 兼容西部世界模型压平效果

效果

代码

预览地址

Cesium|xt3d 兼容西部世界模型压平效果相关推荐

最新文章

热门文章