Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
4b3e59ec by unknown
Options

'20191207'

1 parent 170128ce
Inline Side-by-side
Showing 6 changed files with 284 additions and 6 deletions
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:52
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 14:05:19
* @LastEditTime: 2019-12-07 14:52:28
* @FilePath: \superglobevue\README.md
-->
# superglobevue
......@@ -27,6 +27,7 @@ SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
- viewer_ms3m.vue 通过scene和addS3MTilesLayerByScp两种方式添加倾斜摄影场景和图层
- viewer_ming.vue 多个栅格图层面的动画效果
- viewer_changeview.vue 地图视图效果，在10000米以上不能改变角度，10000米以下能够改动视角
- viewer_3dmodel.vue 展示矢量数据白模
## 2、设置
### 项目依赖库安装
......
<!--
* 矢量数据白模
* @Author: jiangbotao
* @Date: 2019-12-07 14:24:01
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 14:28:38
* @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium=window.Cesium;
export default {
data: function(){
return {
styleObject:{
width: '100%',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
backgroundColor: '#000000'
},
smviewer:{}
}
},
mounted: function(){
this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
var scene = this.smviewer.scene;
var widget = this.smviewer.cesiumWidget;
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
$(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
this.smviewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.IMG_C,
token: URL_CONFIG.TOKEN_TIANDITU
}));
try{
//打开所发布三维服务下的所有图层
var promise = scene.open(URL_CONFIG.GZ_SCENE);
Cesium.when.all(promise, function(layers){
//设置图层的阴影模式
scene.camera.setView({
//将经度、纬度、高度的坐标转换为笛卡尔坐标
destination : new Cesium.Cartesian3(-2323607.7945701713, 5386182.530303348, 2505814.811681112),
orientation : {
heading : 4.844795866469065,
pitch : -0.58125995096984,
roll :1.2504663970958063e-11
}
});
}, function(e){
if(widget._showRenderLoopErrors) {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
}
});
}catch(e){
if(widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
$('#loadingbar').remove();
}
}
</script>
<style>
.sm-compass {
pointer-events: auto;
position: absolute;
right: 10px;
top: 10px;
width: 128px;
height: 128px;
overflow: hidden;
}
.sm-zoom {
top: 130px;
}
</style>
\ No newline at end of file
<!--
* 矢量数据白模
* @Author: jiangbotao
* @Date: 2019-12-07 14:24:01
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 14:58:44
* @FilePath: \superglobevue\src\components\viewer_3dmodel.vue
-->
<template>
<div>
<div id="cesiumContainer" v-bind:style="styleObject"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" class="param-container tool-bar">
<div>
<label style="color:#FFFFFF ">图层开挖:</label>
<button id="excavation" >进行倾斜开挖</button>
</div>
</div>
</div>
</template>
<script>
import URL_CONFIG from './../config/urlConfig.vue';
const Cesium=window.Cesium;
export default {
data: function(){
return {
styleObject:{
width: '100%',
position: 'absolute',
top: '0px',
bottom: '0px',
left: '0px',
backgroundColor: '#000000'
},
smviewer:{}
}
},
mounted: function(){
this.smviewer=new Cesium.Viewer('cesiumContainer', { animation: true });
var scene = this.smviewer.scene;
var widget = this.smviewer.cesiumWidget;
var globe = scene.globe;
// 隐藏logo
$(".cesium-widget-credits")[0].style.visibility="hidden";
$(".cesium-viewer-animationContainer")[0].style.visibility="hidden";
// 隐藏导航工具
// $(".cesium-viewer-navigationContainer")[0].style.visibility="hidden";
this.smviewer.scene.undergroundMode = true; //设置开启地下场景
this.smviewer.scene.screenSpaceCameraController.minimumZoomDistance = -500;//设置相机最小缩放距离,距离地表-1000米
this.smviewer.scene.terrainProvider.isCreateSkirt = false; // 关闭裙边
var overGroundLayer = null;
try{
//打开所发布三维服务下的所有图层
var promise = scene.open('http://www.supermapol.com/realspace/services/3D-pipe/rest/realspace');
Cesium.when.all(promise, function(layers){
overGroundLayer = scene.layers.find('Config');
//设置图层的阴影模式
scene.camera.setView({
//将经度、纬度、高度的坐标转换为笛卡尔坐标
destination : new Cesium.Cartesian3(-2654051.707084536, 3570921.9596162816, 4570167.290651748),
orientation : {
heading : 2.3280016887452777,
pitch : -0.586141022221434,
roll : 6.283185307176403
}
});
}, function(e){
if(widget._showRenderLoopErrors) {
var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
widget.showErrorPanel(title, undefined, e);
}
});
}catch(e){
if(widget._showRenderLoopErrors) {
var title = '渲染时发生错误，已停止渲染。';
widget.showErrorPanel(title, undefined, e);
}
}
var positions = null;
// 绘制面
var handlerPolygon = new Cesium.DrawHandler(this.smviewer, Cesium.DrawMode.Polygon);
handlerPolygon.drawEvt.addEventListener(function(polygon){
var array = [].concat(polygon.object.positions);
positions = [];
for(var i = 0, len = array.length; i < len; i++){
var cartographic = Cesium.Cartographic.fromCartesian(array[i]);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var h=cartographic.height;
if(positions.indexOf(longitude)===-1&&positions.indexOf(latitude)===-1){
positions.push(longitude);
positions.push(latitude);
positions.push(h);
}
}
console.log(positions);
return positions;
});
$("#excavation").on("click", function(){
handlerPolygon && handlerPolygon.deactivate();
handlerPolygon && handlerPolygon.activate();
//设置倾斜开挖参数
overGroundLayer.addExcavationRegion({
position : positions,
name : 'excavation_' + Math.random()
});
handlerPolygon.deactivate();
});
$('#loadingbar').remove();
}
}
</script>
<style>
.sm-compass {
pointer-events: auto;
position: absolute;
right: 10px;
top: 10px;
width: 128px;
height: 128px;
overflow: hidden;
}
.sm-zoom {
top: 130px;
}
#excavation {
color:rgb(255, 255, 255);
font-size:14px;padding-top:4px;padding-bottom:4px;padding-left:33px;padding-right:33px;
border-width:2px;border-color:rgb(74, 99, 31);border-style:solid;border-radius:11px;
background-color:rgb(44, 89, 128);}
#excavation:hover{
color:#ffffff;
background-color:#78c300;
border-color:#c5e591;
}
</style>
\ No newline at end of file
......@@ -8,7 +8,7 @@
* @Author: jiangbotao
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 13:49:40
* @LastEditTime: 2019-12-07 14:59:33
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:54:10
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 19:50:11
* @LastEditTime: 2019-12-07 14:31:42
* @FilePath: \superglobevue\src\config\urlConfig.vue
-->
<script>
......@@ -30,6 +30,7 @@ const SCENE_SRSB = "http://www.supermapol.com/realspace/services/3D-srsb/rest/re
const SCENE_WZ_QD = 'http://localhost:8090/iserver/services/3D-wz_qidu_qx/rest/realspace/';
const SCP_SRSB_WATER = "http://www.supermapol.com/realspace/services/3D-srsb/rest/realspace/datas/%E6%B0%B4%E9%9D%A2@vector/config";
const SCENE_XGPARK = "http://www.supermapol.com/realspace/services/3D-yanmofenxi/rest/realspace";
const GZ_SCENE = 'http://www.supermapol.com/realspace/services/3D-GuangZhou/rest/realspace';
export default
{
TDT_IMG,
......@@ -54,6 +55,7 @@ export default
SCP_SRSB_WATER,
SCENE_SY,
TOKEN_TIANDITU,
SCENE_XGPARK
SCENE_XGPARK,
GZ_SCENE
};
</script>
......
<!--
* 开挖分析
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 14:00:56
* @LastEditTime: 2019-12-07 14:49:20
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
......@@ -10,7 +11,7 @@
</template>
<script>
import viewer from "@/components/viewer_mimg.vue";
import viewer from "@/components/viewer_underground.vue";
export default {
name: "home",
......