This commit is contained in:
wangj
parent
1e29ce2485
commit
a63926570e
Binary file not shown.
|
After Width: | Height: | Size: 980 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 524 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 514 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
|
|
@ -16,7 +16,7 @@ import '@/assets/css/common.css'
|
|||
import '@/assets/css/DrawHelper.css'
|
||||
import '@/assets/iconfont/iconfont.css'
|
||||
import '@/utils/flexible.js'
|
||||
|
||||
import '@/utils/Sandcastle.js'
|
||||
// import $ from 'jquery';
|
||||
// window.jQuery = $
|
||||
// window.$ = $
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ const router = new Router({
|
|||
name: "register",
|
||||
component: () => import("@/views/register"),
|
||||
},
|
||||
|
||||
{
|
||||
path: "*",
|
||||
name: "Index",
|
||||
|
|
@ -52,6 +53,16 @@ const router = new Router({
|
|||
},
|
||||
component: Resource,
|
||||
},
|
||||
{
|
||||
path: "/mentougou",
|
||||
name: "mentougou",
|
||||
component: () => import("@/views/mentougou"),
|
||||
},
|
||||
{
|
||||
path: "/build",
|
||||
name: "build",
|
||||
component: () => import("@/views/build"),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,152 @@
|
|||
(function() {
|
||||
'use strict';
|
||||
|
||||
var defaultAction;
|
||||
var bucket = window.location.href;
|
||||
var pos = bucket.lastIndexOf('/');
|
||||
if (pos > 0 && pos < (bucket.length - 1)) {
|
||||
bucket = bucket.substring(pos + 1);
|
||||
}
|
||||
|
||||
window.Sandcastle = {
|
||||
bucket: bucket,
|
||||
declare: function() {},
|
||||
highlight: function() {},
|
||||
registered: [],
|
||||
finishedLoading: function() {
|
||||
window.Sandcastle.reset();
|
||||
|
||||
if (defaultAction) {
|
||||
window.Sandcastle.highlight(defaultAction);
|
||||
defaultAction();
|
||||
defaultAction = undefined;
|
||||
}
|
||||
|
||||
document.body.className = document.body.className.replace(/(?:\s|^)sandcastle-loading(?:\s|$)/, ' ');
|
||||
},
|
||||
addToggleButton: function(text, checked, onchange, toolbarID) {
|
||||
window.Sandcastle.declare(onchange);
|
||||
var input = document.createElement('input');
|
||||
input.checked = checked;
|
||||
input.type = 'checkbox';
|
||||
input.style.pointerEvents = 'none';
|
||||
var label = document.createElement('label');
|
||||
label.appendChild(input);
|
||||
label.appendChild(document.createTextNode(text));
|
||||
label.style.pointerEvents = 'none';
|
||||
var button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'cesium-button';
|
||||
button.appendChild(label);
|
||||
|
||||
button.onclick = function() {
|
||||
window.Sandcastle.reset();
|
||||
window.Sandcastle.highlight(onchange);
|
||||
input.checked = !input.checked;
|
||||
onchange(input.checked);
|
||||
};
|
||||
|
||||
document.getElementById(toolbarID || 'toolbar').appendChild(button);
|
||||
},
|
||||
addToolbarButton: function(text, onclick, toolbarID) {
|
||||
window.Sandcastle.declare(onclick);
|
||||
var button = document.createElement('button');
|
||||
button.type = 'button';
|
||||
button.className = 'cesium-button';
|
||||
button.id = 'myButton'; // 添加唯一的id
|
||||
button.onclick = function() {
|
||||
window.Sandcastle.reset();
|
||||
window.Sandcastle.highlight(onclick);
|
||||
onclick();
|
||||
};
|
||||
button.textContent = text;
|
||||
document.getElementById(toolbarID || 'toolbar').appendChild(button);
|
||||
},
|
||||
addDefaultToolbarButton: function(text, onclick, toolbarID) {
|
||||
window.Sandcastle.addToolbarButton(text, onclick, toolbarID);
|
||||
defaultAction = onclick;
|
||||
},
|
||||
addDefaultToolbarMenu: function(options, toolbarID) {
|
||||
window.Sandcastle.addToolbarMenu(options, toolbarID);
|
||||
defaultAction = options[0].onselect;
|
||||
},
|
||||
addToolbarMenu: function(options, toolbarID) {
|
||||
var menu = document.createElement('select');
|
||||
menu.className = 'cesium-button';
|
||||
menu.onchange = function() {
|
||||
window.Sandcastle.reset();
|
||||
var item = options[menu.selectedIndex];
|
||||
if (item && typeof item.onselect === 'function') {
|
||||
item.onselect();
|
||||
}
|
||||
};
|
||||
document.getElementById(toolbarID || 'toolbar').appendChild(menu);
|
||||
|
||||
if (!defaultAction && typeof options[0].onselect === 'function') {
|
||||
defaultAction = options[0].onselect;
|
||||
}
|
||||
|
||||
for (var i = 0, len = options.length; i < len; ++i) {
|
||||
var option = document.createElement('option');
|
||||
option.textContent = options[i].text;
|
||||
option.value = options[i].value;
|
||||
menu.appendChild(option);
|
||||
}
|
||||
},
|
||||
createTipsDOM: function(opt) {
|
||||
let dom_1 = document.createElement('span');
|
||||
dom_1.className = 'close-tip';
|
||||
dom_1.innerHTML = 'x';
|
||||
dom_1.id = 'closeTip';
|
||||
dom_1.addEventListener('click', function() {
|
||||
let infoPanel = document.getElementById('infoPanel');
|
||||
let closeTip = document.getElementById('closeTip');
|
||||
let openTip = document.getElementById('openTip');
|
||||
infoPanel.style.width = 0;
|
||||
infoPanel.style.padding = 0;
|
||||
infoPanel.style.right = '-10000px';
|
||||
closeTip.style.display = 'none';
|
||||
openTip.style.display = 'block';
|
||||
})
|
||||
|
||||
let dom_2 = document.createElement('span');
|
||||
dom_2.className = 'open-tip';
|
||||
dom_2.innerHTML = '展开';
|
||||
dom_2.id = 'openTip';
|
||||
dom_2.addEventListener('click', function() {
|
||||
let infoPanel = document.getElementById('infoPanel');
|
||||
let closeTip = document.getElementById('closeTip');
|
||||
let openTip = document.getElementById('openTip');
|
||||
infoPanel.style.width = 'auto';
|
||||
infoPanel.style.padding = '10px 60px 10px 20px';
|
||||
infoPanel.style.right = '10px';
|
||||
closeTip.style.display = 'block';
|
||||
openTip.style.display = 'none';
|
||||
})
|
||||
|
||||
let dom_3 = document.createElement('table');
|
||||
dom_3.className = 'infoPanel';
|
||||
dom_3.id = 'infoPanel';
|
||||
let dom_4 = document.createElement('tbody');
|
||||
for (let item in opt) {
|
||||
let dom = document.createElement('tr');
|
||||
let td = document.createElement('td');
|
||||
td.innerHTML = opt[item];
|
||||
dom.appendChild(td);
|
||||
dom_4.appendChild(dom);
|
||||
}
|
||||
dom_3.appendChild(dom_4);
|
||||
|
||||
document.body.appendChild(dom_1);
|
||||
document.body.appendChild(dom_2);
|
||||
document.body.appendChild(dom_3);
|
||||
},
|
||||
reset: function() {}
|
||||
};
|
||||
|
||||
// if (window.location.protocol === 'file:') {
|
||||
// if (window.confirm("You must host this app on a web server.\nSee contributor's guide for more info?")) {
|
||||
// window.location = 'https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-Guide';
|
||||
// }
|
||||
// }
|
||||
}());
|
||||
|
|
@ -7,14 +7,14 @@
|
|||
"name": "规划专题",
|
||||
"open": true,
|
||||
"icon":"/static/images/icon_1.png",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"children": [
|
||||
{
|
||||
"id": 25,
|
||||
"name": "建筑白膜",
|
||||
"url": "http://10.241.127.11:8080/mapdata/建筑白膜/北京/tileset.json",
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_2.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"name": "城市功能区",
|
||||
"layername": "城市功能区.mxd",
|
||||
"type": "geowintms",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_3.png"
|
||||
}
|
||||
]
|
||||
|
|
@ -38,13 +38,13 @@
|
|||
"open": true,
|
||||
"name": "门头沟乡村振兴",
|
||||
"icon":"/static/images/icon_5.png",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"children": [
|
||||
{
|
||||
"id": "WZSC",
|
||||
"name": "苇子水",
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png",
|
||||
"lnglat":[115.9040993,40.0715331]
|
||||
},
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
"id": "QJTC",
|
||||
"name": "千军台",
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"lnglat":[115.8617107,39.9424323],
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
"name": "爨底下",
|
||||
"lnglat":[115.6526124,40.0045780],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
"name": "黄岭西",
|
||||
"lnglat":[115.6522988,39.9825544],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
"name": "碣石村",
|
||||
"lnglat":[115.7645277,40.0493234],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
"name": "沿河城",
|
||||
"lnglat":[115.7318168,40.0786621],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
"name": "东石古岩村",
|
||||
"lnglat":[116.0262491,39.9836081],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
"name": "灵水村",
|
||||
"lnglat":[115.7395450,40.0096296],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
"name": "西胡林",
|
||||
"lnglat":[115.7456049,39.9898217],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
},
|
||||
{
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
"name": "马栏村",
|
||||
"lnglat":[115.7009601,39.9462865],
|
||||
"type": "tileset",
|
||||
"checked": true,
|
||||
"checked": false,
|
||||
"icon":"/static/images/icon_6.png"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-top">
|
||||
<div class="content-title">
|
||||
大型建筑安全监测
|
||||
</div>
|
||||
<div class="content-span">
|
||||
<span>
|
||||
系统介绍:为了有效对超高层建筑物的安全情况进行检测，开发了超高层建筑安全北斗监测预警平台，该平台的大屏展示系统可选配风况监控模块、视频监控模块、雨量计等传感器模块，建立从卫星系统到周边环境一体化监控系统，实现高效率数据分析与可视化展示。
|
||||
<br /><br />界面显示直观易操作，功能强大，灵活方便，信息化管理，智能监测；分析结果呈现方式多样化：通过图形及数字化直观显示，包括时间序列图，能够表示所选时间段上的移动趋势；柱状图，能够表示所选时间段内监测网累计位移情况。
|
||||
<br /><br />系统预警预报及时：通过短信按照预先定义的规则将系统产生的预警信息发送出去。系统可远程登陆，现场动静尽在掌握；系统可集成显示多种传感器的监测信息，让用户更加直观清晰的获取需要信息，提高数据分析效率。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-bottom">
|
||||
<div class="content-bottom-box">
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="content-bottom-title">系统配图</div>
|
||||
</div>
|
||||
<div style="max-width:1440px !important">
|
||||
<div class="content-illustration">
|
||||
<div class="content-illustration-box"
|
||||
v-for='(item,index) in dataList'
|
||||
:key="index">
|
||||
<div class="card">
|
||||
<img :src="item.url"
|
||||
alt="">
|
||||
<div class="title"
|
||||
style="color:#000;t">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dataList: [
|
||||
{
|
||||
url: require('../assets/build/img_1.png'),
|
||||
name: '软件界面'
|
||||
},
|
||||
{
|
||||
url: require('../assets/build/img_2.png'),
|
||||
name: '北斗监测'
|
||||
},
|
||||
{
|
||||
url: require('../assets/build/img_3.png'),
|
||||
name: '环境监测'
|
||||
},
|
||||
{
|
||||
url: require('../assets/build/img_4.png'),
|
||||
name: '地质监测'
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .idnex {
|
||||
background: transparent !important;
|
||||
background-color: #142938 !important ;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
|
||||
.content-top {
|
||||
height: 55vh;
|
||||
background-color: #030b21 !important ;
|
||||
}
|
||||
.content-title {
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
padding-top: 100px;
|
||||
padding-left: 250px;
|
||||
}
|
||||
.content-span {
|
||||
padding-top: 20px;
|
||||
padding-left: 250px;
|
||||
padding-right: 80px;
|
||||
padding-bottom: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.content-bottom {
|
||||
height: auto;
|
||||
min-height: 45vh;
|
||||
width: 100%;
|
||||
background-color: #fff !important ;
|
||||
.content-bottom-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding-top: 20px;
|
||||
padding-left: 100px;
|
||||
align-items: center;
|
||||
}
|
||||
.line1 {
|
||||
height: 30px;
|
||||
width: 10px;
|
||||
background-color: #0400fc;
|
||||
}
|
||||
.line2 {
|
||||
margin-left: 7px;
|
||||
height: 30px;
|
||||
width: 3px;
|
||||
background-color: #0400fc;
|
||||
}
|
||||
.content-bottom-title {
|
||||
color: #0400fc;
|
||||
font-size: 30px;
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.content-illustration {
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
display: flex;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 40px;
|
||||
padding-left: 120px;
|
||||
flex-wrap: wrap;
|
||||
.content-illustration-box {
|
||||
flex: 1 0 0%;
|
||||
padding-top: 1rem !important;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
.card {
|
||||
width: 24rem;
|
||||
img {
|
||||
width: 24rem;
|
||||
height: 14rem;
|
||||
}
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
max-height: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
// height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,8 +7,7 @@
|
|||
trigger="click">
|
||||
<div class="avatar-wrapper">
|
||||
<span style="color: #377dff;">{{ name }}</span>
|
||||
<img :src="avatar"
|
||||
class="user-avatar">
|
||||
<img class="user-avatar">
|
||||
<i class="el-icon-caret-bottom" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
|
|
@ -29,11 +28,28 @@
|
|||
<div class="title-text">城市时空大数据行业应用服务平台</div>
|
||||
</div>
|
||||
<ul class="d-flex menu-ul">
|
||||
<li class="menu-item active" @click="dateItemClick($event)">首页</li>
|
||||
<li class="menu-item" @click="dateItemClick($event)">在线地图</li>
|
||||
<li class="menu-item" @click="dateItemClick($event)">应用示范</li>
|
||||
<li class="menu-item" @click="dateItemClick($event)">资源中心</li>
|
||||
<li class="menu-item" @click="dateItemClick($event)">开发中心</li>
|
||||
<li class="menu-item active"
|
||||
@click="dateItemClick($event)">首页</li>
|
||||
<li class="menu-item"
|
||||
@click="dateItemClick($event)">在线地图</li>
|
||||
<li class="menu-item">
|
||||
<el-dropdown trigger="click"
|
||||
@command="introduce">
|
||||
<span class="el-dropdown-link">
|
||||
应用示范
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="(item,index) in data"
|
||||
:command="item.id"
|
||||
:key="index">{{item.name}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</li>
|
||||
<li class="menu-item" @click="dateItemClick($event)">
|
||||
资源中心
|
||||
</li>
|
||||
<li class="menu-item"
|
||||
@click="dateItemClick($event)">开发中心</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 轮播 start-->
|
||||
|
|
@ -205,7 +221,17 @@ export default {
|
|||
accessCount: null,
|
||||
visitToday: null,
|
||||
userCount: null
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '门头沟区传统村落文化遗产数字资源平台',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: '大型建筑安全监测',
|
||||
id: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -231,16 +257,16 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
async logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
async logout () {
|
||||
this.$confirm('确定注销并退出系统吗？','提示',{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/';
|
||||
location.href='/';
|
||||
})
|
||||
}).catch(() => {});
|
||||
}).catch(() => { });
|
||||
},
|
||||
goTo (name) {
|
||||
this.$router.push({
|
||||
|
|
@ -269,14 +295,11 @@ export default {
|
|||
.removeClass("active");
|
||||
if(event.target.innerText=="在线地图") {
|
||||
this.$router.push(`/maps`);
|
||||
} else if (event.target.innerText == "应用示范") {
|
||||
this.$message({
|
||||
message: '待集成',
|
||||
type: 'info'
|
||||
})
|
||||
} else if (event.target.innerText == "资源中心") {
|
||||
} else if(event.target.innerText=="应用示范") {
|
||||
this.$router.push(`/mentougou`);
|
||||
} else if(event.target.innerText=="资源中心") {
|
||||
this.$router.push(`/resource`);
|
||||
} else if (event.target.innerText == "开发中心") {
|
||||
} else if(event.target.innerText=="开发中心") {
|
||||
window.open("http://10.241.173.163:9000/platform/")
|
||||
}
|
||||
},
|
||||
|
|
@ -323,6 +346,14 @@ export default {
|
|||
this.startInterval();
|
||||
}
|
||||
},
|
||||
introduce (command) {
|
||||
console.log(command)
|
||||
if(command===1) {
|
||||
this.$router.push(`/mentougou`);
|
||||
} else if (command===2){
|
||||
this.$router.push(`/build`);
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -373,6 +404,10 @@ export default {
|
|||
line-height: 2.5rem;
|
||||
font-size: 1.125rem;
|
||||
cursor: pointer;
|
||||
::v-deep .el-dropdown-link {
|
||||
color: #fff !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
}
|
||||
.menu-item:not(.active):hover {
|
||||
font-size: 1.3rem;
|
||||
|
|
|
|||
|
|
@ -1,142 +1,180 @@
|
|||
<template>
|
||||
<div class="index">
|
||||
<el-container class="w-100 h-100">
|
||||
<el-header :style="headerShow">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<img :src="require('@/assets/images/icon-project.png')" alt="" width="48">
|
||||
<div class="title-text">城市时空大数据行业应用服务平台</div>
|
||||
</div>
|
||||
<ul class="d-flex menu-ul">
|
||||
<li class="menu-item">
|
||||
<router-link to="/home" class="route-btn">首页</router-link>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<router-link to="/maps" class="route-btn" active-class="active">在线地图</router-link>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<router-link to="/login" class="route-btn" active-class="active">应用示范</router-link>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<router-link to="/resource" class="route-btn" active-class="active">资源中心</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="user-info">
|
||||
<i class="iconfont icon-renyuan"></i>
|
||||
<div>admin</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main :style="topShow">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
<div class="index">
|
||||
<el-container class="w-100 h-100">
|
||||
<el-header :style="headerShow">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<img :src="require('@/assets/images/icon-project.png')"
|
||||
alt=""
|
||||
width="48">
|
||||
<div class="title-text">城市时空大数据行业应用服务平台</div>
|
||||
</div>
|
||||
<ul class="d-flex menu-ul">
|
||||
<li class="menu-item">
|
||||
<router-link to="/home"
|
||||
class="route-btn">首页</router-link>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<router-link to="/maps"
|
||||
class="route-btn"
|
||||
active-class="active">在线地图</router-link>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<!-- <router-link to="/appDemo"
|
||||
class="route-btn"
|
||||
active-class="active">应用示范</router-link> -->
|
||||
<el-dropdown trigger="click" @command="introduce" >
|
||||
<span class="el-dropdown-link">
|
||||
应用示范
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown" >
|
||||
<el-dropdown-item v-for="(item,index) in data" :command="item.id" :key="index">{{item.name}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<router-link to="/resource"
|
||||
class="route-btn"
|
||||
active-class="active">资源中心</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="user-info">
|
||||
<i class="iconfont icon-renyuan"></i>
|
||||
<div>admin</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main :style="topShow">
|
||||
<router-view />
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'index',
|
||||
data() {
|
||||
return {
|
||||
headerShow:'display:block',
|
||||
topShow:''
|
||||
export default {
|
||||
name: 'index',
|
||||
data () {
|
||||
return {
|
||||
headerShow: 'display:block',
|
||||
topShow: '',
|
||||
data:[
|
||||
{
|
||||
name:'门头沟区传统村落文化遗产数字资源平台',
|
||||
id:1
|
||||
},
|
||||
{
|
||||
name:'大型建筑安全监测',
|
||||
id:2
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
introduce(command){
|
||||
console.log(command)
|
||||
if(command===1){
|
||||
this.$router.push(`/mentougou`);
|
||||
}else if (command===2){
|
||||
this.$router.push(`/build`);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('../assets/images/map-bg.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 3.8rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
height: 6.5rem !important;
|
||||
background: url('../assets/images/bg-title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 1.8rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.title-text {
|
||||
font-size: 1.875rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.menu-ul {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 10.9375rem;
|
||||
height: 2.1875rem;
|
||||
line-height: 2.1875rem;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
background: url('../assets/images/menu_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
margin-right: 50%;
|
||||
}
|
||||
}
|
||||
.index {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url('../assets/images/map-bg.jpg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menu-item :not(.active):hover {
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.2s;
|
||||
color: #2dd2db;
|
||||
}
|
||||
|
||||
.menu-item .active {
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
background: url('../assets/images/menu_bg_selected.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 7.8125rem;
|
||||
height: 2.1875rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(70, 83, 90, 0.78);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #377dff;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1rem;
|
||||
div {
|
||||
width: 60%;
|
||||
padding-left: 10%;
|
||||
border-left: 1px solid rgba(70, 83, 90, 0.78);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.el-main {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 3.8rem;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.el-header {
|
||||
height: 6.5rem !important;
|
||||
background: url('../assets/images/bg-title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 1.8rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.title-text {
|
||||
font-size: 1.875rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.menu-ul {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 5%;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 10.9375rem;
|
||||
height: 2.1875rem;
|
||||
line-height: 2.1875rem;
|
||||
list-style-type: none;
|
||||
text-align: center;
|
||||
margin-right: 1rem;
|
||||
background: url('../assets/images/menu_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
margin-right: 50%;
|
||||
}
|
||||
::v-deep .el-dropdown-link {
|
||||
color: #fff !important;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item :not(.active):hover {
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.2s;
|
||||
color: #2dd2db;
|
||||
}
|
||||
|
||||
.menu-item .active {
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
background: url('../assets/images/menu_bg_selected.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 7.8125rem;
|
||||
height: 2.1875rem;
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(70, 83, 90, 0.78);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
color: #377dff;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 1rem;
|
||||
div {
|
||||
width: 60%;
|
||||
padding-left: 10%;
|
||||
border-left: 1px solid rgba(70, 83, 90, 0.78);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
@click="removeMeasure">
|
||||
<el-tooltip class="item"
|
||||
effect="dark"
|
||||
content="信息条"
|
||||
content="重置"
|
||||
placement="left">
|
||||
<i class="iconfont icon-fuwei"></i>
|
||||
</el-tooltip>
|
||||
|
|
@ -146,9 +146,102 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toolbar"
|
||||
<!-- <div id="toolbar"
|
||||
style="top:0;left:0">
|
||||
|
||||
</div> -->
|
||||
<div class="top_set"
|
||||
v-show="topset">
|
||||
<div id="toolbar">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="header">Sunshine Params</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>日期选择</td>
|
||||
<td>
|
||||
<input id="date"
|
||||
type="date"
|
||||
onchange="changeDate()">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>开始时间</td>
|
||||
<td>
|
||||
<select name="startTime"
|
||||
id="startTime"
|
||||
onchange="changeStartTime()">
|
||||
<option value="00:00">00:00</option>
|
||||
<option value="02:00">02:00</option>
|
||||
<option value="04:00">04:00</option>
|
||||
<option value="06:00">06:00</option>
|
||||
<option value="08:00">08:00</option>
|
||||
<option value="10:00">10:00</option>
|
||||
<option value="12:00">12:00</option>
|
||||
<option value="14:00">14:00</option>
|
||||
<option value="16:00">16:00</option>
|
||||
<option value="18:00">18:00</option>
|
||||
<option value="20:00"
|
||||
selected>20:00</option>
|
||||
<option value="22:00">22:00</option>
|
||||
<option value="24:00">24:00</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>结束时间</td>
|
||||
<td>
|
||||
<select name="endTime"
|
||||
id="endTime"
|
||||
onchange="changeEndTime()">
|
||||
<option value="00:00">00:00</option>
|
||||
<option value="02:00">02:00</option>
|
||||
<option value="04:00">04:00</option>
|
||||
<option value="06:00">06:00</option>
|
||||
<option value="08:00">08:00</option>
|
||||
<option value="10:00">10:00</option>
|
||||
<option value="12:00">12:00</option>
|
||||
<option value="14:00">14:00</option>
|
||||
<option value="16:00">16:00</option>
|
||||
<option value="18:00">18:00</option>
|
||||
<option value="20:00">20:00</option>
|
||||
<option value="22:00"
|
||||
selected>22:00</option>
|
||||
<option value="24:00">24:00</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>底部高度</td>
|
||||
<td>
|
||||
<input id="height"
|
||||
type="number"
|
||||
step="1"
|
||||
value="10"
|
||||
onchange="changeHeight()">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>拉伸高度</td>
|
||||
<td>
|
||||
<input id="extrudedHeight"
|
||||
type="number"
|
||||
step="1"
|
||||
value="20"
|
||||
onchange="changeExtrudedHeight()">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<el-button size="mini"
|
||||
@click="startSunshine">开始绘制</el-button>
|
||||
<el-button size="mini"
|
||||
@click="removeSunshine"
|
||||
style="margin-left:20px">清空</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -188,8 +281,12 @@ export default {
|
|||
currentGroupName: '',
|
||||
handler: null,
|
||||
slp: null,
|
||||
volm: null,
|
||||
sunshine: null,
|
||||
vg: null,
|
||||
layerList: [],
|
||||
cameraInfoList:undefined
|
||||
cameraInfoList: undefined,
|
||||
topset: false
|
||||
// distancehandler:null,
|
||||
// areahandler:null
|
||||
};
|
||||
|
|
@ -309,7 +406,7 @@ export default {
|
|||
this.setSkyNone();
|
||||
this.mapInfo()
|
||||
this.laodAllLandform()
|
||||
|
||||
|
||||
// viewer.terrainProvider = new Geowin3D.Geowin3DTerrainProvider({
|
||||
// url: "https://terrain.gbim360.com/"
|
||||
// });
|
||||
|
|
@ -462,7 +559,7 @@ export default {
|
|||
});
|
||||
geoapp.show(layer);
|
||||
} else if(item.children[i].type==='tileset'&&item.id===3) {
|
||||
loadTerrain(viewer,datamap.dem);
|
||||
// loadTerrain(viewer,datamap.dem);
|
||||
// this.load3DTiles(item.children[i].url,item.children[i].modelMatrix);
|
||||
layer=geoapp.load3DTileset({
|
||||
url: item.children[i].url,
|
||||
|
|
@ -473,11 +570,12 @@ export default {
|
|||
}
|
||||
this.layerManager[item.children[i].id]={ treeNode: item.children[i],layer: layer };
|
||||
viewer.scene.requestRender();
|
||||
|
||||
|
||||
}
|
||||
this.loadAdministrativeBoundary()
|
||||
}
|
||||
})
|
||||
this.loadAdministrativeBoundary()
|
||||
|
||||
},
|
||||
initTreeRight () {
|
||||
const that=this
|
||||
|
|
@ -505,13 +603,13 @@ export default {
|
|||
},
|
||||
callback: {
|
||||
onClick: function(event,treeId,treeNode) {
|
||||
if(treeNode.id==3) {
|
||||
console.log('门头沟')
|
||||
window.open('/static/pdf/mentougou.pdf')
|
||||
} else if(treeNode.id==5){
|
||||
console.log('变形监测')
|
||||
window.open('/static/pdf/big.pdf')
|
||||
};
|
||||
// if(treeNode.id==3) {
|
||||
// console.log('门头沟')
|
||||
// window.open('/static/pdf/mentougou.pdf')
|
||||
// } else if(treeNode.id==5) {
|
||||
// console.log('变形监测')
|
||||
// window.open('/static/pdf/big.pdf')
|
||||
// };
|
||||
},
|
||||
onCheck: function(event,treeId,treeNode) {
|
||||
if(treeNode.checked==false) {
|
||||
|
|
@ -528,14 +626,40 @@ export default {
|
|||
zNodes
|
||||
); //初始化树
|
||||
this.zTreeObjRight.expandAll(true);
|
||||
|
||||
|
||||
},
|
||||
loadService (treeNode) {
|
||||
console.log(treeNode)
|
||||
let layer=null
|
||||
let layer1=null
|
||||
let layer2=null
|
||||
if(treeNode.id===331) {
|
||||
if(treeNode.id===1) {
|
||||
for(let i=0;i<treeNode.children.length;i++) {
|
||||
if(treeNode.children[i].type==='geowintms') {
|
||||
var url=`${config.geowinaeurl}/ds?requesttype=img&srs=EPSG:3857&serviceproviderid=arc.commonserviceprovider&serviceid=gettile&mxd=${treeNode.children[i]["layername"]}&x={x}&y={y}&z={z}`
|
||||
layer=geoapp.addImageLayer({
|
||||
url: url,
|
||||
bounds: treeNode.children[i]["bounds"],
|
||||
});
|
||||
|
||||
if(treeNode.children[i].options!=null) {
|
||||
for(var x in treeNode.children[i].options) {
|
||||
layer[x]=treeNode.children[i].options[x];
|
||||
}
|
||||
}
|
||||
} else if(treeNode.children[i].type==='tileset'&&treeNode.id===1) {
|
||||
if(viewer.camera._mode==2) return;
|
||||
layer=geoapp.load3DTileset({
|
||||
url: treeNode.children[i].url,
|
||||
position: treeNode.children[i].position,
|
||||
orientation: treeNode.children[i].orientation,
|
||||
});
|
||||
geoapp.show(layer);
|
||||
}
|
||||
this.layerManager[treeNode.children[i].id]={ treeNode: treeNode.children[i],layer: layer };
|
||||
viewer.scene.requestRender();
|
||||
}
|
||||
} else if(treeNode.id===331) {
|
||||
var url=`${config.geowinaeurl}/ds?requesttype=img&srs=EPSG:3857&serviceproviderid=arc.commonserviceprovider&serviceid=gettile&mxd=${treeNode["layername"]}&x={x}&y={y}&z={z}`
|
||||
layer1=geoapp.addImageLayer({
|
||||
url: url,
|
||||
|
|
@ -559,16 +683,36 @@ export default {
|
|||
geoapp.show(layer2);
|
||||
this.layerManager[25]={ layer: layer2 };
|
||||
} else if(treeNode.id===3) {
|
||||
loadTerrain(viewer,datamap.dem);
|
||||
// 加载所有的三维瓦片
|
||||
const tileListSort=[...datamap.default.slice(1),datamap.default[0]]; //保障第一个数据最后加载，此时地图切换至此
|
||||
tileListSort.forEach((tiles) => {
|
||||
layer=geoapp.load3DTileset({
|
||||
url: tiles.url,
|
||||
modelMatrix: tiles.modelMatrix,
|
||||
});
|
||||
geoapp.show(layer);
|
||||
});
|
||||
// loadTerrain(viewer,datamap.dem);
|
||||
// // 加载所有的三维瓦片
|
||||
// const tileListSort=[...datamap.default.slice(1),datamap.default[0]]; //保障第一个数据最后加载，此时地图切换至此
|
||||
// tileListSort.forEach((tiles) => {
|
||||
// layer=geoapp.load3DTileset({
|
||||
// url: tiles.url,
|
||||
// modelMatrix: tiles.modelMatrix,
|
||||
// });
|
||||
// geoapp.show(layer);
|
||||
// this.layerManager[tiles.id]={ treeNode: tiles,layer: layer };
|
||||
// });
|
||||
// this.loadAdministrativeBoundary()
|
||||
this.dataList.forEach(item => {
|
||||
console.log(item)
|
||||
let layer
|
||||
if(item.children) {
|
||||
for(let i=0;i<item.children.length;i++) {
|
||||
if(item.children[i].type==='tileset'&&item.id===3) {
|
||||
layer=geoapp.load3DTileset({
|
||||
url: item.children[i].url,
|
||||
modelMatrix: item.children[i].modelMatrix,
|
||||
});
|
||||
geoapp.show(layer);
|
||||
this.layerList.push(layer);
|
||||
}
|
||||
this.layerManager[item.children[i].id]={ treeNode: item.children[i],layer: layer };
|
||||
viewer.scene.requestRender();
|
||||
}
|
||||
}
|
||||
})
|
||||
this.loadAdministrativeBoundary()
|
||||
} else if(treeNode.type==='tileset'&&treeNode.modelMatrix) {
|
||||
layer=geoapp.load3DTileset({
|
||||
|
|
@ -863,6 +1007,106 @@ export default {
|
|||
};
|
||||
this.slp.set(option);
|
||||
this.slp.start();
|
||||
} else if(item.name==='土方量分析') {
|
||||
this.volm.start();
|
||||
this.volm.showGrids=true;
|
||||
} else if(item.name==='日照分析') {
|
||||
let that=this
|
||||
that.topset=!that.topset
|
||||
|
||||
var dateInp=document.getElementById('date');
|
||||
var startTimeInp=document.getElementById('startTime');
|
||||
var endTimeInp=document.getElementById('endTime');
|
||||
var heightInp=document.getElementById('height');
|
||||
var extrudedHeightInp=document.getElementById('extrudedHeight');
|
||||
|
||||
var timer=undefined;
|
||||
|
||||
var date=new Date();
|
||||
var year=date.getFullYear();
|
||||
var month=date.getMonth()+1;
|
||||
var day=date.getDate();
|
||||
if(month<10) {
|
||||
month='0'+month;
|
||||
}
|
||||
|
||||
if(day<10) {
|
||||
day='0'+day;
|
||||
}
|
||||
|
||||
dateInp.value=year+'-'+month+'-'+day;
|
||||
|
||||
init();
|
||||
|
||||
// 初始化相关参数
|
||||
function init () {
|
||||
var date=dateInp.value;
|
||||
var height=heightInp.value;
|
||||
var extrudedHeight=extrudedHeightInp.value;
|
||||
var startTime=startTimeInp.value;
|
||||
var endTime=endTimeInp.value;
|
||||
|
||||
that.sunshine&&that.sunshine.update({ date,startTime,endTime,height,extrudedHeight });
|
||||
}
|
||||
|
||||
// 更新日期
|
||||
function changeDate () {
|
||||
var date=dateInp.value;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer=setTimeout(() => {
|
||||
that.sunshine&&that.sunshine.update({ date });
|
||||
},500);
|
||||
}
|
||||
|
||||
// 更新开始时间
|
||||
function changeStartTime () {
|
||||
var startTime=startTimeInp.value;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer=setTimeout(() => {
|
||||
that.sunshine&&that.sunshine.update({ startTime });
|
||||
},500);
|
||||
}
|
||||
|
||||
// 更新结束时间
|
||||
function changeEndTime () {
|
||||
var endTime=endTimeInp.value;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer=setTimeout(() => {
|
||||
that.sunshine&&that.sunshine.update({ endTime });
|
||||
},500);
|
||||
}
|
||||
|
||||
// 更新底部高度
|
||||
function changeHeight () {
|
||||
var height=heightInp.value;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer=setTimeout(() => {
|
||||
that.sunshine&&that.sunshine.update({ height });
|
||||
},500);
|
||||
}
|
||||
|
||||
// 更新拉伸高度
|
||||
function changeExtrudedHeight () {
|
||||
var extrudedHeight=extrudedHeightInp.value;
|
||||
|
||||
clearTimeout(timer);
|
||||
timer=setTimeout(() => {
|
||||
that.sunshine&&that.sunshine.update({ extrudedHeight });
|
||||
},500);
|
||||
}
|
||||
} else if(item.name==='视廊分析') {
|
||||
|
||||
this.vg.setHighlightType(0);
|
||||
this.vg.setLimitHeight(30);
|
||||
this.vg.start();
|
||||
} else if(item.name==='清除') {
|
||||
if(this.slp) this.slp.destroy();
|
||||
if(this.volm) this.volm.destroy()
|
||||
if(this.sunshine) this.sunshine.destroy()
|
||||
} else if(item.name==='取消') {
|
||||
am.cancel()
|
||||
|
||||
|
|
@ -870,6 +1114,12 @@ export default {
|
|||
am.start(item.id);
|
||||
}
|
||||
},
|
||||
startSunshine () {
|
||||
this.sunshine.start()
|
||||
},
|
||||
removeSunshine () {
|
||||
this.sunshine.destroy()
|
||||
},
|
||||
// 地图分析
|
||||
analyzeTool () {
|
||||
|
||||
|
|
@ -892,32 +1142,41 @@ export default {
|
|||
Geowin3D.knockout.applyBindings(params,toolbar);
|
||||
viewer.scene.requestRenderMode=false
|
||||
this.slp=new Geowin3D.GwTools.GwSlope(viewer);
|
||||
this.toolList=[
|
||||
{
|
||||
name: '坡度坡向分析',
|
||||
id: ''
|
||||
},
|
||||
{
|
||||
name: '土方量分析',
|
||||
id: ''
|
||||
},
|
||||
{
|
||||
name: '日照分析',
|
||||
id: ''
|
||||
},
|
||||
{
|
||||
name: '视廊分析',
|
||||
id: ''
|
||||
},
|
||||
]
|
||||
this.volm=new Geowin3D.GwTools.GwVolumn(viewer)
|
||||
this.sunshine=new Geowin3D.GwTools.GwSunshine(viewer);
|
||||
this.vg=new Geowin3D.GwTools.GwVisualGallery(viewer);
|
||||
this.vg.showGallery();
|
||||
this.vg.show()
|
||||
this.toolList=[
|
||||
{
|
||||
name: '坡度坡向分析',
|
||||
id: ''
|
||||
},
|
||||
{
|
||||
name: '土方量分析',
|
||||
id: ''
|
||||
},
|
||||
{
|
||||
name: '日照分析',
|
||||
id: ''
|
||||
},
|
||||
{
|
||||
name: '视廊分析',
|
||||
id: ''
|
||||
},
|
||||
{
|
||||
name: '清除',
|
||||
id: ''
|
||||
},
|
||||
]
|
||||
this.toolShow=true
|
||||
},
|
||||
// 清除测量数据
|
||||
removeMeasure () {
|
||||
am.removeAll();
|
||||
|
||||
|
||||
},
|
||||
mapInfo(){
|
||||
mapInfo () {
|
||||
if(typeof this.cameraInfoList==='undefined') {
|
||||
this.cameraInfoList=new Geowin3D.GwWidgets.GwCamera(viewer);
|
||||
} else {
|
||||
|
|
@ -929,7 +1188,7 @@ export default {
|
|||
removeLayer (treeNode) {
|
||||
console.log(treeNode)
|
||||
var id=treeNode.id;
|
||||
if(this.layerManager[id]==null) return;
|
||||
// if(this.layerManager[id]==null) return;
|
||||
if(treeNode.type=="tileset"||treeNode.type=="geowintms"||treeNode.type=="tms"||treeNode.type=="knowntms"||treeNode.type=="gltf") {
|
||||
console.log(this.layerManager[id])
|
||||
geoapp.hide(this.layerManager[id].layer);
|
||||
|
|
@ -941,11 +1200,24 @@ export default {
|
|||
}
|
||||
if(treeNode.id==3) {
|
||||
treeNode.children.forEach(item => {
|
||||
geoapp.hide(this.layerManager[item.id].layer);
|
||||
|
||||
geoapp.hide(this.layerManager[item.id].layer);
|
||||
|
||||
})
|
||||
viewer.dataSources.removeAll()
|
||||
}
|
||||
if(treeNode.id==1) {
|
||||
treeNode.children.forEach(item => {
|
||||
if(item.type=="tileset"||item.type=="geowintms"||item.type=="tms"||item.type=="knowntms"||item.type=="gltf") {
|
||||
console.log(this.layerManager[item.id])
|
||||
geoapp.hide(this.layerManager[item.id].layer);
|
||||
return;
|
||||
}
|
||||
if(item.type=="geowindem"||item.type=="dem") {
|
||||
geoapp.removeTerrain();
|
||||
return;
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.layerManager[id].layer)
|
||||
geoapp.removeEntity(this.layerManager[id].layer);
|
||||
delete this.layerManager[id];
|
||||
|
|
@ -1221,5 +1493,54 @@ export default {
|
|||
.tool_content div span {
|
||||
margin: 5px 5px;
|
||||
}
|
||||
.top_set {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
z-index: 9999;
|
||||
left: 50px;
|
||||
.cesium-viewer-toolbar {
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
background: rgba(42, 42, 42, 0.8);
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#toolbar input {
|
||||
vertical-align: middle;
|
||||
padding: 1px 2px;
|
||||
width: 176px;
|
||||
height: 22px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#toolbar select {
|
||||
vertical-align: middle;
|
||||
padding: 1px 2px;
|
||||
width: 182px;
|
||||
height: 26px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#toolbar .header {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#toolbar tr {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
#toolbar .Freedo-button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#toolbar tr span {
|
||||
margin: 0 3px 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,174 @@
|
|||
<template>
|
||||
<div class="content">
|
||||
<div class="content-top">
|
||||
<div class="content-title">
|
||||
门头沟区传统村落文化遗产数字资源平台
|
||||
</div>
|
||||
<div class="content-span">
|
||||
<span>
|
||||
系统介绍:
|
||||
为了做好影像采集成果数字归档工作，建立了“门头沟区传统村落文化遗产数字平台”，系统集成卫星影像、三维院落三维景观等地理信息数据，收集了大量传统村落相关资料，实现了传统村落三维在线展览、文化遗产数字化档案管理、地理信息数据与场景化融合展示等功能版块。
|
||||
<br /><br />资源调查主要将门头沟区多个村落的建筑遗产等级、院落格局、形成年代、建筑数量、环境要素、现状功能、产权性质等多种属性信息集成，直观展示文化建筑的分布数量等。借助地理数据和地图的灵活性，能够从全局、局部两个角度展示门头沟区的建筑遗产分布，以全局宏观、局部微观两种模式对建筑遗产进行数字化说明，为传统村落保护奠定了一定的基础。
|
||||
<br /><br />实景三维主要包括这不同村落的三维建模，并且将建模后的数字化信息通过功能封装在不同视图下进行可视化，形成效果逼真的实景村落展示效果。
|
||||
<br /><br />不同建筑遗产的内外布局结构通过全方位的信息加以说明，包括院落、宅门、一进西厢房、正房、倒座房，同时这些位置对应的属性信息、照片信息能够全面表达。
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-bottom">
|
||||
<div class="content-bottom-box">
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="content-bottom-title">系统配图</div>
|
||||
</div>
|
||||
<div style="max-width:1440px !important">
|
||||
<div class="content-illustration">
|
||||
<div class="content-illustration-box"
|
||||
v-for='(item,index) in dataList'
|
||||
:key="index">
|
||||
<div class="card">
|
||||
<img :src="item.url"
|
||||
alt="">
|
||||
<div class="title" style="color:#000;t">{{item.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dataList: [
|
||||
{
|
||||
url: require('../assets/mentougou/img_1.png'),
|
||||
name: '资源调查'
|
||||
},
|
||||
{
|
||||
url: require('../assets/mentougou/img_2.png'),
|
||||
name: '实景三维'
|
||||
},
|
||||
{
|
||||
url: require('../assets/mentougou/img_3.png'),
|
||||
name: '门头沟区域'
|
||||
},
|
||||
{
|
||||
url: require('../assets/mentougou/img_4.png'),
|
||||
name: '建筑遗产'
|
||||
},
|
||||
{
|
||||
url: require('../assets/mentougou/img_5.png'),
|
||||
name: '村落宣传'
|
||||
},
|
||||
{
|
||||
url: require('../assets/mentougou/img_6.png'),
|
||||
name: '村落实景'
|
||||
},
|
||||
{
|
||||
url: require('../assets/mentougou/img_7.png'),
|
||||
name: '属性信息'
|
||||
},
|
||||
{
|
||||
url: require('../assets/mentougou/img_8.png'),
|
||||
name: '文本信息'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .idnex {
|
||||
background: transparent !important;
|
||||
background-color: #142938 !important ;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
|
||||
.content-top {
|
||||
height: 55vh;
|
||||
background-color: #030b21 !important ;
|
||||
}
|
||||
.content-title {
|
||||
font-weight: 600;
|
||||
font-size: 3rem;
|
||||
padding-top: 100px;
|
||||
padding-left: 250px;
|
||||
}
|
||||
.content-span {
|
||||
padding-top: 20px;
|
||||
padding-left: 250px;
|
||||
padding-right: 80px;
|
||||
padding-bottom: 40px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.content-bottom {
|
||||
height: auto;
|
||||
min-height: 45vh;
|
||||
width: 100%;
|
||||
background-color: #fff !important ;
|
||||
.content-bottom-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding-top: 20px;
|
||||
padding-left: 100px;
|
||||
align-items: center;
|
||||
}
|
||||
.line1 {
|
||||
height: 30px;
|
||||
width: 10px;
|
||||
background-color: #0400fc;
|
||||
}
|
||||
.line2 {
|
||||
margin-left: 7px;
|
||||
height: 30px;
|
||||
width: 3px;
|
||||
background-color: #0400fc;
|
||||
}
|
||||
.content-bottom-title {
|
||||
color: #0400fc;
|
||||
font-size: 30px;
|
||||
margin-left: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.content-illustration {
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
display: flex;
|
||||
padding-bottom:40px;
|
||||
padding-top: 40px;
|
||||
padding-left: 120px;
|
||||
flex-wrap: wrap;
|
||||
.content-illustration-box {
|
||||
flex: 1 0 0%;
|
||||
padding-top: 1rem !important;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
.card {
|
||||
width: 24rem;
|
||||
img{
|
||||
width: 24rem;
|
||||
height: 14rem;
|
||||
}
|
||||
.title{
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
max-height: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
// height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue