├── readme.md
├── Cesium的Property机制总结
    ├── readme.md
    ├── images
    │   ├── 1.gif
    │   ├── 2.gif
    │   ├── 3.gif
    │   ├── 4.gif
    │   ├── 5.gif
    │   ├── 6.gif
    │   ├── 7.gif
    │   └── 8.gif
    └── 源码
    │   └── sample1.js
├── 解决Cesium1.50对gltf2.0 3dtiles数据读取的问题
    ├── readme.md
    └── 源码
    │   └── fixGltf.js
├── Cesium1.53测评
    └── 用来替代Cesium自身的环境贴图
    │   └── vtxf-envirment.ktx
└── Temp
    ├── measurement.html
    ├── imageryCorrection.html
    └── clippingPlane.html


/readme.md:
--------------------------------------------------------------------------------
1 | 文章在这里：https://www.jianshu.com/c/c423df2ea4f3


--------------------------------------------------------------------------------
/Cesium的Property机制总结/readme.md:
--------------------------------------------------------------------------------
1 | 文章在这里：https://www.jianshu.com/p/f0b47997224c


--------------------------------------------------------------------------------
/解决Cesium1.50对gltf2.0 3dtiles数据读取的问题/readme.md:
--------------------------------------------------------------------------------
1 | https://www.jianshu.com/p/e0e0a62c5726


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/1.gif


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/2.gif


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/3.gif


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/4.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/4.gif


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/5.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/5.gif


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/6.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/6.gif


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/7.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/7.gif


--------------------------------------------------------------------------------
/Cesium的Property机制总结/images/8.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium的Property机制总结/images/8.gif


--------------------------------------------------------------------------------
/Cesium1.53测评/用来替代Cesium自身的环境贴图/vtxf-envirment.ktx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vtxf/cesium-notes/HEAD/Cesium1.53测评/用来替代Cesium自身的环境贴图/vtxf-envirment.ktx


--------------------------------------------------------------------------------
/解决Cesium1.50对gltf2.0 3dtiles数据读取的问题/源码/fixGltf.js:
--------------------------------------------------------------------------------
 1 | // 说明文章在这里：
 2 | // https://zhuanlan.zhihu.com/p/46189487
 3 | // https://www.jianshu.com/p/e0e0a62c5726
 4 | 
 5 | var fixGltf = function(gltf) {
 6 |     if (!gltf.extensionsUsed) {
 7 |         return;
 8 |     }
 9 | 
10 |     var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl');
11 |     var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl');
12 |     // 中招了。。
13 |     if (v !== -1) {
14 |         gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl');
15 |         gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl');
16 |         gltf.extensions = gltf.extensions || {};
17 |         gltf.extensions['KHR_techniques_webgl'] = {};
18 |         gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs;
19 |         gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders;
20 |         gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques;
21 |         var techniques = gltf.extensions['KHR_techniques_webgl'].techniques;
22 | 
23 |         gltf.materials.forEach(function (mat, index) {
24 |             gltf.materials[index].extensions || (gltf.materials[index].extensions = {KHR_technique_webgl: {}}); // vtxf 181025
25 |             gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values;
26 |             gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl'];
27 | 
28 |             var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl'];
29 |             vtxfMaterialExtension.technique || (vtxfMaterialExtension.technique = gltf.materials[index].technique); // vtxf 181025
30 | 
31 |             
32 |             for (var value in vtxfMaterialExtension.values) {
33 |                 var us = techniques[vtxfMaterialExtension.technique].uniforms;
34 |                 for (var key in us) {
35 |                     if (us[key] === value) {
36 |                         vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value];
37 |                         delete vtxfMaterialExtension.values[value];
38 |                         break;
39 |                     }
40 |                 }
41 |             };
42 |         });
43 | 
44 |         techniques.forEach(function (t) {
45 |             for (var attribute in t.attributes) {
46 |                 var name = t.attributes[attribute];
47 |                 t.attributes[attribute] = t.parameters[name];
48 |             };
49 | 
50 |             for (var uniform in t.uniforms) {
51 |                 var name = t.uniforms[uniform];
52 |                 t.uniforms[uniform] = t.parameters[name];
53 |             };
54 |         });
55 |     }
56 | }
57 | 
58 | Object.defineProperties(Cesium.Model.prototype, {
59 |     _cachedGltf: {
60 |         set: function (value) {
61 |             this._vtxf_cachedGltf = value;
62 |             if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) {
63 |                 fixGltf(this._vtxf_cachedGltf._gltf);
64 |             }
65 |         },
66 |         get: function () {
67 |             return this._vtxf_cachedGltf;
68 |         }
69 |     }
70 | });


--------------------------------------------------------------------------------
/Temp/measurement.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <meta name="xbsj-labels" content="Earth示例"></meta>
  9 |     <title>测量</title>
 10 |     <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
 11 |     <script src="../../XbsjEarth/XbsjEarth.js"></script>
 12 |     <script src="./scripts/vue.min.js"></script>
 13 |     <style>
 14 |         html,
 15 |         body {
 16 |             width: 100%;
 17 |             height: 100%;
 18 |             margin: 0px;
 19 |             padding: 0px;
 20 |         }
 21 | 
 22 |         .checkbox {
 23 |             cursor: pointer;
 24 |         }
 25 |     </style>
 26 | </head>
 27 | 
 28 | <body>
 29 |     <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
 30 |         <earth-comp></earth-comp>
 31 |     </div>
 32 | 
 33 |     <script>
 34 |         // 1 创建Earth的vue组件
 35 |         var EarthComp = {
 36 |             template: `
 37 |                 <div style="width: 100%; height: 100%">
 38 |                     <div ref="earthContainer" style="width: 100%; height: 100%">
 39 |                     </div>
 40 |                     <div style="height: 30px; line-height: 30px; padding-left: 5px; position: absolute; left: 10px; top: 10px;">
 41 |                         <button @click="measureMentType = 'POINT'">位置测量</button>
 42 |                         <button @click="measureMentType = 'SPACE_DISTANCE'">距离测量</button>
 43 |                         <button @click="measureMentType = 'TRIANGLE_DISTANCE'">三角测量</button>
 44 |                         <button @click="measureMentType = 'SPACE_AREA'">面积测量</button>
 45 |                         <button @click="clearResults">清空测量结果</button>
 46 |                     </div>
 47 |                 </div>
 48 |             `,
 49 | 
 50 |             data() {
 51 |                 return {
 52 |                     measureMentType: 'NONE',
 53 |                     _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
 54 |                 };
 55 |             },
 56 |             // 1.1 资源创建
 57 |             mounted() {
 58 |                 // 1.1.1 创建地球
 59 |                 var earth = new XE.Earth(this.$refs.earthContainer);
 60 | 
 61 |                 // 1.1.2 场景配置
 62 |                 earth.sceneTree.root = {
 63 |                     "expand": true,
 64 |                     "title": "预览场景",
 65 |                     "children": [{
 66 |                         "czmObject": {
 67 |                             "name": '大雁塔',
 68 |                             "xbsjType": "Tileset",
 69 |                             "url": '../assets/dayanta/tileset.json',
 70 |                             "xbsjUseOriginTransform": false,                    
 71 |                         },
 72 |                     }, {
 73 |                         "czmObject": {
 74 |                             "name": '默认影像',
 75 |                             "xbsjType": "Imagery",
 76 |                             "xbsjImageryProvider": XE.Obj.Imagery.defaultImageryProviderConfig,
 77 |                         },
 78 |                     }]
 79 |                 };
 80 | 
 81 |                 var tileset1 = earth.sceneTree.root.children[0].czmObject;
 82 |                 var tileset2 = earth.sceneTree.root.children[1].czmObject;
 83 |                 window.tileset1 = tileset1;
 84 |                 window.tileset2 = tileset2;
 85 | 
 86 |                 // 1.1.5 数据绑定
 87 |                 {
 88 |                     this._disposers = [];
 89 |                     this._disposers.push(XE.MVVM.bind(this, 'measureMentType', earth.analyzation.measurement, 'type'));
 90 | 
 91 |                     this._disposers.push(XE.MVVM.watch(tileset1, 'ready', ready => {
 92 |                         if (ready) {
 93 |                             tileset1.flyTo();
 94 |                         }
 95 |                     }));
 96 |                 }
 97 | 
 98 |                 this._earth = earth;
 99 |             },
100 |             // 1.2 资源销毁
101 |             beforeDestroy() {
102 |                 // vue程序销毁时，需要清理相关资源
103 |                 this._earth = this._earth && this._earth.destroy();
104 |                 this._disposers.forEach(d => d());
105 |                 this._disposers.length = 0;
106 |             },
107 |             methods: {
108 |                 clearResults() {
109 |                     this._earth && this._earth.analyzation.measurement.clearResults();
110 |                 }
111 |             }
112 |         }
113 | 
114 |         // 2 创建vue程序
115 |         // XE.ready()用来加载Cesium.js等相关资源
116 |         XE.ready().then(() => {
117 |             var app = new Vue({
118 |                 el: '#vueApp',
119 |                 components: {
120 |                     EarthComp,
121 |                 },
122 |             });
123 |         });
124 |     </script>
125 | </body>
126 | 
127 | </html>
128 | 


--------------------------------------------------------------------------------
/Temp/imageryCorrection.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <meta name="xbsj-labels" content="Earth示例">
  9 |     </meta>
 10 |     <title>影像纠偏</title>
 11 |     <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
 12 |     <script src="../../XbsjEarth/XbsjEarth.js"></script>
 13 |     <script src="./scripts/vue.min.js"></script>
 14 |     <style>
 15 |         html,
 16 |         body {
 17 |             width: 100%;
 18 |             height: 100%;
 19 |             margin: 0px;
 20 |             padding: 0px;
 21 |         }
 22 | 
 23 |         .checkbox {
 24 |             cursor: pointer;
 25 |         }
 26 |     </style>
 27 | </head>
 28 | 
 29 | <body>
 30 |     <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
 31 |         <earth-comp></earth-comp>
 32 |     </div>
 33 | 
 34 |     <script>
 35 |         // 1 创建Earth的vue组件
 36 |         var EarthComp = {
 37 |             template: `
 38 |                 <div style="width: 100%; height: 100%">
 39 |                     <div ref="earthContainer" style="width: 100%; height: 100%">
 40 |                     </div>
 41 |                     <div style="line-height: 30px; padding: 5px; position: absolute; left: 10px; top: 10px; background: rgba(0, 0, 0, 0.5); color: white">
 42 |                         <span @click="correct = !correct" class="checkbox"><input type="checkbox" v-model="correct">纠偏</span><br/>
 43 |                         <button @click="goTo">定位</button><br/>
 44 |                     </div>
 45 |                 </div>
 46 |             `,
 47 | 
 48 |             data() {
 49 |                 return {
 50 |                     dstCoordType: 'WGS84',
 51 |                     correct: true,
 52 |                     _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
 53 |                 };
 54 |             },
 55 |             // 1.1 资源创建
 56 |             mounted() {
 57 |                 // 1.1.1 创建地球
 58 |                 var earth = new XE.Earth(this.$refs.earthContainer);
 59 | 
 60 |                 // 1.1.2 场景配置
 61 |                 earth.sceneTree.root = {
 62 |                     "expand": true,
 63 |                     "title": "预览场景",
 64 |                     "children": [{
 65 |                         "czmObject": {
 66 |                             "name": '大雁塔',
 67 |                             "xbsjType": "Tileset",
 68 |                             "url": '../assets/dayanta/tileset.json',
 69 |                             "xbsjPosition": [
 70 |                                 1.9016974701882112,
 71 |                                 0.5972325152147303,
 72 |                                 8.352576160356152
 73 |                             ],                            
 74 |                             "xbsjUseOriginTransform": false,
 75 |                         },
 76 |                     }, {
 77 |                         "ref": "imagery",
 78 |                         "czmObject": {
 79 |                             "xbsjType": "Imagery",
 80 |                             "name": "高德地图",
 81 |                             "xbsjImageryProvider": {
 82 |                                 "XbsjImageryProvider": {
 83 |                                     "url": "http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
 84 |                                     "srcCoordType": "GCJ02",
 85 |                                     "dstCoordType": "WGS84",
 86 |                                     "rectangle": [
 87 |                                         -3.141592653589793,
 88 |                                         -1.5707963267948966,
 89 |                                         3.141592653589793,
 90 |                                         1.5707963267948966
 91 |                                     ]
 92 |                                 },
 93 |                             }
 94 |                         },
 95 |                     }]
 96 |                 };
 97 | 
 98 |                 // var imagery = earth.sceneTree.$refs.imagery.czmObject; 
 99 |                 var imagery = earth.sceneTree.root.children[1].czmObject;
100 |                 this._imagery = imagery;
101 |                 var tileset1 = earth.sceneTree.root.children[0].czmObject;
102 |                 window.tileset1 = tileset1;
103 | 
104 |                 this._earth = earth;
105 | 
106 |                 // 1.1.5 数据绑定
107 |                 {
108 |                     this._disposers = [];
109 |                     this._disposers.push(XE.MVVM.bind(this, 'dstCoordType', imagery.xbsjImageryProvider.XbsjImageryProvider, 'dstCoordType'));
110 | 
111 |                     this.goTo();
112 |                 }
113 |             },
114 |             // 1.2 资源销毁
115 |             beforeDestroy() {
116 |                 // vue程序销毁时，需要清理相关资源
117 |                 this._earth = this._earth && this._earth.destroy();
118 |                 this._disposers.forEach(d => d());
119 |                 this._disposers.length = 0;
120 |             },
121 |             methods: {
122 |                 setPositionWithCurrentCamera() {
123 |                     this._viewshed && this._viewshed.setPositionWithCurrentCamera();
124 |                 },
125 |                 goTo() {
126 |                     this._earth.czm.viewer.camera.setView({
127 |                         destination: Cesium.Cartesian3.fromRadians(1.901700720490395, 0.5972088628888674, 479.1014955453072),
128 |                         orientation: {
129 |                             heading: 6.265266391676448,
130 |                             pitch: -1.4855510600618218,
131 |                             roll: 0.0,
132 |                         }
133 |                     });
134 |                 }
135 |             },
136 |             watch: {
137 |                 correct(newVal) {
138 |                     if (newVal) {
139 |                         this.dstCoordType = 'WGS84';
140 |                     } else {
141 |                         this.dstCoordType = 'GCJ02';
142 |                     }
143 |                 }
144 |             }
145 |         }
146 | 
147 |         // 2 创建vue程序
148 |         // XE.ready()用来加载Cesium.js等相关资源
149 |         XE.ready().then(() => {
150 |             var app = new Vue({
151 |                 el: '#vueApp',
152 |                 components: {
153 |                     EarthComp,
154 |                 },
155 |             });
156 |         });
157 |     </script>
158 | </body>
159 | 
160 | </html>
161 | 


--------------------------------------------------------------------------------
/Temp/clippingPlane.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <meta name="xbsj-labels" content="Earth示例"></meta>
  9 |     <title>编辑互斥</title>
 10 |     <!-- 0 引入js文件：XbsjEarth.js和vue.min.js -->
 11 |     <script src="../../XbsjEarth/XbsjEarth.js"></script>
 12 |     <script src="./scripts/vue.min.js"></script>
 13 |     <style>
 14 |         html,
 15 |         body {
 16 |             width: 100%;
 17 |             height: 100%;
 18 |             margin: 0px;
 19 |             padding: 0px;
 20 |         }
 21 | 
 22 |         .checkbox {
 23 |             cursor: pointer;
 24 |         }
 25 |     </style>
 26 | </head>
 27 | 
 28 | <body>
 29 |     <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative;">
 30 |         <earth-comp></earth-comp>
 31 |     </div>
 32 | 
 33 |     <script>
 34 |         // 1 创建Earth的vue组件
 35 |         var EarthComp = {
 36 |             template: `
 37 |                 <div style="width: 100%; height: 100%">
 38 |                     <div ref="earthContainer" style="width: 100%; height: 100%">
 39 |                     </div>
 40 |                     <div style="position: absolute; left: 18px; top: 18px; color: white; background: rgba(0, 0, 0, 0.3); padding: 5px; border-radius: 5px;">
 41 |                         <span @click="positionEditing = !positionEditing" class="checkbox"><input type="checkbox" v-model="positionEditing">位置编辑</span><br/>
 42 |                         <span @click="rotationEditing = !rotationEditing" class="checkbox"><input type="checkbox" v-model="rotationEditing">姿态编辑</span><br/>
 43 |                     </div>
 44 |                 </div>
 45 |             `,
 46 |             data() {
 47 |                 return {
 48 |                     positionEditing: false,
 49 |                     rotationEditing: false,
 50 |                     _earth: undefined, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
 51 |                 };
 52 |             },
 53 |             // 1.1 资源创建
 54 |             mounted() {
 55 |                 // 1.1.1 创建地球
 56 |                 var earth = new XE.Earth(this.$refs.earthContainer);
 57 | 
 58 |                 // 1.1.2 场景配置
 59 |                 earth.sceneTree.root = {
 60 |                     "title": "项目1",
 61 |                     "isSelected": true,
 62 |                     "children": [
 63 |                         {
 64 |                             "ref": "tileset",
 65 |                             "czmObject": {
 66 |                                 "xbsjType": "Tileset",
 67 |                                 "xbsjGuid": "b4137394-d346-4434-a01e-5b2d3730ec9f",
 68 |                                 "name": "三维瓦片1x",
 69 |                                 "url": "//lab2.cesiumlab.com:9000/model/f15b9e90ac2d11e99dbd8fd044883638/tileset.json",
 70 |                                 "lightColor": null,
 71 |                                 "specularEnvironmentMaps": null,
 72 |                                 "xbsjPosition": [
 73 |                                     1.9016974701882112,
 74 |                                     0.5972325152147303,
 75 |                                     425.8641913624607
 76 |                                 ],
 77 |                                 "xbsjFlattenGuid": "93916e9b-82dd-4a56-b15e-27303b08e781",
 78 |                                 "xbsjClippingPlanes": {
 79 |                                     "planes": [
 80 |                                         "9ab55d98-32ed-49ad-9004-1940f4903b68"
 81 |                                     ]
 82 |                                 }
 83 |                             }
 84 |                         },
 85 |                         {
 86 |                             "ref": "clippingPlane",
 87 |                             "czmObject": {
 88 |                                 "xbsjType": "ClippingPlane",
 89 |                                 "xbsjGuid": "9ab55d98-32ed-49ad-9004-1940f4903b68",
 90 |                                 "name": "裁剪面1",
 91 |                                 "position": [
 92 |                                     1.9016970582304769,
 93 |                                     0.5972442199495571,
 94 |                                     426
 95 |                                 ],
 96 |                                 "showHelper": true,
 97 |                             }
 98 |                         },
 99 |                         {
100 |                             "czmObject": {
101 |                                 "xbsjType": "Imagery",
102 |                                 "name": "谷歌影像",
103 |                                 "xbsjImageryProvider": {
104 |                                     "XbsjImageryProvider": {
105 |                                         "url": "//mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali",
106 |                                         "srcCoordType": "WGS84",
107 |                                         "dstCoordType": "WGS84",
108 |                                         "rectangle": [
109 |                                             -3.141592653589793,
110 |                                             -1.5707963267948966,
111 |                                             3.141592653589793,
112 |                                             1.5707963267948966
113 |                                         ]
114 |                                     },
115 |                                 }
116 |                             }
117 |                         }
118 |                     ]
119 |                 };
120 | 
121 |                 var tileset = earth.sceneTree.$refs.tileset.czmObject;
122 |                 XE.MVVM.watch(() => {
123 |                     if (tileset.ready) {
124 |                         tileset.flyTo();
125 |                     }
126 |                 });
127 | 
128 |                 window.earth = earth;
129 |                 window.tileset = tileset;
130 |                 window.clippingPlane = earth.sceneTree.$refs.clippingPlane.czmObject;
131 | 
132 |                 // 1.1.5 数据绑定
133 |                 {
134 |                     this._disposers = [];
135 |                     this._disposers.push(XE.MVVM.bind(this, 'positionEditing', clippingPlane, 'positionEditing'));
136 |                     this._disposers.push(XE.MVVM.bind(this, 'rotationEditing', clippingPlane, 'rotationEditing'));
137 |                 }
138 | 
139 |                 this._earth = earth;
140 |             },
141 |             // 1.2 资源销毁
142 |             beforeDestroy() {
143 |                 // vue程序销毁时，需要清理相关资源
144 |                 this._earth = this._earth && this._earth.destroy();
145 |                 this._disposers.forEach(d => d());
146 |                 this._disposers.length = 0;
147 |             },
148 |         }
149 | 
150 |         // 2 创建vue程序
151 |         // XE.ready()用来加载Cesium.js等相关资源
152 |         XE.ready().then(() => {
153 |             var app = new Vue({
154 |                 el: '#vueApp',
155 |                 components: {
156 |                     EarthComp,
157 |                 },
158 |             });
159 |         });
160 |     </script>
161 | </body>
162 | 
163 | </html>
164 | 


--------------------------------------------------------------------------------
/Cesium的Property机制总结/源码/sample1.js:
--------------------------------------------------------------------------------
  1 | // Cesium的Property机制总结 vtxf 20181120
  2 | // 以下代码放在Cesium的SandCastle中可以直接运行
  3 | // 文章在这里：https://www.jianshu.com/p/f0b47997224c
  4 | 
  5 | var viewer = new Cesium.Viewer('cesiumContainer', {
  6 |     imageryProvider : Cesium.createTileMapServiceImageryProvider({
  7 |         url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
  8 |     }),
  9 |     baseLayerPicker : false,
 10 |     geocoder : false,
 11 |     shouldAnimate: true,
 12 | });
 13 | 
 14 | ////////////////////////////////////////////////////////
 15 | // 此段代码仅为消除锯齿，让录屏好看一点，可以忽略 begin
 16 | viewer._cesiumWidget._supportsImageRenderingPixelated = Cesium.FeatureDetection.supportsImageRenderingPixelated();
 17 | viewer._cesiumWidget._forceResize = true;
 18 | if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
 19 |     var vtxf_dpr = window.devicePixelRatio;
 20 |     // 适度降低分辨率
 21 |     while (vtxf_dpr >= 2.0) {
 22 |         vtxf_dpr /= 2.0;
 23 |     }
 24 |     //alert(dpr);
 25 |     viewer.resolutionScale = vtxf_dpr;
 26 | }
 27 | // 此段代码仅为消除锯齿，让录屏好看一点，可以忽略 end
 28 | ////////////////////////////////////////////////////////
 29 | 
 30 | // 设置时间
 31 | var start = Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z');
 32 | var stop = Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z');
 33 | //Make sure viewer is at the desired time.
 34 | viewer.clock.startTime = start.clone();
 35 | viewer.clock.stopTime = stop.clone();
 36 | viewer.clock.currentTime = start.clone();
 37 | viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
 38 | viewer.clock.multiplier = 50000;
 39 | viewer.timeline.zoomTo(start, stop);
 40 | 
 41 | // 创建box
 42 | 
 43 | var blueBox = viewer.entities.add({
 44 |     name : 'Blue box',
 45 |     //id: 'blueBox',
 46 |     position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
 47 |     box : {
 48 |         dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
 49 |         material : Cesium.Color.BLUE,
 50 |         outline: true,
 51 |     },
 52 |     path: {
 53 |         show: true
 54 |     }
 55 | });
 56 | 
 57 | var redBox = viewer.entities.add({
 58 |     name : 'Red box',
 59 |     position: Cesium.Cartesian3.fromDegrees(-114.0, 30.0, 300000.0),
 60 |     box : {
 61 |         dimensions : new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
 62 |         material : Cesium.Color.RED,
 63 |         outline: true,
 64 |     }
 65 | });
 66 | 
 67 | viewer.zoomTo(viewer.entities);
 68 | 
 69 | Sandcastle.addToolbarButton('Constant new', function () {
 70 |     blueBox.box.dimensions = new ConstantProperty(new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
 71 |     // 以上代码等同于
 72 |     // blueBox.box.dimensions = new Cesium.Cartesian3(400000.0, 300000.0, 200000.0);
 73 | });
 74 | 
 75 | Sandcastle.addToolbarButton('Constant set', function () {
 76 |     blueBox.box.dimensions && blueBox.box.dimensions.setValue(new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));
 77 | });
 78 | 
 79 | Sandcastle.addToolbarButton('Sampled', function () {
 80 |     var property = new Cesium.SampledProperty(Cesium.Cartesian3);
 81 | 
 82 |     property.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
 83 |         new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
 84 |     
 85 |     property.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'), 
 86 |         new Cesium.Cartesian3(400000.0, 300000.0, 700000.0));
 87 | 
 88 |     blueBox.box.dimensions = property;
 89 | });
 90 | 
 91 | Sandcastle.addToolbarButton('TimeIntervalCollection', function () {
 92 |     var property = new Cesium.TimeIntervalCollectionProperty(Cesium.Cartesian3);
 93 | 
 94 |     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
 95 |         iso8601 : '2019-01-01T00:00:00.00Z/2019-01-01T12:00:00.00Z',
 96 |         isStartIncluded : true,
 97 |         isStopIncluded : false,
 98 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 200000.0)
 99 |     }));
100 |     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
101 |         iso8601 : '2019-01-01T12:00:01.00Z/2019-01-02T00:00:00.00Z',
102 |         isStartIncluded : true,
103 |         isStopIncluded : false,
104 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
105 |     }));
106 |     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
107 |         iso8601 : '2019-01-02T00:00:01.00Z/2019-01-02T12:00:00.00Z',
108 |         isStartIncluded : true,
109 |         isStopIncluded : false,
110 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)
111 |     }));
112 |     property.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
113 |         iso8601 : '2019-01-02T12:00:01.00Z/2019-01-03T00:00:00.00Z',
114 |         isStartIncluded : true,
115 |         isStopIncluded : true,
116 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
117 |     }));
118 | 
119 |     blueBox.box.dimensions = property;
120 | });
121 | 
122 | Sandcastle.addToolbarButton('Composit', function () {
123 |     // 1 sampledProperty
124 |     var sampledProperty = new Cesium.SampledProperty(Cesium.Cartesian3);
125 |     sampledProperty.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
126 |         new Cesium.Cartesian3(400000.0, 300000.0, 200000.0));
127 |     
128 |     sampledProperty.addSample(Cesium.JulianDate.fromIso8601('2019-01-02T00:00:00.00Z'), 
129 |         new Cesium.Cartesian3(400000.0, 300000.0, 400000.0));
130 | 
131 |     // 2 ticProperty
132 |     var ticProperty = new Cesium.TimeIntervalCollectionProperty();
133 |     ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
134 |         iso8601 : '2019-01-02T00:00:00.00Z/2019-01-02T06:00:00.00Z',
135 |         isStartIncluded : true,
136 |         isStopIncluded : false,
137 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 400000.0)
138 |     }));
139 |     ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
140 |         iso8601 : '2019-01-02T06:00:00.00Z/2019-01-02T12:00:00.00Z',
141 |         isStartIncluded : true,
142 |         isStopIncluded : false,
143 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0)
144 |     }));
145 |     ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
146 |         iso8601 : '2019-01-02T12:00:00.00Z/2019-01-02T18:00:00.00Z',
147 |         isStartIncluded : true,
148 |         isStopIncluded : false,
149 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 600000.0)
150 |     }));
151 |     ticProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
152 |         iso8601 : '2019-01-02T18:00:00.00Z/2019-01-03T23:00:00.00Z',
153 |         isStartIncluded : true,
154 |         isStopIncluded : true,
155 |         data : new Cesium.Cartesian3(400000.0, 300000.0, 700000.0)
156 |     }));
157 | 
158 |     // 3 compositeProperty
159 |     var compositeProperty = new Cesium.CompositeProperty();
160 |     compositeProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
161 |         iso8601 : '2019-01-01T00:00:00.00Z/2019-01-02T00:00:00.00Z',
162 |         data : sampledProperty
163 |     }));
164 |     compositeProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({
165 |         iso8601 : '2019-01-02T00:00:00.00Z/2019-01-03T00:00:00.00Z',
166 |         isStartIncluded : false,
167 |         isStopIncluded : false,
168 |         data : ticProperty
169 |     }));
170 | 
171 |     // 4 设置position
172 |     blueBox.box.dimensions = compositeProperty;
173 | });
174 | 
175 | Sandcastle.addToolbarButton('ConstantPosition', function () {
176 |     blueBox.position = new Cesium.ConstantPositionProperty(Cesium.Cartesian3.fromDegrees(-114.0, 45.0, 300000.0));
177 |     // 以上代码等同于
178 |     // blueBox.position = Cesium.Cartesian3.fromDegrees(-114.0, 45.0, 300000.0)
179 | });
180 | 
181 | Sandcastle.addToolbarButton('SampledPosition', function () {
182 |     var property = new Cesium.SampledPositionProperty();
183 | 
184 |     property.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
185 |         Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0));
186 |     
187 |     property.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'), 
188 |         Cesium.Cartesian3.fromDegrees(-114.0, 45.0, 300000.0));
189 | 
190 |     blueBox.position = property;
191 | });
192 | 
193 | Sandcastle.addToolbarButton('ColorMaterial', function () {
194 |     blueBox.box.material = new Cesium.ColorMaterialProperty(new Cesium.Color(0, 1, 0));
195 |     // 以上代码等同于
196 |     // blueBox.box.material = new Cesium.Color(0, 1, 0);
197 | });
198 | 
199 | Sandcastle.addToolbarButton('SampledColor', function () {
200 |     var colorProperty = new Cesium.SampledProperty(Cesium.Color);
201 | 
202 |     colorProperty.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 
203 |         new Cesium.Color(0, 1, 0));
204 |     
205 |         colorProperty.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'), 
206 |         new Cesium.Color(0, 0, 1));
207 | 
208 |     blueBox.box.material = new Cesium.ColorMaterialProperty(colorProperty);
209 | });
210 | 
211 | Sandcastle.addToolbarButton('Reference', function () {
212 |     var collection = viewer.entities;
213 |     redBox.box.dimensions = new Cesium.ReferenceProperty(collection, blueBox.id, ['box', 'dimensions']);
214 | });
215 | 
216 | Sandcastle.addToolbarButton('PropertyBag', function () {
217 |     var zp = new Cesium.SampledProperty(Number);
218 |     zp.addSample(Cesium.JulianDate.fromIso8601('2019-01-01T00:00:00.00Z'), 200000.0);
219 |     zp.addSample(Cesium.JulianDate.fromIso8601('2019-01-03T00:00:00.00Z'), 700000.0);
220 |     
221 |     blueBox.box.dimensions = new Cesium.PropertyBag({
222 |         x: 400000.0,
223 |         y: 300000.0,
224 |         z: zp
225 |     });
226 | });
227 | 
228 | Sandcastle.addToolbarButton('PropertyBag', function () {
229 |     var l = 200000.0;
230 |     var property = new Cesium.CallbackProperty(function (time, result) {
231 |         result = result || new Cesium.Cartesian3(0, 0, 0);
232 | 
233 |         l += 10000.0;
234 |         if (l > 700000.0) {
235 |             l = 200000.0;
236 |         }
237 | 
238 |         result.x = 400000.0;
239 |         result.y = 300000.0;
240 |         result.z = l;
241 | 
242 |         return result;
243 |     }, false);
244 |     
245 |     blueBox.box.dimensions = property;
246 | });
247 | 
248 | Sandcastle.addToolbarButton('VelocityVector', function () {
249 |     blueBox.billboard = {
250 |         image : 'https://upload-images.jianshu.io/upload_images/80648-5dfe8a3ea2c250be.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/540/format/webp',
251 |         alignedAxis : new Cesium.VelocityVectorProperty(blueBox.position, true) // alignedAxis must be a unit vector
252 |     };
253 | });
254 | 
255 | 
256 | 
257 | 


--------------------------------------------------------------------------------