<template>
|
<div>
|
<!-- 滑动条 -->
|
<div class="hdthx" v-show="hdthx"></div>
|
<div class="hdtzx" v-show="hdtzx"></div>
|
<!-- 菜单按钮 -->
|
<div class="caidanan" @touchstart="hdtstart" @touchend="hdtend">
|
<el-button
|
id="isshowmenubtn"
|
v-show="menubtn"
|
@click="menuisopen"
|
title="菜单"
|
style="padding: 0; border: none; background-color: transparent"
|
>
|
<img
|
style="width: 0.4rem; height: 0.4rem"
|
src="../../../static/img/image/cd.png"
|
/>
|
</el-button>
|
</div>
|
<!-- 菜单 -->
|
<div id="menu" class="menu">
|
<div class="menu-item" v-show="active">
|
<div class="caidan" @click="active = false">
|
<span style="color: white">菜单</span>
|
</div>
|
<ul class="caidanul" style="height: 2rem">
|
<li>
|
<a href="javascript:void(0)" @click="zyml">
|
<img src="../../../static/img/image/zyml.png" alt="" />
|
<span>资源目录</span>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" @click="kjfxf">
|
<img src="../../../static/img/image/kjfx.png" alt="" />
|
<span>空间分析</span>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" @click="biaohui">
|
<img src="../../../static/img/image/bh.png" alt="" />
|
<span>标绘</span>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" @click="liangsuan">
|
<img src="../../../static/img/image/ls.png" alt="" />
|
<span>量算</span>
|
</a>
|
</li>
|
<!-- <li>
|
<a href="javascript:void(0)" @click="kjcxf">
|
<img src="../../../static/img/image/kjcx.png" alt="" />
|
<span>空间查询</span>
|
</a>
|
</li> -->
|
<li>
|
<a href="javascript:void(0)" @click="dxkjcx">
|
<img src="../../../static/img/image/dx.png" alt="" />
|
<span>点选查询</span>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" @click="manyou">
|
<img src="../../../static/img/image/my.png" alt="" />
|
<span>漫游</span>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" @click="sslk">
|
<img src="../../../static/img/image/sslk.png" alt="" />
|
<span>实时路况</span>
|
</a>
|
</li>
|
|
<li>
|
<a href="javascript:void(0)" @click="dxms">
|
<img src="../../../static/img/image/dxdh.png" alt="" />
|
<span>地下模式</span>
|
</a>
|
</li>
|
<!-- <li>
|
<a href="javascript:void(0)" @click="snms">
|
<img src="../../../static/img/image/sndh.png" alt="" />
|
<span>室内导航</span>
|
</a>
|
</li> -->
|
<li>
|
<a href="javascript:void(0)" @click="weizhi">
|
<img src="../../../static/img/image/sc_32.png" alt="" />
|
<span>位置</span>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" @click="yjqc">
|
<img src="../../../static/img/image/qc.png" alt="" />
|
<span>一键清除</span>
|
</a>
|
</li>
|
<li>
|
<a href="javascript:void(0)" @click="sz">
|
<img src="../../../static/img/image/sz.png" alt="" />
|
<span>设置</span>
|
</a>
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- 设置页面 -->
|
<div v-show="showsz" class="shezhi">
|
<div class="menutop" style="margin: 0 0.1rem">
|
<div class="menuback" @click="back">
|
<i class="el-icon-caret-left"></i>返回
|
</div>
|
<div class="menutitle">设置</div>
|
</div>
|
<div class="firle">
|
<div class="shezhiitem">
|
<!-- <i class="fwimg"></i> -->
|
<img src="../../../static/img/new/fw-szy.png" alt="" />
|
<span style="width: 80%">复位</span>
|
<el-switch v-model="szstatus.fwval"></el-switch>
|
</div>
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/zbz-szy.png" alt="" />
|
<span>指北针</span>
|
<el-switch v-model="szstatus.zbzval"></el-switch>
|
</div>
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/qp-szy.png" alt="" />
|
<span>全屏</span>
|
<el-switch v-model="szstatus.qpval"></el-switch>
|
</div>
|
</div>
|
<div class="secle">
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/zyml-szy.png" alt="" />
|
<span>资源目录</span>
|
<el-switch v-model="szstatus.zymlval"></el-switch>
|
</div>
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/kjcx-szy.png" alt="" />
|
<span>空间分析</span>
|
<el-switch v-model="szstatus.kjcxval"></el-switch>
|
</div>
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/sc.png" alt="" />
|
<span>收藏</span>
|
<el-switch v-model="szstatus.scval"></el-switch>
|
</div>
|
</div>
|
<!-- <div class="thrle">
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/dxms-szy.png" alt="" />
|
<span>地下模式</span>
|
<el-switch v-model="szstatus.dxmsval"></el-switch>
|
</div>
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/snms-szy.png" alt="" />
|
<span>室内模式</span>
|
<el-switch v-model="szstatus.snmsval"></el-switch>
|
</div>
|
</div> -->
|
<div class="foule">
|
<div class="shezhiitem">
|
<img src="../../../static/img/new/ss-szy.png" alt="" />
|
<span>搜索</span>
|
<el-switch v-model="szstatus.ssval"></el-switch>
|
</div>
|
</div>
|
</div>
|
<!-- 空間分析按鈕和收藏按钮 -->
|
<div class="funButtons">
|
<div class="funButton" v-show="szstatus.kjcxval" @click="ztqh">
|
<el-button title="分析">
|
<img
|
style="width: 0.4rem; height: 0.4rem"
|
src="../../../static/img/image/kjfx1.png"
|
/>
|
</el-button>
|
</div>
|
<div class="funButton" v-show="szstatus.scval" @click="showNewJm">
|
<el-button title="收藏">
|
<img
|
style="width: 0.4rem; height: 0.4rem"
|
src="../../../static/img/image/sc1.png"
|
/>
|
</el-button>
|
</div>
|
</div>
|
<!-- 收藏界面 -->
|
<div class="scNewJmStyle" v-show="scNewJm">
|
<div class="menutop" style="margin: 0 0.1rem">
|
<div class="menuback" @click="back">
|
<i class="el-icon-caret-left"></i>返回
|
</div>
|
<div class="menutitle">收藏</div>
|
</div>
|
<div style="width: 80%; margin: 0.2rem auto" id="sc">
|
<el-input
|
placeholder="请输入收藏点名称"
|
v-model="scVal"
|
size="small"
|
></el-input>
|
<div style="text-align: center; margin-top: 5%">
|
<el-button size="mini" @click="cancelSc">取消</el-button>
|
<el-button type="primary" size="mini" @click="addSc">确定</el-button>
|
</div>
|
</div>
|
</div>
|
<!-- 空间分析界面 -->
|
<div class="kjfx" v-show="showkjfx">
|
<div class="back">
|
<div class="fhjt" @click="back">
|
<i class="el-icon-caret-left"></i>
|
</div>
|
<div class="cdbt">
|
<span>空间分析</span>
|
</div>
|
</div>
|
<div class="kjfxitem" @click="dgxfx">
|
<img src="../../../static/img/image/dgxfx.png" alt="" />
|
<span>等高线分析</span>
|
</div>
|
<div class="kjfxitem" @click="pdfx">
|
<img src="../../../static/img/image/pdfx.png" alt="" />
|
<span>坡度分析</span>
|
</div>
|
<div class="kjfxitem" @click="syfx">
|
<img src="../../../static/img/image/syfx.png" alt="" />
|
<span>视域分析</span>
|
</div>
|
<div class="kjfxitem" @click="pmfx">
|
<img src="../../../static/img/image/pmfx.png" alt="" />
|
<span>剖面分析</span>
|
</div>
|
<div class="kjfxitem" @click="yyfx">
|
<img src="../../../static/img/image/yyfx.png" alt="" />
|
<span>阴影分析</span>
|
</div>
|
</div>
|
|
<!-- 等高线分析功能界面 -->
|
<div class="fxjm" v-show="dgxfxjm">
|
<!-- 上层 -->
|
<div class="fxjmtop">
|
<div
|
style="
|
float: right;
|
margin-top: -0.2rem;
|
margin-right: -0.2rem;
|
color: white;
|
font-size: 0.26rem;
|
"
|
@click="closegnjm"
|
>
|
<i class="el-icon-circle-close"></i>
|
</div>
|
|
<div
|
style="
|
width: 100%;
|
height: 0.49rem;
|
line-height: 0.49rem;
|
color: white;
|
"
|
>
|
显示海拔与等高线
|
</div>
|
</div>
|
<!-- 下层 -->
|
<div class="fxjmbottom">
|
<img src="../../../static/img/image/cd3.png" alt="" />
|
<img
|
src="../../../static/img/image/dgxfx.png"
|
alt=""
|
@click="showdgx"
|
/>
|
<img src="../../../static/img/image/qc.png" @click="hidedgx" />
|
</div>
|
</div>
|
|
<!-- 坡度分析功能界面 -->
|
<div class="fxjm" v-show="pdfxjm">
|
<!-- 上层 -->
|
<div class="fxjmtop">
|
<div
|
style="
|
float: right;
|
margin-top: -0.2rem;
|
margin-right: -0.2rem;
|
color: white;
|
font-size: 0.26rem;
|
"
|
@click="closegnjm"
|
>
|
<i class="el-icon-circle-close"></i>
|
</div>
|
</div>
|
<!-- 下层 -->
|
<div class="fxjmbottom">
|
<img src="../../../static/img/image/cd3.png" alt="" />
|
<img src="../../../static/img/image/pdfx.png" alt="" />
|
<img src="../../../static/img/image/qc.png" />
|
</div>
|
</div>
|
|
<!-- 标绘功能界面 -->
|
<div class="fxjm" v-show="bhjm">
|
<!-- 上层 -->
|
<div class="fxjmtop">
|
<div
|
style="
|
float: right;
|
margin-top: -0.1rem;
|
margin-right: -0.1rem;
|
color: white;
|
font-size: 0.26rem;
|
"
|
@click="closegnjm"
|
>
|
<i
|
style="border-radius: 50%; background: black"
|
class="el-icon-circle-close"
|
></i>
|
</div>
|
<!-- 显示提示信息 -->
|
<div
|
id="bhjg"
|
style="
|
width: 100%;
|
height: 0.49rem;
|
line-height: 0.49rem;
|
color: white;
|
"
|
></div>
|
</div>
|
<!-- 下层 -->
|
<div class="fxjmbottom">
|
<img
|
src="../../../static/img/image/cd3.png"
|
@click="backtomenu"
|
alt=""
|
/>
|
<img src="../../../static/img/image/dian.png" @click="hzdian" alt="" />
|
<img src="../../../static/img/image/xian.png" @click="hzxian" alt="" />
|
<img src="../../../static/img/image/mian.png" @click="hzmian" alt="" />
|
<img src="../../../static/img/image/ti.png" @click="hzti" alt="" />
|
<img src="../../../static/img/image/qc.png" @click="clearbh" />
|
</div>
|
</div>
|
|
<!-- 空间查询功能界面 -->
|
<!-- 空间分析界面 -->
|
<div class="kjfx" v-show="kjcx">
|
<div class="back">
|
<div class="fhjt" @click="back">
|
<i class="el-icon-caret-left"></i>
|
</div>
|
<div class="cdbt">
|
<span>空间查询</span>
|
</div>
|
</div>
|
<div class="kjfxitem" @click="dxkjcx">
|
<img src="../../../static/img/image/dx.png" alt="" />
|
<span>点选查询</span>
|
</div>
|
<div class="kjfxitem" @click="kxkjcx">
|
<img src="../../../static/img/image/kx.png" alt="" />
|
<span>框选查询</span>
|
</div>
|
</div>
|
|
<!-- 量算功能界面 -->
|
<div class="fxjm" v-show="lsjm">
|
<!-- 上层 -->
|
<div class="fxjmtop">
|
<div
|
style="
|
float: right;
|
margin-top: -0.1rem;
|
margin-right: -0.1rem;
|
color: white;
|
font-size: 0.26rem;
|
"
|
@click="closegnjm"
|
>
|
<i
|
style="border-radius: 50%; background: black"
|
class="el-icon-circle-close"
|
></i>
|
</div>
|
<div
|
id="lsjg"
|
style="
|
width: 100%;
|
height: 0.49rem;
|
line-height: 0.49rem;
|
color: white;
|
"
|
></div>
|
</div>
|
<!-- 下层 -->
|
<div class="fxjmbottom">
|
<img
|
src="../../../static/img/image/cd3.png"
|
@click="backtomenu"
|
alt=""
|
/>
|
<img src="../../../static/img/image/jl.png" @click="lsjl" alt="距离" />
|
<img
|
src="../../../static/img/image/bmjl.png"
|
@click="lsbmjl"
|
alt="表面距离"
|
/>
|
<img src="../../../static/img/image/mj.png" @click="lsmj" alt="面积" />
|
<img
|
src="../../../static/img/image/bmmj.png"
|
@click="lsbmmj"
|
alt="表面面积"
|
/>
|
<img src="../../../static/img/image/gd.png" @click="lsgd" />
|
<img src="../../../static/img/image/tj.png" @click="lstj" />
|
<img src="../../../static/img/image/qc.png" @click="clearls" />
|
</div>
|
</div>
|
|
<!-- 剖面分析功能界面 -->
|
<div class="fxjm" v-show="pmjm" style="height: 0.9rem">
|
<!-- 上层 -->
|
<div class="fxjmtop" style="height: 0.49rem">
|
<div
|
style="
|
float: right;
|
margin-top: -0.2rem;
|
margin-right: -0.2rem;
|
color: white;
|
font-size: 0.26rem;
|
"
|
@click="closegnjm"
|
>
|
<i class="el-icon-circle-close"></i>
|
</div>
|
|
<div
|
style="
|
width: 100%;
|
height: 0.49rem;
|
line-height: 0.49rem;
|
color: white;
|
"
|
>
|
请输入采样点<el-input
|
v-model="cyd"
|
placeholder="请输入采样点"
|
></el-input
|
>(米)
|
</div>
|
</div>
|
<!-- 下层 -->
|
<div class="fxjmbottom">
|
<img src="../../../static/img/image/cd3.png" alt="" />
|
<img src="../../../static/img/image/jl.png" alt="" />
|
<img src="../../../static/img/image/qc.png" />
|
</div>
|
</div>
|
|
<!-- 漫游 -->
|
<div class="liangs" v-show="showmy">
|
<div class="back">
|
<div class="fhjt" @click="backtogj">
|
<i class="el-icon-caret-left"></i>
|
</div>
|
<div class="cdbt">
|
<span>漫游</span>
|
</div>
|
</div>
|
<div class="manyitem" @click="ddrf">
|
<img src="../../../static/img/image/ddrf.png" alt="" />
|
<span>定点绕飞</span>
|
</div>
|
<div class="manyitem" @click="ljmy">
|
<img src="../../../static/img/image/ljmy.png" alt="" />
|
<span>路径漫游</span>
|
</div>
|
</div>
|
<!-- 位置界面 -->
|
<div class="positionjm" v-show="positionjm">
|
<div class="menutop">
|
<div class="menuback" @click="positionback">
|
<i class="el-icon-caret-left"></i>返回
|
</div>
|
<div class="menutitle">位置</div>
|
</div>
|
<div style="margin-top: 0.2rem">
|
<el-tabs type="border-card">
|
<el-tab-pane label="收藏" v-if="dataSc.length !== 0">
|
<div
|
class="scdwysitem"
|
v-for="(item, index) in dataSc"
|
:key="index"
|
@click="goScPoint(item.position)"
|
>
|
<i class="el-icon-star-off"></i>
|
{{ item.name }}
|
<span
|
style="float: right; margin-right: 0.2rem"
|
v-on:click.stop="deleteSc(index)"
|
><i class="el-icon-delete"></i
|
></span>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="收藏" v-else>
|
<div class="scdwysitem" style="text-align: center">暂无数据！</div>
|
</el-tab-pane>
|
<el-tab-pane label="定位">
|
<div
|
class="scdwysitem"
|
v-for="(item, index) in dataPosition"
|
:key="index"
|
@click="flyTo(item.geo)"
|
>
|
<i class="el-icon-location-outline"></i>{{ item.name }}
|
</div>
|
</el-tab-pane>
|
<!-- <el-tab-pane label="演示">
|
<div class="scdwysitem" v-for="(item, index) in 15" :key="index">
|
<i class="el-icon-video-play"></i>
|
演示模拟数据:{{ item }}
|
</div>
|
</el-tab-pane> -->
|
</el-tabs>
|
</div>
|
</div>
|
<!-- 地下模式滑动条 -->
|
<div class="undergroundAlpha">
|
<el-slider
|
v-if="openUnderGround"
|
v-model="undergroundAlpha"
|
:show-tooltip="false"
|
@input="changeAlpha"
|
></el-slider>
|
</div>
|
|
<!-- 显示结果 -->
|
<div>
|
<querydata ref="drawer" />
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.undergroundAlpha {
|
width: 50%;
|
margin: 1% 25%;
|
position: absolute;
|
}
|
.scNewJmStyle {
|
width: 100%;
|
height: 100%;
|
padding: 0.1rem;
|
position: absolute;
|
background: white;
|
z-index: 3001;
|
}
|
/* 位置界面 */
|
.scsr {
|
/* position: absolute; */
|
text-align: center;
|
/* left: 0.7rem;
|
top: 0.3rem; */
|
/* width: 2.4rem; */
|
border: 1px solid white;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
background: rgba(0, 0, 0, 0.5);
|
border-radius: 0.05rem;
|
color: white;
|
font-size: 0.14rem;
|
}
|
.positionjm {
|
position: absolute;
|
color: black;
|
width: 100%;
|
height: 100%;
|
background-color: white;
|
z-index: 1001;
|
padding: 0.3rem 0.1rem;
|
}
|
.el-input /deep/ .el-input__inner {
|
color: black;
|
background: transparent;
|
}
|
.el-tabs--border-card /deep/ .el-tabs__header {
|
background-color: lightgray;
|
border-radius: 0.05rem;
|
}
|
.el-tabs {
|
border-radius: 0.05rem;
|
position: absolute;
|
height: 80%;
|
width: 94%;
|
}
|
.el-tabs /deep/ .el-tabs__nav-wrap {
|
border-top-left-radius: 0.05rem;
|
border-top-right-radius: 0.05rem;
|
}
|
.el-tabs /deep/ .el-tabs__item {
|
padding: 0 0.2rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
font-size: 0.14rem;
|
}
|
.el-tabs /deep/ .el-tabs__content {
|
height: 90%;
|
overflow: scroll;
|
}
|
/* 收藏界面数据样式 */
|
.scdwysitem {
|
font-size: 0.16rem;
|
background-color: rgb(228, 227, 227);
|
margin-bottom: 0.1rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
border-radius: 0.05rem;
|
padding-left: 0.1rem;
|
/* border-bottom: 1px solid; */
|
}
|
/* 菜单 */
|
.caidan {
|
text-align: center;
|
border-bottom: 2px solid white;
|
border-top-right-radius: 0.05rem;
|
border-top-left-radius: 0.05rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
background: linear-gradient(gray, black);
|
}
|
/* 返回的样式 */
|
.back {
|
display: flex;
|
text-align: center;
|
height: 0.24rem;
|
line-height: 0.24rem;
|
border-radius: 0.05rem;
|
background: linear-gradient(gray, black);
|
}
|
.fhjt {
|
flex: 1;
|
border-right: 1px solid gray;
|
font-size: 0.2rem;
|
}
|
.cdbt {
|
flex: 3;
|
}
|
/* 滑动条,横向和纵向 */
|
.hdthx,
|
.hdtzx {
|
height: 0.4rem;
|
width: 2rem;
|
background: rgba(0, 0, 0, 0.3);
|
position: absolute;
|
bottom: 0.29rem;
|
left: 0.2rem;
|
border-radius: 0.07rem;
|
}
|
.hdtzx {
|
height: 2rem;
|
width: 0.4rem;
|
}
|
.caidanan {
|
position: absolute;
|
left: 0.2rem;
|
bottom: 0.3rem;
|
}
|
/* 空间分析 */
|
.fxjm {
|
position: absolute;
|
bottom: 0.3rem;
|
left: 0.2rem;
|
height: 0.9rem;
|
width: 90%;
|
border: 2px solid white;
|
background: rgba(0, 0, 0, 0.5);
|
border-radius: 0.07rem;
|
}
|
.fxjmtop {
|
height: 0.49rem;
|
width: 100%;
|
border-bottom: 1px solid white;
|
}
|
.fxjmbottom {
|
height: 0.4rem;
|
width: 100%;
|
}
|
.fxjmbottom img {
|
width: 0.38rem;
|
height: 0.39rem;
|
}
|
.fxjmbottom img + img {
|
border-left: 1px solid white;
|
}
|
|
.funButtons {
|
position: absolute;
|
top: 0.7rem;
|
right: 0.1rem;
|
}
|
.funButton {
|
margin: 0.1rem 0;
|
}
|
.funButton .el-button {
|
display: block;
|
padding: 0 !important;
|
font-size: 0.24rem;
|
border: unset;
|
background: rgba(0, 0, 0, 0);
|
}
|
|
.firle,
|
.secle,
|
.thrle,
|
.foule {
|
margin-bottom: 0.1rem;
|
}
|
.firle {
|
margin-top: 0.1rem;
|
}
|
.shezhi {
|
padding-top: 0.3rem;
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
top: 0;
|
background-color: #f3f3f3;
|
z-index: 3000;
|
}
|
.shezhiitem {
|
padding: 0 0.25rem;
|
background-color: white;
|
width: 100%;
|
height: 0.4rem;
|
line-height: 0.4rem;
|
border-bottom: 1px solid lightgray;
|
}
|
.shezhiitem .el-switch {
|
float: right;
|
top: 0.1rem;
|
}
|
.shezhiitem img {
|
width: 0.25rem;
|
height: 0.25rem;
|
margin-right: 0.4rem;
|
}
|
.menu-item {
|
border: 2px solid white;
|
background: rgba(0, 0, 0, 0.5);
|
border-radius: 0.05rem;
|
width: 1.5rem;
|
margin-bottom: 0.12rem;
|
}
|
.menu-item span {
|
font-size: 0.12rem;
|
}
|
.menu-item ul li a img {
|
width: 0.25rem;
|
height: 0.25rem;
|
margin-right: 0.1rem;
|
margin-left: 0.2rem;
|
}
|
.menu-item ul li {
|
height: 0.4rem;
|
line-height: 0.4rem;
|
position: relative;
|
}
|
.menu-item ul li + li {
|
border-top: 1px solid gray;
|
}
|
#menu {
|
position: absolute;
|
color: white;
|
bottom: 0.7rem !important;
|
left: 0.2rem;
|
z-index: 2020;
|
}
|
|
.menu-item ul li a {
|
text-decoration: none !important;
|
display: inline-block;
|
width: 100%;
|
color: white;
|
}
|
|
/* 工具 */
|
.gongju,
|
.kjfx,
|
.scjm,
|
.biaoh,
|
.liangs,
|
.many {
|
position: absolute;
|
bottom: 0.82rem;
|
left: 0.2rem;
|
width: 1.5rem;
|
background-color: rgba(0, 0, 0, 0.5);
|
border-radius: 0.05rem;
|
border: 2px solid white;
|
color: white;
|
}
|
.scjm {
|
padding: 0.1rem;
|
width: 60%;
|
height: 15%;
|
bottom: 40%;
|
left: 20%;
|
z-index: 10000;
|
}
|
.gongjuitem,
|
.kjfxitem,
|
.biaohitem,
|
.liangsitem,
|
.manyitem {
|
padding: 0 0.1rem;
|
background-color: transparent;
|
height: 0.4rem;
|
line-height: 0.4rem;
|
border-top: 1px solid gray;
|
}
|
.gongjuitem img,
|
.kjfxitem img,
|
.biaohitem img,
|
.liangsitem img,
|
.manyitem img {
|
width: 0.35rem;
|
height: 0.35rem;
|
margin-right: 0.1rem;
|
}
|
|
/* 左下角菜单的滚动条样式调整 */
|
.caidanul {
|
overflow: auto;
|
}
|
|
.caidanul::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 5px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 8px;
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动条 */
|
.caidanul::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: rgba(218, 218, 218, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
/* 滚动槽 */
|
.caidanul::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
</style>
|
|
<script>
|
import Bus from "../../js/bus.js";
|
import axios from "axios";
|
import common from "@/components/common";
|
import querydata from "./query-data";
|
let dResultToolTip;
|
window.pointSelect = undefined,
|
window.PathAnimationData = {
|
isFly: false,
|
};
|
let flyPoint;
|
window.draw = undefined;
|
window.measureArr = [];
|
window.measurejl = undefined;
|
window.measurebmjl = undefined;
|
window.measuremj = undefined;
|
window.measurebmmj = undefined;
|
window.measuregd = undefined;
|
window.volumetricMeasurementTool = undefined;
|
window.PathAnimationData = {
|
isFly: false,
|
};
|
window.currentOperator = null;
|
let trafficLayer;
|
export default {
|
components: { querydata },
|
data() {
|
return {
|
undergroundAlpha: 50,
|
openUnderGround: false,
|
docmHeight:
|
document.documentElement.clientHeight || document.body.clientHeight,
|
showHeight:
|
document.documentElement.clientHeight || document.body.clientHeight,
|
hideshow: true,
|
scVal: "",
|
isOpenDxms: false,
|
dataSc: [],
|
dataPosition: [
|
{ name: "杭州市", geo: "POINT(120.15044026692708 30.276468641493057)" },
|
{ name: "绍兴市", geo: "POINT(120.57611192491319 30.032960611979167)" },
|
{ name: "宁波市", geo: "POINT(121.54610053168403 29.87643310546875)" },
|
{ name: "舟山市", geo: "POINT(122.20361436631944 29.987786458333332)" },
|
],
|
scNewJm: false,
|
dgxfxjm: false,
|
scjm: false,
|
pdfxjm: false,
|
bhjm: false,
|
lsjm: false,
|
pmjm: false,
|
kjcx: false,
|
isShowTraffic: false,
|
cyd: 50,
|
menubtn: true,
|
szstatus: {
|
fwval: false,
|
zbzval: false,
|
qpval: false,
|
zymlval: false,
|
kjcxval: false,
|
dxmsval: false,
|
snmsval: false,
|
ssval: true,
|
scval: false,
|
zymlmenu: false,
|
},
|
// 一级
|
showkjfx: false,
|
showsz: false,
|
showzyml: false,
|
// 二级
|
showmy: false,
|
active: false,
|
// 滑动条
|
hdthx: false,
|
hdtzx: false,
|
positionjm: false,
|
isopenposi: false,
|
isopenzyml: false,
|
// 记录开始时间和结束时间
|
monitor: false,
|
timer: null,
|
starttime: 0,
|
// 位置信息模拟数据
|
scdata: [],
|
dwdata: [],
|
ysdata: [],
|
//当前操作步骤
|
// currentOperator: null,
|
//显示文本框
|
currentMessage: null,
|
};
|
},
|
watch: {
|
//监听显示高度
|
showHeight: function () {
|
if (this.docmHeight > this.showHeight) {
|
//隐藏
|
// this.$message("屏幕大小被缩小")
|
} else {
|
//显示
|
// this.$message("屏幕大小正常")
|
}
|
},
|
monitor() {
|
if (this.monitor) {
|
this.timer = setTimeout(() => {
|
this.starttime += 0.5;
|
if (this.starttime >= 0.5) {
|
this.hdthx = true;
|
this.hdtzx = true;
|
// 获得到当前需要移动的元素
|
var dv = document.getElementsByClassName("caidanan")[0];
|
// 获取当前根元素的fontsize值,并转为数值型
|
var a = getComputedStyle(window.document.documentElement)[
|
"font-size"
|
];
|
var h = getComputedStyle(window.document.documentElement)["height"];
|
a = parseInt(a.substring(0, a.length - 2));
|
h = parseInt(h.substring(0, h.length - 2));
|
// 得到横向滑动条的高度范围为h-0.7*a~h-0.3*a
|
// 当手指触摸位置超出高度范围，切换到纵向滑动条
|
var minheight = h - 0.7 * a;
|
var maxheight = h - 0.3 * a;
|
// 得到纵向滑动条的宽度范围为0.2*a~0.6rem；
|
// 当手指触摸位置超出宽度范围，切换到横向滑动条
|
var minwidth = 0.2 * a;
|
var maxwidth = 0.6 * a;
|
// 监听移动
|
dv.ontouchmove = (e) => {
|
this.isopenposi = false;
|
this.isopenzyml = false;
|
this.active = false;
|
// 当前手指触摸的位置;
|
var x = e.touches[0].clientX;
|
var y = e.touches[0].clientY;
|
// dbottom为距离底部的距离，dleft为距离左侧的距离
|
var dbottom = h - y - 0.1 * a;
|
var dleft = x;
|
if (dbottom > dleft) {
|
this.hdthx = false;
|
this.hdtzx = true;
|
if (y > h - 0.3 * a) {
|
y = h - 0.3 * a;
|
}
|
if (y < h - 1.9 * a) {
|
y = h - 1.9 * a;
|
}
|
if (y == h - 1.9 * a) {
|
this.isopenposi = true;
|
} else {
|
this.isopenposi = false;
|
}
|
dv.style.left = "0.2rem";
|
dv.style.bottom = (h - y) / a + "rem";
|
} else {
|
this.hdthx = true;
|
this.hdtzx = false;
|
if (x >= 1.8 * a) {
|
x = 1.8 * a;
|
}
|
if (x < 0.2 * a) {
|
x = 0.2 * a;
|
}
|
if (x == 1.8 * a) {
|
this.isopenzyml = true;
|
} else {
|
this.isopenzyml = false;
|
}
|
dv.style.left = x / a + "rem";
|
dv.style.bottom = "0.3rem";
|
}
|
};
|
}
|
}, 500);
|
}
|
},
|
},
|
mounted() {
|
//监听键盘是否弹出，根据当前的屏幕高度
|
window.onresize = () => {
|
return (() => {
|
this.showHeight =
|
document.documentElement.clientHeight || document.body.clientHeight;
|
})();
|
};
|
|
// 获取本地缓存
|
var interval = setInterval(() => {
|
if (window.getSettingsVue()) {
|
clearInterval(interval);
|
var a = window.settings || this.szstatus;
|
this.szstatus = a;
|
this.$emit("getshowsta", this.szstatus);
|
this.dataSc = window.locations || [];
|
}
|
}, 500);
|
|
window.setMenuBtn = (show) => {
|
this.menubtn = show;
|
Bus.$emit("myMsg", true);
|
};
|
window.setRightBottomBtn = (show) => {
|
Bus.$emit("myMsg", true);
|
}
|
},
|
methods: {
|
// 返回到菜单界面
|
backtomenu() {
|
this.menubtn = true;
|
this.bhjm = false;
|
this.lsjm = false;
|
this.active = true;
|
},
|
// 标绘功能
|
hzdian() {
|
document.getElementById("bhjg").innerHTML = "正在绘制点...";
|
this.closeCurrentOperator();
|
// var that = this;
|
var CreateBillboard = function () {
|
window.currentOperator = draw = sgworld.Creator.createSimpleGraphic(
|
"billboard",
|
{},
|
function (entity) {
|
document.getElementById("bhjg").innerHTML = "绘制结束...";
|
}
|
);
|
};
|
CreateBillboard();
|
},
|
hzxian() {
|
document.getElementById("bhjg").innerHTML = "正在绘制线，长按结束绘制...";
|
// this.closeCurrentOperator();
|
// var that = this;
|
var CreatePolyline = function () {
|
window.currentOperator = draw = sgworld.Creator.createSimpleGraphic(
|
"polyline",
|
{},
|
function (entity) {
|
document.getElementById("bhjg").innerHTML = "标绘已结束";
|
}
|
);
|
};
|
CreatePolyline();
|
},
|
hzmian() {
|
document.getElementById("bhjg").innerHTML = "正在绘制面，长按结束绘制...";
|
this.closeCurrentOperator();
|
// var that = this;
|
var CreatePolygon = function () {
|
window.currentOperator = draw = sgworld.Creator.createSimpleGraphic(
|
"polygon",
|
{},
|
function (entity) {
|
document.getElementById("bhjg").innerHTML = "标绘已结束";
|
}
|
);
|
};
|
CreatePolygon();
|
},
|
hzti() {
|
// var that = this;
|
document.getElementById("bhjg").innerHTML = "正在绘制体，长按结束绘制...";
|
var CreateBox = function () {
|
window.currentOperator = draw = sgworld.Creator.createSimpleGraphic(
|
"box",
|
{},
|
function (entity) {
|
document.getElementById("bhjg").innerHTML = "标绘已结束";
|
}
|
);
|
};
|
CreateBox();
|
},
|
clearbh() {
|
sgworld.Creator.SimpleGraphic.clear();
|
},
|
|
// 量算功能
|
lsjl() {
|
document.getElementById("lsjg").innerHTML = "距离测量中,长按结束...";
|
var colorAll = {
|
point: sgworld.cesium.Color.fromCssColorString("#ff0000"),
|
polyline: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
};
|
this.closeCurrentOperator();
|
// var that = this;
|
var measure = function () {
|
window.currentOperator = measurejl = sgworld.Command.execute(
|
0,
|
10,
|
colorAll,
|
function (jl) {
|
var temjl = jl.distance.slice(-1);
|
document.getElementById("lsjg").innerHTML = "距离总长度为:" + temjl;
|
}
|
);
|
measureArr.push(measurejl);
|
};
|
measure();
|
},
|
lsbmjl() {
|
document.getElementById("lsjg").innerHTML = "表面距离测量中,长按结束...";
|
var colorAll = {
|
point: sgworld.cesium.Color.fromCssColorString("#ff0000"),
|
polyline: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
};
|
this.closeCurrentOperator();
|
// var that = this;
|
var measure = function () {
|
window.currentOperator = measurebmjl = sgworld.Command.execute(
|
0,
|
2,
|
colorAll,
|
function (bmjl) {
|
var tembmjl = bmjl.distance.slice(-1);
|
document.getElementById("lsjg").innerHTML =
|
"表面距离总长度为:" + tembmjl;
|
}
|
);
|
measureArr.push(measurebmjl);
|
};
|
measure();
|
},
|
lsmj() {
|
document.getElementById("lsjg").innerHTML = "面积测量中,长按结束...";
|
var colorAll = {
|
point: sgworld.cesium.Color.fromCssColorString("#ff0000"),
|
polyline: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
polygon: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
};
|
this.closeCurrentOperator();
|
// var that = this;
|
var measure = function () {
|
window.currentOperator = measuremj = sgworld.Command.execute(
|
0,
|
3,
|
colorAll,
|
function (mj) {
|
document.getElementById("lsjg").innerHTML = "面积为:" + mj.mj;
|
}
|
);
|
measureArr.push(measuremj);
|
};
|
measure();
|
},
|
lsbmmj() {
|
document.getElementById("lsjg").innerHTML = "表面面积测量中,长按结束...";
|
var colorAll = {
|
point: sgworld.cesium.Color.fromCssColorString("#ffffff"),
|
polyline: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
polygon: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
};
|
// var that = this;
|
this.closeCurrentOperator();
|
var measure = function () {
|
window.currentOperator = measurebmmj = sgworld.Command.execute(
|
0,
|
8,
|
colorAll,
|
function (bmmj) {
|
document.getElementById("lsjg").innerHTML = "表面面积为:" + bmmj.mj;
|
}
|
);
|
measureArr.push(measurebmmj);
|
};
|
measure();
|
},
|
lsgd() {
|
// var that = this;
|
document.getElementById("lsjg").innerHTML = "高度测量中,长按结束...";
|
var colorAll = {
|
point: sgworld.cesium.Color.fromCssColorString("#ff0000"),
|
polyline: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
polygon: sgworld.cesium.Color.fromCssColorString("#ffff00"),
|
};
|
var measure = function () {
|
window.currentOperator = measuregd = sgworld.Command.execute(
|
0,
|
5,
|
colorAll,
|
function (gd) {
|
document.getElementById("lsjg").innerHTML =
|
gd.gddistance + "," + gd.kjdistance + "," + gd.spdistance;
|
}
|
);
|
measureArr.push(measuregd);
|
};
|
measure();
|
},
|
lstj() {
|
// var that = this;
|
document.getElementById("lsjg").innerHTML = "体积测量中,长按结束...";
|
function Volumetric(spacing, callback) {
|
if (!volumetricMeasurementTool) {
|
window.currentOperator = volumetricMeasurementTool = sgworld.Creator.createVolumetricMeasureTool();
|
}
|
|
volumetricMeasurementTool.startDrawing(null, spacing, function (data) {
|
callback &&
|
typeof callback === "function" &&
|
callback({ height: data.minHeight, spacing: data.spacing });
|
});
|
}
|
Volumetric("auto", function (data) {});
|
},
|
// 清除所有的量算结果
|
clearls() {
|
for (var i = 0; i <= measureArr.length; i++) {
|
measureArr[i] && measureArr[i].deleteObject();
|
}
|
volumetricMeasurementTool && volumetricMeasurementTool.cleanUp();
|
document.getElementById("lsjg").innerHTML = "量算结果已清除！";
|
},
|
closeCurrentOperator: function () {
|
if (window.currentOperator) {
|
try {
|
window.currentOperator.forceEndHanlder();
|
window.currentOperator = undefined;
|
} catch (ex) {}
|
}
|
try {
|
parent.clearnViewshed();
|
} catch (ex) {}
|
},
|
closePointOperator: function () {
|
if(pointSelect){
|
try {
|
pointSelect.destroy();
|
pointSelect = undefined;
|
}catch (ex) {}
|
}
|
},
|
// 滑动条上滑界面中的返回事件
|
positionback() {
|
this.positionjm = false;
|
},
|
// 滑动条
|
hdtstart() {
|
this.monitor = true;
|
},
|
hdtend() {
|
// 抬手重置图标的位置
|
if (this.isopenposi) {
|
this.positionjm = true;
|
} else {
|
this.positionjm = false;
|
}
|
if (this.isopenzyml) {
|
this.szstatus.zymlmenu = true;
|
} else {
|
this.szstatus.zymlmenu = false;
|
}
|
// 判断完后就将状态置为关闭状态
|
this.isopenposi = false;
|
this.isopenzyml = false;
|
var dv = document.getElementsByClassName("caidanan")[0];
|
var a = getComputedStyle(window.document.documentElement)["font-size"];
|
a = parseInt(a.substring(0, a.length - 2));
|
dv.style.left = "0.2rem";
|
dv.style.bottom = "0.3rem";
|
// 如果当前资源目录的状态为true，传递参数
|
if (this.szstatus.zymlmenu) {
|
this.$emit("getshowsta", this.szstatus);
|
// 传递完成后，把状态置为false
|
this.szstatus.zymlmenu = false;
|
}
|
this.monitor = false;
|
this.hdthx = false;
|
this.hdtzx = false;
|
clearInterval(this.timer);
|
},
|
|
// 功能（标绘，量算，空间分析）小界面右上角x号触发
|
closegnjm() {
|
Bus.$emit("myMsg", true);
|
//结束当前操作
|
this.closeCurrentOperator();
|
// 关闭等高线，标绘，量算界面，并把菜单按钮显示出来
|
this.dgxfxjm = false;
|
this.pdfxjm = false;
|
this.bhjm = false;
|
this.lsjm = false;
|
this.pmjm = false;
|
(this.kjcx = false), (this.menubtn = true);
|
document.getElementById("lsjg").innerHTML = "";
|
document.getElementById("bhjg").innerHTML = "";
|
},
|
|
// 空间分析快捷按钮，控制空间分析界面的显示与隐藏
|
ztqh() {
|
this.closePointOperator();
|
this.showkjfx = !this.showkjfx;
|
this.active = false;
|
},
|
showSc() {
|
this.scjm = !this.scjm;
|
this.active = false;
|
},
|
// 退出收藏界面
|
cancelSc() {
|
this.scNewJm = false;
|
},
|
// 添加收藏
|
addSc() {
|
if (this.scVal == "") {
|
this.$message("请输入收藏点名称");
|
} else {
|
this.scNewJm = false;
|
// 此处执行收藏操作
|
// 获取当前位置信息
|
let posi = sgworld.Viewer.camera.position;
|
let pointsInterest = {
|
destination: posi,
|
orientation: {
|
heading: Viewer.camera.heading,
|
pitch: Viewer.camera.pitch,
|
roll: Viewer.camera.roll,
|
},
|
};
|
// 添加收藏点名称和位置信息到临时对象，到位置收藏列表中
|
let temObj = {};
|
temObj.name = this.scVal;
|
// 对象克隆
|
temObj.position = JSON.parse(JSON.stringify(pointsInterest));
|
this.dataSc.push(temObj);
|
// 把位置信息添加到缓存中
|
// window.setLocations(temObj)
|
window.setLocations(this.dataSc);
|
|
// 从缓存中取出当前所有位置信息
|
this.dataSc = window.locations;
|
|
// 添加过之后把位置点名称置为空
|
this.scVal = "";
|
this.$message({
|
message: "已收藏，请到菜单>位置>收藏中查看",
|
type: "success",
|
});
|
}
|
},
|
showNewJm() {
|
this.closePointOperator();
|
this.scjm = false;
|
this.scNewJm = true;
|
this.closeall();
|
},
|
closefirle() {
|
// 关闭设置界面
|
this.showsz = false;
|
// 关闭空间分析界面
|
this.showkjfx = false;
|
// 关闭资源目录界面
|
this.showzyml = false;
|
this.kjfx = false;
|
this.kjcx = false;
|
},
|
|
// 关闭所有的二级页面
|
closesecle() {
|
this.showmy = false;
|
},
|
// 关闭所有界面
|
closeall() {
|
this.closefirle();
|
this.closesecle();
|
this.active = false;
|
},
|
// 关闭资源目录
|
closezyml() {
|
this.showzyml = false;
|
},
|
// 主菜单按钮
|
menuisopen() {
|
// 显示和隐藏菜单页面
|
this.active = !this.active;
|
// 关闭所有的子目录页面
|
this.closefirle();
|
this.closesecle();
|
},
|
|
// 一级页面
|
zyml() {
|
this.closePointOperator();
|
// 关闭菜单页面，打开资源目录，传递参数，之后便把资源目录状态置为关闭状态
|
this.active = false;
|
this.szstatus.zymlmenu = true;
|
this.$emit("getshowsta", this.szstatus);
|
this.szstatus.zymlmenu = false;
|
},
|
|
// 空间分析
|
kjfxf() {
|
this.closePointOperator();
|
this.active = false;
|
this.showkjfx = true;
|
},
|
// 设置
|
sz() {
|
this.closePointOperator();
|
// 关闭当前对话框打开新的页面
|
this.active = false;
|
this.showsz = true;
|
},
|
|
// 位置
|
weizhi() {
|
this.closePointOperator();
|
this.active = false;
|
this.positionjm = true;
|
},
|
// 打开标绘的功能面板，并关闭菜单面板
|
biaohui() {
|
this.closePointOperator();
|
// 传送数据，隐藏右侧复位，指北，全屏功能按钮
|
Bus.$emit("myMsg", false);
|
this.active = false;
|
this.bhjm = true;
|
this.menubtn = false;
|
},
|
|
// 打开量算的功能面板，并关闭菜单面板
|
liangsuan() {
|
this.closePointOperator();
|
Bus.$emit("myMsg", false);
|
this.active = false;
|
this.lsjm = true;
|
this.menubtn = false;
|
},
|
manyou() {
|
this.closePointOperator();
|
this.active = false;
|
this.showmy = true;
|
},
|
// 返回一级页面
|
back() {
|
// window.localStorage.setItem("bd",JSON.stringify(this.szstatus))
|
setSettings(this.szstatus);
|
// console.log(3);
|
// console.log(window.getSettingsVue());
|
// this.$message(
|
// "window.settingsVue.fwval:" + window.getSettingsVue().fwval
|
// );
|
// this.$message('szstatus:'+this.szstatus.fwval);
|
|
this.szstatus.zymlmenu = false;
|
this.$emit("getshowsta", this.szstatus);
|
this.active = true;
|
this.closefirle();
|
this.closesecle();
|
this.scNewJm = false;
|
},
|
// 返回工具页面
|
backtogj() {
|
// 关闭所有的二级页面
|
this.closesecle();
|
this.active = true;
|
},
|
|
// 剖面分析功能
|
pmfx() {
|
// 隐藏右下角复位，指北，全屏
|
Bus.$emit("myMsg", false);
|
var that = this;
|
this.menubtn = false;
|
this.closefirle();
|
this.closesecle();
|
this.closeCurrentOperator();
|
layerOpen("剖面线分析", {
|
width: "100%",
|
height: 200,
|
shade: 0,
|
offset: "b",
|
url: "./static/html/AnalysisFuncEchartLine.html",
|
fn: {
|
end: function () {
|
window._AnalysisDXPM &&
|
!window._AnalysisDXPM.isover &&
|
window._AnalysisDXPM.deleteObject();
|
},
|
success: function (lay) {
|
parent.SmartEarthPopupData.layerContainer = lay;
|
lay.css({
|
"border-radius": "13px 13px 0px 0px",
|
"background-color": "rgba(0,0,0,.5)",
|
color: "white",
|
border: "2px solid white",
|
});
|
$(".layui-layer-title").css({
|
"background-color": "rgba(0,0,0,.5)",
|
" border": "none",
|
color: "white",
|
"font-size": "0.16rem",
|
"font-weight": "bold",
|
});
|
$(".layui-layer-setwin .layui-layer-close1").css({
|
"background-position": "-156px -38px",
|
});
|
window.showmessage = that.showmessage;
|
window.hidemessage = that.hidemessage;
|
},
|
cancel: function () {
|
that.menubtn = true;
|
},
|
},
|
});
|
},
|
|
//网页调用显示通知
|
showmessage(message) {
|
this.currentMessage = this.$message({
|
message: message,
|
duration: 0,
|
});
|
},
|
//网页调用关闭通知
|
hidemessage: function () {
|
this.currentMessage.close();
|
},
|
// 等高线分析功能
|
dgxfx() {
|
// 向bottom.vue中传送数据,控制(定位,指北,全屏)的显示隐藏;
|
Bus.$emit("myMsg", false);
|
this.menubtn = false;
|
this.closefirle();
|
this.closesecle();
|
this.closeCurrentOperator();
|
// this.dgxfxjm=true;
|
// this.menubtn=false;
|
layerOpen("等高线分析", {
|
width: "100%",
|
height: "30%",
|
offset: "b",
|
url: "./static/html/AnalysisContour.html",
|
fn: {
|
success: function (lay) {
|
lay.css({
|
"border-radius": "13px 13px 0px 0px",
|
"background-color": "rgba(0,0,0,.5)",
|
color: "white",
|
border: "2px solid white",
|
});
|
$(".layui-layer-title").css({
|
"background-color": "rgba(0,0,0,.5)",
|
" border": "none",
|
color: "white",
|
"font-size": "0.16rem",
|
"font-weight": "bold",
|
});
|
$(".layui-layer-setwin .layui-layer-close1").css({
|
"background-position": "-156px -38px",
|
});
|
},
|
cancel: (index, layero) => {
|
Bus.$emit("myMsg", true);
|
layer.close(index);
|
this.menubtn = true;
|
},
|
},
|
});
|
},
|
|
//
|
// 阴影分析功能
|
yyfx() {
|
Bus.$emit("myMsg", false);
|
this.menubtn = false;
|
this.closefirle();
|
this.closesecle();
|
this.closeCurrentOperator();
|
layerOpen("阴影分析", {
|
width: "100%",
|
height: "27%",
|
shadow: 0,
|
offset: "b",
|
url: "./static/html/AnalysisShadow.html",
|
fn: {
|
success: function (lay) {
|
lay.css({
|
"border-radius": "13px 13px 0px 0px",
|
"background-color": "rgba(0,0,0,.5)",
|
color: "white",
|
border: "2px solid white",
|
});
|
$(".layui-layer-title").css({
|
"background-color": "rgba(0,0,0,.5)",
|
" border": "none",
|
color: "white",
|
"font-size": "0.16rem",
|
"font-weight": "bold",
|
});
|
$(".layui-layer-setwin .layui-layer-close1").css({
|
"background-position": "-156px -38px",
|
});
|
},
|
cancel: (index, layero) => {
|
Bus.$emit("myMsg", true);
|
layer.close(index);
|
this.menubtn = true;
|
},
|
},
|
});
|
},
|
syfx() {
|
Bus.$emit("myMsg", false);
|
this.menubtn = false;
|
this.closefirle();
|
this.closesecle();
|
this.closeCurrentOperator();
|
var that = this;
|
layerOpen("视域分析", {
|
width: "100%",
|
height: "30%",
|
shade: 0,
|
offset: "b",
|
url: "./static/html/AnalysisViewshed.html",
|
fn: {
|
end: function () {
|
// window._AnalysisDXPM && window._AnalysisDXPM.deleteObject();
|
},
|
success: function (lay) {
|
lay.css({
|
"border-radius": "13px 13px 0px 0px",
|
"background-color": "rgba(0,0,0,.5)",
|
color: "white",
|
border: "2px solid white",
|
});
|
$(".layui-layer-title").css({
|
"background-color": "rgba(0,0,0,.5)",
|
" border": "none",
|
color: "white",
|
"font-size": "0.16rem",
|
"font-weight": "bold",
|
});
|
$(".layui-layer-setwin .layui-layer-close1").css({
|
"background-position": "-156px -38px",
|
});
|
},
|
cancel: (index, layero) => {
|
Bus.$emit("myMsg", true);
|
layer.close(index);
|
this.menubtn = true;
|
},
|
},
|
});
|
},
|
// 漫游功能-定点绕飞
|
ddrf() {
|
this.closeCurrentOperator();
|
this.closefirle();
|
this.closesecle();
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end &&
|
((PathAnimationData.isFly = true),
|
sgworld.drawObj.end(),
|
(PathAnimationData.isFly = false)));
|
|
if (PathAnimationData.isFly) {
|
//结束路径漫游
|
this.ljmy();
|
}
|
sgworld.drawObj = window.currentOperator = sgworld.Analysis.setPointFly();
|
},
|
ljmy() {
|
this.closeCurrentOperator();
|
this.closefirle();
|
this.closesecle();
|
let that = this;
|
// 绘制提示
|
this.$message({
|
message: "点击绘制路径,长按结束绘制...",
|
duration: "3000",
|
showClose: true,
|
});
|
console.log(PathAnimationData.isFly);
|
if (!PathAnimationData.isFly) {
|
//结束上一次操作
|
sgworld.drawObj &&
|
(sgworld.drawObj.drawHandler && sgworld.drawObj.drawHandler.destroy(),
|
sgworld.drawObj.end && sgworld.drawObj.end());
|
|
sgworld.drawObj = sgworld.Command.execute(2, 3, "", (data) => {
|
if (!PathAnimationData.isFly) {
|
data.showPoint = false;
|
data.showLine = true;
|
data.mode = 1;
|
PathAnimationData.selectRouteData = data;
|
PathAnimationData.isFly = true;
|
that.menubtn = false;
|
Bus.$emit("myMsg", false);
|
layerOpen("路径漫游", {
|
width: "100%",
|
height: "30%",
|
offset: "b",
|
shade: 0,
|
url: "./static/html/PathAnimationSec.html",
|
fn: {
|
end: () => {
|
Bus.$emit("myMsg", true);
|
PathAnimationData.isFly = false;
|
Viewer.scene.globe.depthTestAgainstTerrain =
|
PathAnimationData.depthTest;
|
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
PathAnimationData = {
|
isFly: false,
|
};
|
},
|
success: (layero, index) => {
|
var body = layer.getChildFrame("body", index);
|
body.find("#exit").click(function () {
|
that.menubtn = true;
|
});
|
SmartEarthPopupData.layerContainer = layero;
|
layero.css({
|
"border-radius": "13px 13px 0px 0px",
|
"background-color": "rgba(0,0,0,.5)",
|
color: "white",
|
border: "2px solid white",
|
});
|
$(".layui-layer-title").css({
|
"background-color": "rgba(0,0,0,.5)",
|
" border": "none",
|
color: "white",
|
"font-size": "20px",
|
"font-weight": "bold",
|
});
|
$(".layui-layer-setwin .layui-layer-close1").css({
|
"background-position": "-156px -38px",
|
});
|
},
|
cancel: (index, layero) => {
|
layer.close(index);
|
this.menubtn = true;
|
},
|
},
|
});
|
}
|
});
|
} else {
|
PathAnimationData.isFly = false;
|
Viewer.scene.globe.depthTestAgainstTerrain =
|
PathAnimationData.depthTest;
|
PathAnimationData.fly && PathAnimationData.fly.exit();
|
layuiLayer.close(PathAnimationData.win_index);
|
PathAnimationData = {
|
isFly: false,
|
};
|
}
|
},
|
//显示等高线
|
showdgx() {
|
this.closeCurrentOperator();
|
this.closefirle();
|
this.closesecle();
|
let elevationTool = getElevationTool();
|
//海拔
|
elevationTool.type = "elevation";
|
elevationTool.tf = true;
|
elevationTool.render();
|
},
|
//关闭等高线
|
hidedgx() {
|
this.closeCurrentOperator();
|
this.closefirle();
|
this.closesecle();
|
let elevationTool = getElevationTool();
|
//海拔
|
elevationTool.type = "none";
|
elevationTool.tf = false;
|
elevationTool.render();
|
},
|
kjcxf() {
|
this.closeCurrentOperator();
|
this.closefirle();
|
this.closesecle();
|
this.active = false;
|
this.kjcx = true;
|
},
|
dxkjcx() {
|
this.closeCurrentOperator();
|
this.closeall();
|
if (!pointSelect) {
|
let viewer = Viewer;
|
let pickHandler = new Cesium.ScreenSpaceEventHandler(
|
viewer.scene.canvas
|
);
|
dResultToolTip = sgworld.Core.CreateResultTooltip(Viewer, {
|
color: "white",
|
});
|
sgworld._core.mouse(
|
Viewer.container,
|
1,
|
window.SmartEarthRootUrl + "Workers/image/cursor/draw.cur"
|
);
|
//点选事件
|
pickHandler.setInputAction((movement) => {
|
dResultToolTip && dResultToolTip.show(false);
|
|
let degrees = sgworld.Navigate.getMouseDegrees(movement);
|
let geom = `POINT(${degrees.lon} ${degrees.lat})`;
|
this.showResultToolTop(geom, degrees);
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
pointSelect = pickHandler;
|
this.$message({
|
showClose: true,
|
message: "开启点选",
|
});
|
} else {
|
pointSelect.destroy();
|
pointSelect = undefined;
|
this.$message({
|
showClose: true,
|
message: "关闭点选",
|
});
|
sgworld._core.mouse(Viewer.container, 0);
|
}
|
},
|
getPropHtml(title, html, id) {
|
return `
|
<div class="propContainer" style="padding: 12px 8px;width: 310px;background:#fff;border-radius: 4px;">
|
<div class="propTitle" style="width: 100%;">
|
<span>${title}</span>
|
<button class="layui-btn layui-btn-primary" onclick="closeResultToolTip('${id}')">
|
<i class="layui-icon layui-icon-close"></i>
|
</buton>
|
</div>
|
<hr>
|
<div class="propTable">${html}</div>
|
</div>
|
<div class='arrow'></div>
|
`;
|
},
|
kxkjcx() {},
|
sslk() {
|
this.closePointOperator();
|
this.isShowTraffic = !this.isShowTraffic;
|
|
if (!this.isShowTraffic) {
|
this.$message({
|
showClose: true,
|
message: "关闭实时路况!",
|
});
|
Viewer.imageryLayers.remove(trafficLayer);
|
} else {
|
this.$message({
|
showClose: true,
|
message: "开启实时路况!",
|
});
|
//添加图层
|
let provider = new Cesium.WebMapServiceImageryProvider({
|
url: common.trafficserve,
|
layers:
|
"Three_Cities_Traffic_Group,traffic_hangzhou,traffic_ningbo,traffic_wenzhou ",
|
parameters: {
|
service: "WMS",
|
format: "image/png",
|
transparent: true,
|
},
|
});
|
trafficLayer = Viewer.imageryLayers.addImageryProvider(provider);
|
|
sgworld.Navigate.flyToPosition(
|
121.52510534037954,
|
29.872768408885968,
|
45027
|
);
|
}
|
},
|
getPosition(geo) {
|
let p = geo && geo.replace("POINT(", "").replace(")", "");
|
return p.split(" ");
|
},
|
clearFlyPoint() {
|
flyPoint && Viewer.entities.remove(flyPoint);
|
},
|
flyTo(geo) {
|
this.positionjm = false;
|
let degrees = this.getPosition(geo);
|
flyPoint && Viewer.entities.remove(flyPoint);
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
degrees[0],
|
degrees[1],
|
3000
|
),
|
});
|
flyPoint = Viewer.entities.add({
|
position: Cesium.Cartesian3.fromDegrees(degrees[0], degrees[1]),
|
billboard: {
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scale: 1,
|
image: window.SmartEarthRootUrl + "/Workers/image/mark.png",
|
// image: window.SmartEarthRootUrl + "/Workers/image/red.png",
|
// image: "../../../static/img/image/red.png",
|
heightReference: 1,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
},
|
});
|
},
|
goScPoint(position) {
|
this.positionjm = false;
|
sgworld.Viewer.camera.flyTo({
|
destination: position.destination,
|
duration: 3,
|
maximumHeight: 20000,
|
pitchAdjustHeight: 1500,
|
orientation: {
|
heading: position.orientation.heading,
|
pitch: position.orientation.pitch,
|
roll: position.orientation.roll,
|
},
|
});
|
},
|
// 删除收藏点
|
deleteSc(no) {
|
this.$confirm("删除该收藏点, 是否继续?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
roundButton: false,
|
})
|
.then(() => {
|
this.dataSc.splice(no, 1);
|
// 把位置信息添加到缓存中
|
window.setLocations(this.dataSc);
|
// 从缓存中取出当前所有位置信息
|
this.dataSc = window.locations;
|
this.$message({ message: "删除成功！", type: "success" });
|
})
|
.catch(() => {
|
this.$message({ type: "info", message: "已取消删除" });
|
});
|
},
|
// 地下模式
|
dxms() {
|
this.closePointOperator();
|
this.closeall();
|
if (!this.isOpenDxms) {
|
// 打开滑动条
|
this.openUnderGround = true;
|
// 开启地下模式
|
this.isOpenDxms = true;
|
this.$message({ message: "地下模式开启", type: "success" });
|
Viewer.scene.globe.translucency.enabled = true;
|
Viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
|
Viewer.scene.globe.translucency.backFaceAlpha = 0;
|
this.undergroundValue("set");
|
// sgworld.Analysis.UndergroundModelOpen({ isEnterUnderground: false });
|
} else {
|
// 关闭滑动条
|
this.openUnderGround = false;
|
// 关闭地下模式
|
this.isOpenDxms = false;
|
Viewer.scene.globe.translucency.enabled = false;
|
Viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
|
Viewer.scene.globe.translucency.backFaceAlpha = 1;
|
this.undergroundValue("get");
|
// sgworld.Analysis.UndergroundModelClose();
|
this.$message({ message: "地下模式关闭", type: "success" });
|
}
|
},
|
undergroundValue(type) {
|
if (type === "set") {
|
this.defaultUnderground = {
|
highDynamicRange: Viewer.scene.highDynamicRange,
|
skyBox: Viewer.scene.skyBox.show,
|
fog: Viewer.scene.fog.enabled,
|
minViewHeight: sgworld.minViewHeight,
|
};
|
Viewer.scene.highDynamicRange = false;
|
Viewer.scene.skyBox.show = false;
|
Viewer.scene.fog.enabled = false;
|
sgworld.minViewHeight = -1000000;
|
let alpha = Viewer.scene.globe.translucency.frontFaceAlpha;
|
sgworld.Creator.set3DTilesetsAlpha(alpha);
|
} else {
|
Viewer.scene.highDynamicRange = this.defaultUnderground.highDynamicRange;
|
Viewer.scene.skyBox.show = this.defaultUnderground.skyBox;
|
Viewer.scene.fog.enabled = this.defaultUnderground.fog;
|
sgworld.minViewHeight = this.defaultUnderground.minViewHeight;
|
let alpha = Viewer.scene.globe.translucency.frontFaceAlpha;
|
sgworld.Creator.set3DTilesetsAlpha(1);
|
}
|
},
|
changeAlpha(value) {
|
Viewer.scene.globe.translucency.frontFaceAlpha =
|
this.undergroundAlpha / 100;
|
sgworld.Creator.set3DTilesetsAlpha(this.undergroundAlpha / 100);
|
},
|
|
//获取查询表数据
|
getQueryData() {
|
let queryData = {};
|
if (window.ProjectTree) {
|
let checkNodes = ProjectTree.getCheckedNodes();
|
let SQL_Data = checkNodes.filter((item) => {
|
return item.SQL;
|
});
|
SQL_Data.forEach((item) => {
|
let SQL = item.SQL;
|
let tableData = {
|
name: item.name,
|
table: SQL.search_table,
|
tableData: [],
|
attr: {},
|
parameter: "",
|
};
|
for (let key in SQL) {
|
if (key !== "//" && key !== "search_table") {
|
tableData.parameter !== "" && (tableData.parameter += ",");
|
tableData.parameter += key;
|
tableData.attr[key] = SQL[key];
|
}
|
}
|
queryData[SQL.search_table] = tableData;
|
});
|
}
|
return queryData;
|
},
|
//查询参数
|
getQueryParams(geom, data) {
|
let params = {
|
geom: geom,
|
tableData: [],
|
};
|
for (let item in data) {
|
params.tableData.push({
|
tableName: item,
|
parameter: data[item].parameter,
|
});
|
}
|
params = JSON.stringify(params);
|
|
return params;
|
},
|
//显示查询结果
|
showResultToolTop(geom, degree) {
|
let loading = this.$loading({
|
lock: true,
|
text: "请稍后...",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.5)",
|
});
|
|
let queryData = this.getQueryData();
|
let params = this.getQueryParams(geom, queryData);
|
axios({
|
headers: {
|
"Content-Type": "application/json;charset=UTF-8",
|
},
|
method: "post",
|
url: common.space_query,
|
data: params,
|
})
|
.then((response) => {
|
loading.close();
|
let query_data = response.data;
|
if (!query_data.length) {
|
this.$message({
|
showClose: true,
|
message: "查询结果为空！",
|
});
|
return;
|
}
|
query_data.forEach((data) => {
|
let table = queryData[data.tablename];
|
let featureData = {};
|
for (let key in table.attr) {
|
featureData[table.attr[key]] = data[key] || "无";
|
}
|
table.tableData.push(featureData);
|
});
|
this.updataQueryData(queryData);
|
})
|
.catch((error) => {
|
loading.close();
|
console.log(error);
|
this.$message({
|
showClose: true,
|
message: "查询失败！",
|
});
|
});
|
},
|
|
updataQueryData(data) {
|
let queryData = [];
|
for (let key in data) {
|
data[key].tableData &&
|
data[key].tableData.length &&
|
queryData.push(data[key]);
|
}
|
this.$refs.drawer.showQueryData = true;
|
this.$refs.drawer.updataTable(queryData);
|
},
|
|
// 室内导航
|
snms() {
|
//收缩面板
|
this.closeall();
|
this.$notify({
|
title: "提示",
|
message: "点击键盘控制方向<br>键盘W、A、S、D控制前后左右",
|
dangerouslyUseHTMLString: true,
|
showClose: false,
|
position: "bottom-left",
|
offset: 50,
|
});
|
sgworld.Analysis.createindoormode();
|
},
|
|
// 坡度分析功能
|
pdfx() {
|
// 向bottom.vue中传送数据,控制(定位,指北,全屏)的显示隐藏;
|
Bus.$emit("myMsg", false);
|
this.menubtn = false;
|
this.closefirle();
|
this.closesecle();
|
this.closeCurrentOperator();
|
layerOpen("坡度分析", {
|
width: "100%",
|
height: "30%",
|
offset: "b",
|
url: "./static/html/AnalysisSlope.html",
|
fn: {
|
success: function (lay) {
|
lay.css({
|
"border-radius": "13px 13px 0px 0px",
|
"background-color": "rgba(0,0,0,.5)",
|
color: "white",
|
border: "2px solid white",
|
});
|
$(".layui-layer-title").css({
|
"background-color": "rgba(0,0,0,.5)",
|
" border": "none",
|
color: "white",
|
"font-size": "0.16rem",
|
"font-weight": "bold",
|
});
|
$(".layui-layer-setwin .layui-layer-close1").css({
|
"background-position": "-156px -38px",
|
});
|
},
|
cancel: (index, layero) => {
|
Bus.$emit("myMsg", true);
|
layer.close(index);
|
this.menubtn = true;
|
},
|
},
|
});
|
},
|
|
// 一键清除
|
yjqc(){
|
this.closePointOperator();
|
this.closeCurrentOperator();
|
this.clearls();
|
this.clearbh();
|
}
|
},
|
};
|
</script>
|
