Skip to content

蒋波涛 / super_globe_vue

Go to a project
Toggle navigation
Toggle navigation pinning
170128ce by unknown
Options

'20191207'

1 parent 71a13815
Expand all
Inline Side-by-side
Showing 12 changed files with 49 additions and 70 deletions
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:52
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 08:14:45
* @LastEditTime: 2019-12-07 14:05:19
* @FilePath: \superglobevue\README.md
-->
# superglobevue
......@@ -11,13 +11,22 @@
SuperGlobeVue是基于vue-cli3和supermap cesium 的一款Globe地球视图。
系统通过vue.config.js进行了eslint的配置。不用担心vue写法中的一系列配置和语法问题。
- 数据配置文件为config/urlConfig.vue
- 修改显示组件主要为views/Home.vue中的第15行
- Globe的主要视图是src/componnets/viewer.vue
-
系统通过vue.config.js进行了eslint的配置。
## 2、功能组件
- viewer_ymo.vue 淹没分析
- viewer_tdt.vue 加载天地图数据
- viewer_s3m.vue 加载倾斜摄影数据+矢量面（构成水面）
- viewer_s3m_single.vue 添加铁岭倾斜摄影数据+矢量面数据+矢量单体化查询效果
- viewer_s3m_wz.vue 自定义添加温州倾斜摄影数据+矢量面数据+单体化查询
- viewer_ms3m.vue 通过scene和addS3MTilesLayerByScp两种方式添加倾斜摄影场景和图层
- viewer_ming.vue 多个栅格图层面的动画效果
- viewer_changeview.vue 地图视图效果，在10000米以上不能改变角度，10000米以下能够改动视角
## 2、设置
### 项目依赖库安装
......
......@@ -9,7 +9,6 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.4.8",
"core-js": "^3.4.3",
"vue": "^2.6.10",
"vue-router": "^3.1.3"
......
......@@ -3,7 +3,7 @@
* 添加倾斜摄影场景和倾斜摄影图层
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 20:20:18
* @LastEditTime: 2019-12-07 14:03:39
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......
<!--
* 1、加载倾斜摄影模块
* 2、加载一个矢量面对象并将其设置为水面效果
* @Author: jiangbotao
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
......@@ -105,12 +107,12 @@ export default {
pointer-events: auto;
position: absolute;
right: 10px;
top: 70px;
top: 10px;
width: 128px;
height: 128px;
overflow: hidden;
}
.sm-zoom {
top: 190px;
top: 130px;
}
</style>
......
......@@ -6,7 +6,7 @@
* 3、使用Popup来弹出倾斜摄影覆盖面的信息
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 11:56:15
* @LastEditTime: 2019-12-07 14:01:32
* @FilePath: \superglobevue\src\components\viewer.vue
-->
<template>
......@@ -231,10 +231,10 @@ export default {
<style>
.compass {
top: 60px;
top: 10px;
}
.navigation-controls {
top: 180px;
top: 130px;
}
.bubble {
padding: 5px;
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:52:56
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 12:44:32
* @LastEditTime: 2019-12-07 14:02:03
* @FilePath: \superglobevue\src\components\viewer.vue
-->
<template>
......@@ -254,9 +254,9 @@ export default {
text-align: left;
}
.compass {
top: 60px;
top: 10px;
}
.navigation-controls {
top: 170px;
top: 120px;
}
</style>
......
<!--
* @Author: jiangbotao
* 演示大场景被淹没
* 演示倾斜摄影大场景被淹没
* 使用场景中的HYP对象
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 22:03:19
* @LastEditTime: 2019-12-07 13:52:58
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......@@ -130,18 +131,15 @@ export default {
var layer = scene.layers.find("srsb");
var hyp = new Cesium.HypsometricSetting();
//创建分层设色对象 设置最大/最小可见高度 颜色表 显示模式 透明度及线宽
var colorTable = new Cesium.ColorTable();
colorTable.insert(100, new Cesium.Color(0, 39/255, 148/255));
colorTable.insert(0, new Cesium.Color(149/255, 232/255, 249/255));
hyp.MaxVisibleValue = currentHeight;
hyp.MinVisibleValue = minValue;
hyp.ColorTable = colorTable;
hyp.DisplayMode = Cesium.HypsometricSettingEnum.DisplayMode.FACE;
hyp.Opacity = 0.6;
hyp.LineInterval = 10.0;
//设置图层分层设色属性
......@@ -149,7 +147,6 @@ export default {
hypsometricSetting : hyp,
analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
};
currentHeight += (parseInt(document.getElementById("speed").value))/10;
};
......@@ -158,7 +155,6 @@ export default {
var layer = scene.layers.find("sci_park");
var hyp = new Cesium.HypsometricSetting();
hyp.MaxVisibleValue = 0;
layer.hypsometricSetting = {
hypsometricSetting : hyp,
analysisMode : Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
......
......@@ -4,7 +4,7 @@
* 2、添加了超图发布的矢量瓦片服务
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-05 13:14:46
* @LastEditTime: 2019-12-07 13:52:13
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......@@ -94,12 +94,12 @@ export default {
pointer-events: auto;
position: absolute;
right: 10px;
top: 70px;
top: 10px;
width: 128px;
height: 128px;
overflow: hidden;
}
.sm-zoom {
top: 190px;
top: 130px;
}
</style>
\ No newline at end of file
......
......@@ -2,12 +2,13 @@
* 显示基本的三维Globe
* 1、添加SuperMap发布的地形数据
* 2、添加SuperMap发布的影像数据
* 3、量测面积
* 4、淹没区分析
* 3、淹没区分析
* 3.1 Entity分析
* 3.2 Primitive分析
* @Author: jiangbotao
* @Date: 2019-12-02 09:05:50
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-04 20:09:26
* @LastEditTime: 2019-12-07 13:49:40
* @FilePath: \WebGL_Webpack_Vue\components\viewer.vue
-->
<template>
......@@ -35,7 +36,7 @@
</div>
<div id="toolbar" class="param-container tool-bar">
<div class="param-item">
<button type="button" id="draw" class="button black">绘面</button>
<button type="button" id="draw" class="button black">绘制分析面</button>
<button type="button" id="begin" class="button black">淹没分析</button>
<button type="button" id="clear" class="button black">清除</button>
</div>
......@@ -98,7 +99,7 @@ export default {
positions.push(longitude);
positions.push(latitude);
positions.push(h);
// 淹没分析时的固定底面
positions2d.push(longitude);
positions2d.push(latitude);
positions2d.push(1000.0);
......@@ -116,12 +117,14 @@ export default {
var targetHeight = 3500;
var entities = __this.viewer.entities;
//方式1
// __this.floodCal(entities, positions2d, waterHeight, targetHeight);
__this.floodParse(scene, positions2d, waterHeight, targetHeight);
__this.floodCal(entities, positions2d, waterHeight, targetHeight);
// 方式2
// __this.floodParse(scene, positions2d, waterHeight, targetHeight);
handlerPolygon && handlerPolygon.clear();
});
$("#clear").click(function(){
__this.viewer.entities.removeAll();
handlerPolygon && handlerPolygon.clear();
});
......@@ -257,7 +260,12 @@ export default {
.tool-bar {
position: absolute;
left: 10px;
top: 60px;
top: 20px;
z-index: 10000;
padding: 2px;
}
.param-container .param-item {
margin: 5px;
overflow: hidden;
}
</style>
\ No newline at end of file
......
......@@ -2,17 +2,14 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 11:44:35
* @LastEditTime: 2019-12-07 13:39:25
* @FilePath: \superglobevue\src\main.js
*/
import Vue from 'vue'
import Antd from 'ant-design-vue'
import App from './App'
import 'ant-design-vue/dist/antd.css'
import router from './router'
Vue.config.productionTip = false
Vue.use(Antd)
new Vue({
router,
......
......@@ -2,29 +2,20 @@
* @Author: jiangbotao
* @Date: 2019-12-03 22:31:08
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-07 12:44:47
* @LastEditTime: 2019-12-07 14:00:56
* @FilePath: \superglobevue\src\views\Home.vue
-->
<template>
<a-layout>
<a-layout-header>
<a-icon type="global" />&nbsp;&nbsp;三维地理信息系统
</a-layout-header>
<a-layout-content style="padding: 0px;">
<viewer></viewer>
</a-layout-content>
<a-layout-footer style="height: 22px;">Footer</a-layout-footer>
</a-layout>
</template>
<script>
import viewer from "@/components/viewer_s3m_single.vue";
import viewer from "@/components/viewer_mimg.vue";
export default {
name: "home",
data() {
return {
theme1: 'primary'
};
},
components: {
......@@ -34,28 +25,5 @@ export default {
</script>
<style scoped>
.ant-layout-header {
height: 60px;
top: 0px;
position: absolute;
width: 100%;
background-color: #2d8cf0;
color: white;
text-align: left;
padding: 0px 0px;
padding-left: 10px;
z-index: 99;
font-size: 18pt;
}
.ant-layout-footer {
height: 22px;
bottom: 0px;
position: absolute;
width: 100%;
background-color: rgba(19, 17, 17, 0.5);
color: white;
text-align: left;
padding-top: 2px;
padding-left: 10px;
}
</style>
......