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

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/[email protected]/Build/Cesium/Widgets/widgets.css">
    <script src="http://earthsdk.com/v/last/XbsjEarth/XbsjEarth.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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: `
                
多边形编辑
`
, 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 在线预览地址

你可能感兴趣的:(cesium,xt3d,cesium,xt3d)