<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.dictValue }}
|
</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'
|
|
import { GCJ02ToWGS84 } from '@/utils/CoordTransform'
|
import { textHeights } from 'ol/render/canvas'
|
|
let extent = [
|
{
|
key: 1,
|
xMin: 112.51303616638316,
|
yMin: -0.103420786429659,
|
xMax: 112.67880038471827,
|
yMax: 0.000004508906477476281,
|
resolution: 0.00001903568804664224,
|
|
x: (x, y) => {
|
return -250.6503 + 2.0389 * x + 4.4338 * y
|
},
|
|
y: (x, y) => {
|
return 228.1454 - 2.321 * x + 1.4165 * y
|
},
|
},
|
|
{
|
key: 2,
|
xMin: 112.51302551881798,
|
yMin: -0.16235359398493399,
|
xMax: 112.72742295590702,
|
yMax: 0.000004509195932360471,
|
resolution: 0.00001903568804664224,
|
|
x: (x, y) => {
|
return -802.9905 + 6.1504 * x + 7.0694 * y
|
},
|
|
u: (x, y) => {
|
return 295.4321 - 3.4878 * x + 3.775 * y
|
},
|
},
|
]
|
|
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
|
}
|
],
|
map2D: this.$store.state.openlayerData.openlayers.map2D
|
}
|
},
|
props: ['mapCenter', 'frislayertHeight'],
|
|
inject: ['mobileMapElement'],
|
|
computed: {
|
...mapGetters([
|
'openmobileGoTo',
|
'dimensionData',
|
// "startPointFn",
|
'dimension'
|
])
|
},
|
created () {
|
// this.getStreet()
|
},
|
mounted () {
|
// eslint-disable-next-line no-undef
|
},
|
methods: {
|
openOurSee () {
|
let url
|
|
if (this.mobileMapElement.campusValue == 1) {
|
url = 'https://vr.jxpskj.com:1443/JXKESFDX_HJZXQ/'
|
} else {
|
url = 'https://vr.jxpskj.com:1443/JXKJSFDX_FLXQ/'
|
}
|
|
this.$store.commit(
|
'MSET_OPENMOBILEPANORAMA',
|
// 'https://vr.jxpskj.com/JXSFKZQJ/QJ/' // sd
|
url // jg
|
)
|
},
|
|
goOns () {
|
const that = this
|
|
var options = { timeout: 8000 }// 设置定位超时
|
|
window.geolocation.getLocation(showPosition, showErrow, options)
|
|
let cur = extent.find((item) => item.key == this.mobileMapElement.campusValue)
|
|
function showPosition (result) {
|
let positionWgs = GCJ02ToWGS84(result.lng, result.lat)
|
|
let position = {
|
lng: positionWgs[0],
|
lat: positionWgs[1],
|
}
|
|
const data = {
|
name: '我的位置',
|
jd: position.lng,
|
wd: position.lat
|
}
|
|
if (
|
position.lng > cur.xMin &&
|
position.lng < cur.xMax &&
|
position.lat > cur.yMin &&
|
position.lat < cur.yMax
|
) {
|
that.$store.dispatch('pcMoveView', {
|
jd: position.lng,
|
wd: position.lat,
|
resolution: cur.resolution,
|
})
|
that.$store.dispatch('addLabelLayerIconMobelUse', {
|
data: data,
|
clear: true
|
})
|
} else {
|
that.$message({
|
message: '您当前位置超出学校范围',
|
type: 'warning'
|
})
|
}
|
}
|
|
function showErrow (result) {
|
if (result.code == 1) {
|
confirm('您拒绝了定位功能')
|
} else if (result.code == 3 || result.code == 5) {
|
confirm('请求超时')
|
}
|
}
|
},
|
|
zoomIns (val) {
|
if (this.mobileMapElement.campusValue == 1) {
|
this.map2D.getView().setCenter([112.613918275550715, -0.0457081387615907618595])
|
this.map2D.getView().setResolution(0.00001903568804664224)
|
} else {
|
this.map2D.getView().setCenter([112.6202242373625, -0.0781745423945008147645])
|
this.map2D.getView().setResolution(0.00001903568804664224)
|
}
|
},
|
|
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) {
|
this.$parent.setCampusValue(command.dictKey)
|
},
|
openBigPopupAfter () {
|
this.$store.commit('MSET_BIGPOPUPAFTER', true)
|
},
|
goOn () {
|
const that = this
|
this.$store.commit('MSET_OPENMOBILEGOTO', !that.openmobileGoTo)
|
// let data = {
|
// ip: returnCitySN["cip"],
|
// key: "7WKBZ-QDY62-WEEUG-C7KUN-ADAF5-L5BKZ",
|
// };
|
// getIp(data).then((res) => {
|
// // getUsers(data).then((res) => {
|
// });
|
},
|
getStreet () {
|
getListarc().then((res) => {
|
this.tabTable = res.data.data
|
|
this.$parent.setCampusValue(res.data.data[0].dictKey)
|
})
|
}
|
},
|
destroyed () {
|
|
}
|
}
|
</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>
|
