From 81f54040c2cb65537c6c6e1db8358a39a57dea0d Mon Sep 17 00:00:00 2001
From: mayisheng <admin>
Date: Mon, 15 Aug 2022 16:14:01 +0800
Subject: [PATCH] 1
---
src/components/mobileCortrolButtom/index.vue | 422 ++++++++++++++++++++++++++++++++++------------------
1 files changed, 273 insertions(+), 149 deletions(-)
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index 417eede..eae6549 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/src/components/mobileCortrolButtom/index.vue
@@ -1,163 +1,287 @@
<template>
- <div class="m-left-mobileCortrolButtom">
- <div class="m-l-inbut" @click="mubiao"><i class="el-icon-s-help"></i></div>
- <div class="m-l-inbut">
- <!-- <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 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>
- <div class="m-l-inbut" @click="openBigPopupAfter">
- <i class="el-icon-menu"></i>
- </div>
- <div class="m-l-inbut" @click="goOn"><i class="el-icon-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 { 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 {
- DC: "",
- tabTable: [],
- ccData: [
- {
- lnt: 115.87071885,
- lat: 28.74382592,
- },
- {
- lnt: 121.50266534548483,
- lat: 31.24357506330159,
- },
- {
- lnt: 121.56405019,
- lat: 31.20845211,
- },
- {
- lnt: 121.55500463461836,
- lat: 31.257934074839717,
- },
- ],
- };
- },
- computed: {
- ...mapGetters(["mviewer", "openmobileGoTo"]),
- },
- created() {
- this.DC = global.DC;
- this.getStreet();
- },
- mounted() {},
- methods: {
- mubiao() {
- let that = this;
- //测试fllyTo
- },
- handleCommand(command) {
- let that = this;
- console.log(command, "定位");
- // 定位
- this.$store.dispatch("mapFlyTo", {
- //飞入
- lntLat: [command.lnt, command.lat, 2530],
- heading: 0,
- pitch: -45,
- roll: 0,
- });
- },
- openBigPopupAfter() {
- this.$store.commit("MSET_BIGPOPUPAFTER", true);
- },
- goOn() {
- let 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() {
- let that = this;
- getListarc().then((res) => {
- let 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,
- });
+ 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
+ }
+ ]
}
- // 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);
- });
},
- },
-};
+ props: ['mapCenter', 'frislayertHeight'],
+ computed: {
+ ...mapGetters([
+ 'openmobileGoTo',
+ 'dimensionData',
+ // "startPointFn",
+ 'dimension'
+ ])
+ },
+ created () {
+ // this.getStreet();
+ },
+ mounted () { },
+ methods: {
+ openOurSee () {
+ this.$store.commit(
+ 'MSET_OPENMOBILEPANORAMA',
+ 'http://vr.jxpskj.com/JXSFKZQJ/QJ/'
+ )
+ },
+ 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'>
+<style scoped lang="scss">
.m-left-mobileCortrolButtom {
- position: fixed;
- bottom: 20px;
- left: 20px;
- z-index: 200;
- .m-l-inbut {
- float: left;
- width: 39px;
- height: 39px;
- background-color: #c9302c;
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- font-size: 22px;
- margin-left: 12px;
- border-radius: 5px;
- .icons {
- display: inline-block;
- width: 100%;
- height: 100%;
+ 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%;
+ }
+ }
}
- .icon {
- font-size: 20px;
- color: #fff;
- &::before {
- width: 100%;
- height: 100%;
- }
- }
- }
}
</style>
--
Gitblit v1.9.3