<template>
|
<div class="m-left-mobileCortrolButtom">
|
<!-- 底部按钮
|
mobileCortrolButtom
|
-->
|
<!-- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div> -->
|
<div class="m-l-inbut" v-show="false">
|
<!-- <i class="el-icon-s-flag"></i> -->
|
<el-dropdown trigger="click" @command="handleCommand">
|
<span class="el-dropdown-link icons">
|
<i class="el-icon-s-flag icon"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="(item, index) in tabTable"
|
:key="index"
|
:command="item"
|
>{{ item.title }}</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
<div class="m-l-inbut" @click="openBigPopupAfter">
|
<i class="el-icon-menu"></i>
|
</div>
|
<!-- <div class="m-l-inbut" @click="openActivity">
|
<i class="el-icon-s-opportunity"></i>
|
</div>-->
|
<div class="m-l-inbut" @click="zoomIns">
|
<i class="el-icon-refresh"></i>
|
</div>
|
<div class="m-l-inbut" @click="goOns">
|
<i class="el-icon-location"></i>
|
</div>
|
<div class="m-l-inbut" @click="openOurSee">
|
<i class="el-icon-map-location"></i>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
import { getIp, getUsers } from '@/api/mobile/ip/index'
|
import { getListarc } from '@/api/mobile/public/arc'
|
import { getActivity } from '@/api/mobile/hd/hd'
|
export default {
|
name: 'mobileCortrolButtom',
|
data () {
|
return {
|
tabTable: [],
|
ccData: [
|
{
|
lnt: 114.03835559,
|
lat: 27.63057034
|
},
|
{
|
lnt: 114.03971446,
|
lat: 27.62986481
|
},
|
{
|
lnt: 114.03841654,
|
lat: 27.62919726
|
},
|
{
|
lnt: 114.039946,
|
lat: 27.62847544
|
}
|
]
|
}
|
},
|
props: ['mapCenter', 'frislayertHeight'],
|
computed: {
|
...mapGetters([
|
'openmobileGoTo',
|
'dimensionData',
|
// "startPointFn",
|
'dimension'
|
])
|
},
|
created () {
|
// this.getStreet();
|
},
|
mounted () { },
|
methods: {
|
openOurSee () {
|
this.$store.commit(
|
'MSET_OPENMOBILEPANORAMA',
|
'http://vr.jxpskj.com/lxxqw/'
|
)
|
},
|
goOns () {
|
const that = this
|
this.$store.commit('GET_NOWPOSITION', (res) => {
|
that.$store.dispatch('pcMoveView', {
|
jd: res[0],
|
wd: res[1],
|
viewer: global.viewer
|
})
|
|
const data = [
|
{
|
name: '我的位置',
|
jd: res[0],
|
wd: res[1]
|
}
|
]
|
that.$store.dispatch('addLabelLayerIconMobelUse', {
|
list: data,
|
clear: true,
|
mviewer: global.viewer
|
})
|
})
|
},
|
zoomIns (val) {
|
// this.$store.dispatch("mapFlyTo", {
|
// //飞入
|
// lntLat: [115.87988885, 28.72502592, 2100],
|
// // lntLat: [115.87186406, 28.74449337, 1200],
|
// // lntLat: [121.50492752204283, 31.21567802276832, 2530],
|
// heading: 0,
|
// pitch: -45,
|
// roll: 0,
|
// noOpen: true,
|
// });
|
// if (val) {
|
// if (this.dimension != val) {
|
// this.$store.dispatch("MSET_DIMENSIONS", val);
|
// }
|
// return;
|
// }
|
var that = this
|
|
global.viewer.flyToPosition(
|
new global.DC.Position(
|
that.mapCenter[0],
|
that.mapCenter[1],
|
that.frislayertHeight,
|
that.dimensionData.heading,
|
that.dimensionData.pitch,
|
that.dimensionData.roll
|
),
|
() => {
|
|
},
|
0
|
)
|
},
|
openActivity () {
|
const d = {
|
main: [
|
{
|
name: '活动',
|
type: 1,
|
method: getActivity
|
}
|
],
|
qurey: '活动'
|
}
|
this.$store.commit('MSET_POPUPOUROPENDATA', d)
|
this.$store.commit('MSET_BIGPOPUP', { name: '活动' })
|
// this.$store.commit("set_showActivity", true);
|
},
|
mubiao () {
|
// 测试fllyTo
|
},
|
handleCommand (command) {
|
const that = this
|
const position = [+command.lnt + 0.00027, +command.lat + 0.00048, 450]
|
console.log(command, '定位')
|
// 定位
|
// this.$store.commit("MSETCC_SETCC", {
|
// lntLat: position,
|
// });
|
// this.$store.dispatch("mapFlyTo", {
|
// //飞入
|
// lntLat: [...position, 450],
|
// heading: 0,
|
// pitch: -90,
|
// roll: 0,
|
// noOpen: true,
|
// });
|
global.viewer.camera.setView({
|
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
|
// fromDegrees()方法，将经纬度和高程转换为世界坐标
|
// eslint-disable-next-line new-cap
|
destination: new global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
|
// 114.0351,
|
// 27.6314,
|
// 200.0
|
position[0],
|
position[1],
|
position[2]
|
),
|
orientation: {
|
heading: global.DC.Namespace.Cesium.Math.toRadians(
|
that.dimensionData.heading
|
),
|
pitch: global.DC.Namespace.Cesium.Math.toRadians(
|
that.dimensionData.pitch
|
),
|
// heading: data.heading,
|
// pitch: data.pitch,
|
roll: that.dimensionData.roll
|
}
|
})
|
},
|
openBigPopupAfter () {
|
this.$store.commit('MSET_BIGPOPUPAFTER', true)
|
},
|
goOn () {
|
const that = this
|
this.$store.commit('MSET_OPENMOBILEGOTO', !that.openmobileGoTo)
|
// console.log(returnCitySN["cip"]);
|
// let data = {
|
// ip: returnCitySN["cip"],
|
// key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ",
|
// };
|
// console.log("定位", data.ip);
|
// getIp(data).then((res) => {
|
// // getUsers(data).then((res) => {
|
// console.log(res);
|
// });
|
},
|
getStreet () {
|
const that = this
|
getListarc().then((res) => {
|
const title = []
|
const data = res.data.data
|
for (let k = 0; k < data.length; k++) {
|
title.push({
|
title: data[k].dictValue,
|
flag: false,
|
key: data[k].dictKey,
|
child: [],
|
lnt: that.ccData[k].lnt,
|
lat: that.ccData[k].lat
|
})
|
}
|
// res.data.data.forEach((item) => {
|
// title.push({
|
// title: item.dictValue,
|
// flag: false,
|
// key: item.dictKey,
|
// child: [],
|
// });
|
// });
|
this.tabTable = title
|
this.$store.commit('MSET_POPUPTABLENAME', title)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.m-left-mobileCortrolButtom {
|
position: fixed;
|
bottom: 35px;
|
left: 20px;
|
z-index: 200;
|
.m-l-inbut {
|
float: left;
|
width: 39px;
|
height: 39px;
|
background-color: rgb(33, 150, 243);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: white;
|
font-size: 32px;
|
margin-left: 12px;
|
border-radius: 5px;
|
.icons {
|
display: inline-block;
|
width: 100%;
|
height: 100%;
|
}
|
.icon {
|
font-size: 32px;
|
color: #fff;
|
&::before {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
