Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
90bd7d20 by chiangbt
Options

20191205

1 parent 8f2cd684
Inline Side-by-side
Showing 3 changed files with 46 additions and 40 deletions
...@@ -57,9 +57,10 @@ export default { ...@@ -57,9 +57,10 @@ export default {
57 }; 57 };
58 }, 58 },
59 mounted: function() { 59 mounted: function() {
60 var __this = this;
60 this.viewer = new Cesium.Viewer("cesiumContainer", {}); 61 this.viewer = new Cesium.Viewer("cesiumContainer", {});
61 this.viewer.scene.globe.depthTestAgainstTerrain = true; 62 this.viewer.scene.globe.depthTestAgainstTerrain = true;
62 // 使用自定义的navigation 63 // 使用自定义的navigation
63 var options = {}; 64 var options = {};
64 options.enableCompass= true; 65 options.enableCompass= true;
65 options.enableZoomControls= true; 66 options.enableZoomControls= true;
...@@ -70,18 +71,8 @@ export default { ...@@ -70,18 +71,8 @@ export default {
70 $(".cesium-widget-credits")[0].style.visibility = "hidden"; 71 $(".cesium-widget-credits")[0].style.visibility = "hidden";
71 // 隐藏导航工具 72 // 隐藏导航工具
72 $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden"; 73 $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
73 // 添加天地图地图 74
74 this.viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ 75 this.addLayer(this.viewer);
75 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
76 token: URL_CONFIG.TOKEN_TIANDITU
77 }));
78 var imageryLayers = this.viewer.imageryLayers;
79 //初始化天地图全球中文注记服务，并添加至影像图层
80 var labelImagery = new Cesium.TiandituImageryProvider({
81 mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
82 token: URL_CONFIG.TOKEN_TIANDITU
83 });
84 imageryLayers.addImageryProvider(labelImagery);
85 76
86 var scene = this.viewer.scene; 77 var scene = this.viewer.scene;
87 var widget = this.viewer.cesiumWidget; 78 var widget = this.viewer.cesiumWidget;
...@@ -151,6 +142,7 @@ export default { ...@@ -151,6 +142,7 @@ export default {
151 142
152 $("#close").click(function(){ // 关闭气泡 143 $("#close").click(function(){ // 关闭气泡
153 $("#bubble").hide(); 144 $("#bubble").hide();
145 smviewer.entities.removeAll();
154 }); 146 });
155 // 每一帧都去计算气泡的正确位置 147 // 每一帧都去计算气泡的正确位置
156 scene.postRender.addEventListener(function(){ 148 scene.postRender.addEventListener(function(){
...@@ -187,8 +179,8 @@ export default { ...@@ -187,8 +179,8 @@ export default {
187 var resultObj = JSON.parse(result); 179 var resultObj = JSON.parse(result);
188 if (resultObj.featureCount > 0) { 180 if (resultObj.featureCount > 0) {
189 var selectedFeature = resultObj.features[0]; 181 var selectedFeature = resultObj.features[0];
190 addClapFeature(selectedFeature); 182 __this.addClapFeature(__this.viewer, selectedFeature);
191 // console.log(selectedFeature); 183
192 $("#bubble").show(); 184 $("#bubble").show();
193 for (var i=table.rows.length-1; i>-1; i--){ 185 for (var i=table.rows.length-1; i>-1; i--){
194 table.deleteRow(i); 186 table.deleteRow(i);
...@@ -210,21 +202,24 @@ export default { ...@@ -210,21 +202,24 @@ export default {
210 }) 202 })
211 } 203 }
212 204
213 // 将数据服务查询到的要素添加到场景中高亮显示，表示选中效果。 205 $("#loadingbar").remove();
214 function addClapFeature(feature) { 206 },
215 var lonLatArr = getLonLatArray(feature.geometry.points); 207 methods:{
216 smviewer.entities.add({ 208 addLayer: function(viewer){
217 id: 'identify-area', 209 // 添加天地图地图
218 name: '单体化标识面', 210 viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
219 polygon: { 211 mapStyle : Cesium.TiandituMapsStyle.IMG_C,
220 hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr), 212 token: URL_CONFIG.TOKEN_TIANDITU
221 material: new Cesium.Color(1.0, 0.0, 0.0, 0.3), 213 }));
222 }, 214 var imageryLayers = viewer.imageryLayers;
223 clampToS3M: true // 贴在S3M模型表面 215 //初始化天地图全球中文注记服务，并添加至影像图层
216 var labelImagery = new Cesium.TiandituImageryProvider({
217 mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务（经纬度投影）
218 token: URL_CONFIG.TOKEN_TIANDITU
224 }); 219 });
225 } 220 imageryLayers.addImageryProvider(labelImagery);
226 221 },
227 function getLonLatArray(points){ 222 getLonLatArray: function(points){
228 // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。 223 // 得到[经度,纬度,经度,纬度...]形式的数组，用于构造面。
229 var point3D = []; 224 var point3D = [];
230 points.forEach(function(point) { 225 points.forEach(function(point) {
...@@ -232,9 +227,19 @@ export default { ...@@ -232,9 +227,19 @@ export default {
232 point3D.push(point.y); 227 point3D.push(point.y);
233 }); 228 });
234 return point3D; 229 return point3D;
230 },
231 addClapFeature: function(viewer, feature) {
232 var lonLatArr = this.getLonLatArray(feature.geometry.points);
233 viewer.entities.add({
234 id: 'identify-area',
235 name: '单体化标识面',
236 polygon: {
237 hierarchy: Cesium.Cartesian3.fromDegreesArray(lonLatArr),
238 material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
239 },
240 clampToS3M: true // 贴在S3M模型表面
241 });
235 } 242 }
236
237 $("#loadingbar").remove();
238 } 243 }
239 }; 244 };
240 </script> 245 </script>
......
...@@ -254,4 +254,10 @@ export default { ...@@ -254,4 +254,10 @@ export default {
254 opacity: 1; 254 opacity: 1;
255 transition: opacity 0.2s ease-out,transform 0.2s ease-out; 255 transition: opacity 0.2s ease-out,transform 0.2s ease-out;
256 } 256 }
257 .tool-bar {
258 position: absolute;
259 left: 10px;
260 top: 60px;
261 z-index: 10000;
262 }
257 </style> 263 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,19 +7,14 @@ ...@@ -7,19 +7,14 @@
7 --> 7 -->
8 <template> 8 <template>
9 <el-container> 9 <el-container>
10 <el-header style="height: 50px;"><i class="el-icon-s-opportunity"></i>Header</el-header> 10 <el-header style="height: 50px;">
11 <el-main> 11 <i class="el-icon-s-opportunity"></i>&nbsp;&nbsp;三维地理信息系统
12 </el-header>
13 <el-main style="padding: 0px;">
12 <viewer></viewer> 14 <viewer></viewer>
13 </el-main> 15 </el-main>
14 <el-footer style="height: 22px;">Footer</el-footer> 16 <el-footer style="height: 22px;">Footer</el-footer>
15 </el-container> 17 </el-container>
16 <!-- <div id="map">
17 <div id="header">&nbsp;&nbsp;三维地理信息系统</div>
18 <viewer></viewer>
19 <div id="footer">
20 经纬度信息
21 </div>
22 </div> -->
23 </template> 18 </template>
24 19
25 <script> 20 <script>
......