From b7c39e4ccd65249dc385d76d08ed59834f83ad97 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Wed, 15 Dec 2021 17:34:04 +0800
Subject: [PATCH] +
---
src/position/position.js | 60 +++
src/store/modules/popupParams.js | 4
public/index.html | 41 +
src/api/mobile/ip/index.js | 18 +
src/components/mobileCortrolButtom/index.vue | 75 +++
src/components/mobilePopupOurAfter/index.vue | 135 +++++++
public/img/cc/cc.png | 0
src/components/mobileLeftNav/index.vue | 64 +++
src/store/modules/mobile.js | 11
src/components/mobileCortrol/index.vue | 2
src/components/mobilePopupOurOnce/index.vue | 112 ++++++
src/components/mobilemap/index.vue | 73 +++
src/styles/mobile/popup.scss | 96 ++++-
src/components/mobilePopupOur/index.vue | 251 ++++++++++++++
src/store/getters.js | 4
src/components/mobileCortrolSearch/index.vue | 7
src/mobileDivForms/mobileDivForms.js | 47 --
17 files changed, 897 insertions(+), 103 deletions(-)
diff --git a/public/img/cc/cc.png b/public/img/cc/cc.png
new file mode 100644
index 0000000..a75f741
--- /dev/null
+++ b/public/img/cc/cc.png
Binary files differ
diff --git a/public/index.html b/public/index.html
index 85d9755..2c50698 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,18 +1,27 @@
<!DOCTYPE html>
<html lang="">
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <title>智慧校园大数据三维可视化平台</title>
- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
- </head>
- <body>
- <noscript>
- <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
- </noscript>
- <div id="app"></div>
- <!-- built files will be auto injected -->
- </body>
-</html>
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
+ <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <title>智慧校园大数据三维可视化平台</title>
+ <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
+ <!-- 高德定位 -->
+ <script type="text/javascript"
+ src="https://webapi.amap.com/maps?v=1.4.15&key=4b3e1db3211054ce5b466407cbb9d221"></script>
+ <!-- ip -->
+ <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
+</head>
+
+<body>
+ <noscript>
+ <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+ Please enable it to continue.</strong>
+ </noscript>
+ <div id="app"></div>
+ <!-- built files will be auto injected -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/api/mobile/ip/index.js b/src/api/mobile/ip/index.js
new file mode 100644
index 0000000..93f5a6e
--- /dev/null
+++ b/src/api/mobile/ip/index.js
@@ -0,0 +1,18 @@
+/*
+ * @Author: Morpheus
+ * @Date: 2021-05-09 15:17:44
+ * @Last Modified by: liu
+ * @Last Modified time: 2021-12-15 16:43:48
+ */
+// 党群机构
+import request from '@/router/axios'
+
+export const getIp = (params) => {
+ return request({
+ // url: 'https://apis.map.qq.com/ws/location/v1/ip',
+ // let url = `https://apis.map.qq.com/ws/location/v1/ip?ip=${data.ip}&key=${data.key}`;
+ url: `http://192.168.31.179:9898/ws/location/v1/ip?ip=${params.ip}&key=${params.key}`,
+ method: 'get',
+ // params: params
+ })
+}
diff --git a/src/components/mobileCortrol/index.vue b/src/components/mobileCortrol/index.vue
index f3b8b9c..9e6b016 100644
--- a/src/components/mobileCortrol/index.vue
+++ b/src/components/mobileCortrol/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="m-left-control">
- <div class="m-l-inbut" @click="zoomIn('+')">+</div>
+ <div class="m-l-inbut zoom-in">+</div>
<div class="m-l-inbut" @click="zoomIn('-')">-</div>
</div>
</template>
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index ea17825..1f6020a 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/src/components/mobileCortrolButtom/index.vue
@@ -1,30 +1,70 @@
<template>
<div class="m-left-mobileCortrolButtom">
<div class="m-l-inbut"><i class="el-icon-s-help"></i></div>
- <div class="m-l-inbut"><i class="el-icon-s-flag"></i></div>
- <div class="m-l-inbut"><i class="el-icon-menu"></i></div>
- <div class="m-l-inbut"><i class="el-icon-location"></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 command="西东大街">西东大街</el-dropdown-item>
+ <el-dropdown-item command="长江路">长江路</el-dropdown-item>
+ <el-dropdown-item command="科技园">科技园</el-dropdown-item>
+ <el-dropdown-item command="逸夫楼">逸夫楼</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="goOn"><i class="el-icon-location"></i></div>
</div>
</template>
<script>
+import { mapGetters } from "vuex";
+import { getIp, getUsers } from "@/api/mobile/ip/index";
export default {
name: "mobileCortrolButtom",
- computed: {},
data() {
- return {
- viewer: null,
- DC: null,
- };
+ return {};
+ },
+ computed: {
+ ...mapGetters(["mviewer"]),
},
created() {
this.DC = global.DC;
},
mounted() {},
methods: {
- initialize(viewer) {
- viewer.scene.globe.depthTestAgainstTerrain = false;
- this.viewer = viewer;
+ handleCommand(command) {
+ console.log(command, "定位");
+ // 定位
+ // this.mviewer.zoomToPosition(
+ // new DC.Position(
+ // e.wgs84Position.lng,
+ // e.wgs84Position.lat - 0.016,
+ // 1530,
+ // 0,
+ // -45
+ // )
+ // );
+ },
+ openBigPopupAfter() {
+ this.$store.commit("MSET_BIGPOPUPAFTER", true);
+ },
+ goOn() {
+ 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);
+ // });
},
},
};
@@ -48,6 +88,19 @@
font-size: 22px;
margin-left: 12px;
border-radius: 5px;
+ .icons {
+ display: inline-block;
+ width: 100%;
+ height: 100%;
+ }
+ .icon {
+ font-size: 20px;
+ color: #fff;
+ &::before {
+ width: 100%;
+ height: 100%;
+ }
+ }
}
}
</style>
diff --git a/src/components/mobileCortrolSearch/index.vue b/src/components/mobileCortrolSearch/index.vue
index 3926498..4b1edab 100644
--- a/src/components/mobileCortrolSearch/index.vue
+++ b/src/components/mobileCortrolSearch/index.vue
@@ -6,6 +6,7 @@
slot="append"
class="iconSearch"
icon="el-icon-search"
+ @click="search"
></el-button>
</el-input>
</div>
@@ -20,6 +21,7 @@
return {
viewer: null,
DC: null,
+ input: "",
};
},
created() {
@@ -31,6 +33,11 @@
viewer.scene.globe.depthTestAgainstTerrain = false;
this.viewer = viewer;
},
+ search() {
+ let that = this;
+ this.$store.commit("MSET_BIGPOPUP", { search: true, value: that.input });
+ that.input = "";
+ },
},
};
</script>
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 1247850..2cbf6e6 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -14,6 +14,34 @@
<span>{{ item.label }}</span>
</li>
</ul>
+ <div
+ ref="mobile-mapContentContent"
+ v-show="popupWindow1"
+ id="mobile-map_MP1"
+ >
+ <div class="mobile-popup-imgs-heard">
+ <img :src="url1" alt="" />
+ <el-image
+ style="width: 100px; height: 100px"
+ :src="url1"
+ id="mobileBigImgs"
+ v-show="false"
+ :preview-src-list="srcList1"
+ >
+ </el-image>
+ 南门口
+ </div>
+ <div class="mobile-popup-control">
+ <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs1"
+ >图集</el-link
+ >
+ <el-divider direction="vertical"></el-divider>
+ <el-link icon="el-icon-map-location">实景</el-link>
+ <el-divider direction="vertical"></el-divider>
+ <el-link icon="el-icon-aim" @click="goOn1">去这</el-link>
+ </div>
+ </div>
+ <!-- 地图图标弹窗↑ -->
</div>
</template>
@@ -36,6 +64,12 @@
},
data() {
return {
+ popupWindow1: false,
+ url1: "/img/job/one.jpg",
+ srcList1: [
+ "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
+ "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
+ ],
icons: "el-icon-d-arrow-right",
iconHide: false,
navStyle: {
@@ -142,6 +176,8 @@
return list;
},
leftNavClick(item) {
+ // console.log(item);
+ this.popupWindow1 = false;
item.flag = !item.flag;
if (item.flag == true) {
item.img = item.checked;
@@ -152,6 +188,7 @@
}
},
initialize(viewer) {
+ var that = this;
viewer.scene.globe.depthTestAgainstTerrain = false;
this.viewer = viewer;
this.tagLayer = new this.DC.HtmlLayer("tagLayer");
@@ -185,6 +222,28 @@
`
);
this.tagLayer.addOverlay(divIcon);
+ //订阅事件1
+ divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // console.log(e);
+ that.popupWindow1 = true;
+ // 定制化窗体
+ var divForms = new DC.mobileDivForms(viewer, {
+ domId: "mobilePopup",
+ title: "成教楼 ",
+ className: "mobilePopup",
+ content: document.getElementById("mobile-map_MP1"),
+ position: [e.position],
+ });
+ viewer.zoomToPosition(
+ new DC.Position(
+ e.overlay._position._lng,
+ e.overlay._position._lat - 0.012,
+ 1530,
+ 0,
+ -45
+ )
+ );
+ });
});
const positions2 = this.generatePosition(50);
@@ -284,6 +343,11 @@
this.parkLayer.show = false;
this.comeLayer.show = false;
},
+ mobileOpenImgs1() {
+ let imgsDom = document.getElementById("mobileBigImgs");
+ imgsDom.click();
+ },
+ goOn1() {},
},
};
</script>
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
new file mode 100644
index 0000000..c9e8cc9
--- /dev/null
+++ b/src/components/mobilePopupOur/index.vue
@@ -0,0 +1,251 @@
+<template>
+ <div id="mobilePopupOur" v-loading.fullscreen.lock="fullscreenLoading">
+ <div class="m_p_heard">
+ <div class="m_p_h_break" @click="closeBigPopup">
+ <i class="el-icon-arrow-left icon"></i>
+ </div>
+ <div class="m_p_h_center">
+ <div>
+ <div v-if="mBigPopup.search" style="color: #fff">查询结果</div>
+ <el-dropdown trigger="click" @command="choiceIt" v-else>
+ <span class="el-dropdown-link">
+ {{ choiceValue }}<i class="el-icon-arrow-down el-icon--right"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item
+ v-for="(item, index) in choiceData"
+ :key="index"
+ :command="item.name"
+ >{{ item.name }}</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </el-dropdown>
+ </div>
+ </div>
+ </div>
+ <div class="m_p_center">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane label="西东大街" name="first">
+ <div class="m_p_c_tableIn">
+ <mobilePopupOurOnce
+ v-for="(item, index) in tableData1"
+ :key="index"
+ :onceData="item"
+ ></mobilePopupOurOnce>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="长江路" name="second">
+ <div class="m_p_c_tableIn">
+ <mobilePopupOurOnce
+ v-for="(item, index) in tableData2"
+ :key="index"
+ :onceData="item"
+ ></mobilePopupOurOnce>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="科技园" name="third">
+ <div class="m_p_c_tableIn">
+ <mobilePopupOurOnce
+ v-for="(item, index) in tableData3"
+ :key="index"
+ :onceData="item"
+ ></mobilePopupOurOnce>
+ </div>
+ </el-tab-pane>
+ <el-tab-pane label="逸夫楼" name="fourth">
+ <div class="m_p_c_tableIn">
+ <mobilePopupOurOnce
+ v-for="(item, index) in tableData4"
+ :key="index"
+ :onceData="item"
+ ></mobilePopupOurOnce>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+ computed: {
+ ...mapGetters(["mBigPopup"]),
+ },
+ name: "mobilePopupOur",
+ data() {
+ return {
+ choiceValue: "",
+ choiceData: [
+ {
+ name: "党群机构",
+ value: "1",
+ },
+ {
+ name: "职能部门",
+ value: "2",
+ },
+ {
+ name: "其他机构",
+ value: "3",
+ },
+ ],
+ fullscreenLoading: false,
+ activeName: "first",
+ tableData1: [
+ {
+ name: "电力部门",
+ icon: "",
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ buts: ["定位"],
+ },
+ ],
+ tableData2: [
+ {
+ name: "电力部门2",
+ icon: "",
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门2",
+ icon: "",
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆2",
+ icon: "",
+ buts: ["定位"],
+ },
+ ],
+ tableData3: [
+ {
+ name: "电力部门3",
+ icon: "",
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门3",
+ icon: "",
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆3",
+ icon: "",
+ buts: ["定位"],
+ },
+ ],
+ tableData4: [
+ {
+ name: "电力部门4",
+ icon: "",
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门4",
+ icon: "",
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆4",
+ icon: "",
+ buts: ["定位"],
+ },
+ ],
+ };
+ },
+ // watch: {
+ // mBigPopup() {
+ // console.log(this.mBigPopup.name);
+ // this.choiceValue = this.mBigPopup.name;
+ // },
+ // },
+ mounted() {
+ // this.fullscreenLoading = true;
+ setTimeout(() => {
+ if (this.mBigPopup.search) {
+ console.log("查询搜索结果", this.mBigPopup.value);
+ return;
+ }
+ this.choiceValue = this.mBigPopup.name;
+ this.fullscreenLoading = false;
+ this.$store.commit("MSET_BIGPOPUPAFTER", false);
+ console.log("请求对应街道接口");
+ }, 1000);
+ // this.choiceValue = this.choiceData[0].name;
+ },
+ methods: {
+ handleClick(tab, event) {
+ console.log(tab.name);
+ },
+ choiceIt(name) {
+ this.choiceValue = name;
+ },
+ closeBigPopup() {
+ this.$store.commit("MSET_BIGPOPUP", false);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+#mobilePopupOur {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ z-index: 300;
+ .m_p_heard {
+ width: 100%;
+ height: 50px;
+ background-color: #a40000;
+ .m_p_h_break {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .icon {
+ font-size: 22px;
+ color: #fff;
+ }
+ }
+ .m_p_h_center {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .el-dropdown-link {
+ color: #fff;
+ }
+ }
+ }
+ .m_p_center {
+ width: 100%;
+ height: calc(100% - 50px);
+ // border: 1px solid red
+ box-sizing: border-box;
+ .m_p_c_tableIn {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/mobilePopupOurAfter/index.vue b/src/components/mobilePopupOurAfter/index.vue
new file mode 100644
index 0000000..9847d54
--- /dev/null
+++ b/src/components/mobilePopupOurAfter/index.vue
@@ -0,0 +1,135 @@
+<template>
+ <div id="mobilePopupOurAfter">
+ <div class="m_p_a_heard">
+ <div><i class="el-icon-menu icon"></i></div>
+ <div @click="closeBigPopupAfter"><i class="el-icon-close icon"></i></div>
+ </div>
+ <div class="m_p_a_center">
+ <div class="m_p_a_center_group">
+ <div
+ class="m_p_a_center_once"
+ v-for="(item, index) in choiceDataUp"
+ @click="openBigPopup(item)"
+ :key="index"
+ >
+ <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
+ <div class="m_p_a_c_o_down">{{ item.name }}</div>
+ </div>
+ </div>
+ <div class="m_p_a_center_group">
+ <div
+ class="m_p_a_center_once"
+ v-for="(item, index) in choiceDataDown"
+ @click="openBigPopup(item)"
+ :key="index"
+ >
+ <div class="m_p_a_c_o_up"><i :class="[item.icon]"></i></div>
+ <div class="m_p_a_c_o_down">{{ item.name }}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "mobilePopupOurAfter",
+ data() {
+ return {
+ choiceValue: "",
+ choiceDataUp: [
+ {
+ name: "机构单位",
+ icon: "el-icon-s-cooperation",
+ },
+ {
+ name: "校园建筑",
+ icon: "el-icon-s-management",
+ },
+ {
+ name: "生活设施",
+ icon: "el-icon-s-flag",
+ },
+ ],
+ choiceDataDown: [
+ {
+ name: "文化风景",
+ icon: "el-icon-s-opportunity",
+ },
+ {
+ name: "出入口",
+ icon: "el-icon-s-promotion",
+ },
+ {
+ name: "停车场",
+ icon: "el-icon-s-flag",
+ },
+ ],
+ };
+ },
+ mounted() {},
+ methods: {
+ openBigPopup(val) {
+ this.$store.commit("MSET_BIGPOPUP", val);
+ },
+ closeBigPopupAfter() {
+ this.$store.commit("MSET_BIGPOPUPAFTER", false);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.flexCenter {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+#mobilePopupOurAfter {
+ position: fixed;
+ top: 37.5%;
+ left: 13.5%;
+ width: 75%;
+ height: 25%;
+ background-color: #fff;
+ z-index: 300;
+ .m_p_a_heard {
+ width: 100%;
+ height: 35px;
+ box-sizing: border-box;
+ padding: 5px 15px;
+ @extend .flexCenter;
+ justify-content: space-between;
+ background-color: #a40000;
+ div {
+ width: 35px;
+ height: 35px;
+ @extend .flexCenter;
+ }
+ .icon {
+ font-size: 24px;
+ color: #fff;
+ }
+ }
+ .m_p_a_center {
+ width: 100%;
+ height: calc(100% - 35px);
+ @extend .flexCenter;
+ flex-direction: column;
+ .m_p_a_center_group {
+ width: 100%;
+ height: 40%;
+ @extend .flexCenter;
+ .m_p_a_center_once {
+ width: 30%;
+ height: 100%;
+ background-color: #a40000;
+ color: #fff;
+ border: 2px solid rgb(255, 255, 255);
+ @extend .flexCenter;
+ flex-direction: column;
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/mobilePopupOurOnce/index.vue b/src/components/mobilePopupOurOnce/index.vue
new file mode 100644
index 0000000..7967a8f
--- /dev/null
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -0,0 +1,112 @@
+<template>
+ <div class="mobilePopupOurOnce">
+ <div class="mobilePopupOurOnce_center">
+ <div class="mobilePopupOurOnce_left">
+ <img src="img/cc/cc.png" alt="" />
+ </div>
+ <div class="mobilePopupOurOnce_right">
+ <div class="mobilePopupOurOnce_r_up">{{ onceData.name }}</div>
+ <div class="mobilePopupOurOnce_r_down">
+ <div v-for="(item, index) in seebut" :key="index">
+ <el-link
+ icon="el-icon-map-location"
+ class="mobilePopupOurOnce_r_d_in"
+ @click="openOnce(item.name)"
+ >{{ item.name }}</el-link
+ >
+ <el-divider
+ direction="vertical"
+ class="mobilePopupOurOnce_r_d_in"
+ v-if="index != seebut.length - 1"
+ ></el-divider>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+ props: ["onceData"],
+ name: "mobilePopupOurOnce",
+ computed: {
+ ...mapGetters(["mviewer"]),
+ seebut() {
+ let buts = this.onceData.buts;
+ let b = [];
+ for (let k in buts) {
+ b.push({
+ name: buts[k],
+ });
+ }
+ return b;
+ },
+ },
+ methods: {
+ openOnce(val) {
+ console.log(val, this.onceData.name);
+ // 定位
+ // this.mviewer.zoomToPosition(
+ // new DC.Position(
+ // e.wgs84Position.lng,
+ // e.wgs84Position.lat - 0.016,
+ // 1530,
+ // 0,
+ // -45
+ // )
+ // );
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+// 继承类
+.flexCenter {
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+}
+.mobilePopupOurOnce {
+ padding: 0 0;
+ margin: 0 8px;
+ .mobilePopupOurOnce_center {
+ margin-bottom: 8px;
+ height: 80px;
+ border-bottom: #d4d4d4 dashed 1px;
+ padding-bottom: 8px;
+ @extend .flexCenter;
+ .mobilePopupOurOnce_left {
+ width: 32%;
+ height: 100%;
+ @extend .flexCenter;
+ }
+ .mobilePopupOurOnce_right {
+ width: 68%;
+ height: 100%;
+ @extend .flexCenter;
+ flex-direction: column;
+ .mobilePopupOurOnce_r_up {
+ height: 50%;
+ width: 100%;
+ font-size: 16px;
+ text-indent: 1em;
+ display: flex !important;
+ align-items: center !important;
+ }
+ .mobilePopupOurOnce_r_down {
+ height: 50%;
+ width: 100%;
+ padding-left: 1em;
+ display: flex !important;
+ align-items: center !important;
+ .mobilePopupOurOnce_r_d_in {
+ font-size: 17px;
+ }
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 1953320..f5b4d9f 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -1,8 +1,8 @@
/* eslint-disable camelcase */
<template>
<div id="mobile-viewer-container">
+ <!-- 地图图标弹窗↓ -->
<div id="mobile-map_popup_content"></div>
-
<div
ref="mobile-mapContentContent"
v-show="popupWindow"
@@ -25,21 +25,27 @@
>图集</el-link
>
<el-divider direction="vertical"></el-divider>
-
<el-link icon="el-icon-map-location">实景</el-link>
<el-divider direction="vertical"></el-divider>
- <el-link icon="el-icon-aim">去这</el-link>
+ <el-link icon="el-icon-aim" @click="goOn">去这</el-link>
</div>
</div>
+ <!-- 地图图标弹窗↑ -->
+ <!-- 控制↓ -->
<mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
- <mobileCortrol ref="mobileCortrol"></mobileCortrol>
+ <!-- <mobileCortrol ref="mobileCortrol"></mobileCortrol> -->
<mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
<mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
+ <!-- 控制↑ -->
+ <!-- 控制大弹窗的弹窗 -->
+ <mobilePopupOurAfter v-if="mBigPopupAfter"></mobilePopupOurAfter>
+ <!-- 大弹窗 -->
+ <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>
</div>
</template>
<script>
import { mapGetters } from "vuex";
-
+import { location } from "../../position/position";
export default {
name: "mobilemapBox",
data() {
@@ -51,10 +57,28 @@
],
popupFlag: false,
popupWindow: false,
+ bigPopup: {
+ width: 0,
+ height: 0,
+ transition: "all 3s",
+ },
};
},
computed: {
- ...mapGetters(["mviewer"]),
+ ...mapGetters(["mviewer", "mBigPopup", "mBigPopupAfter"]),
+ },
+ watch: {
+ mBigPopup() {
+ if (this.mBigPopup) {
+ this.bigPopup.width = "100%";
+ this.bigPopup.height = "100%";
+ this.bigPopup.display = "inline-block";
+ } else {
+ this.bigPopup.width = "0";
+ this.bigPopup.height = "0";
+ this.bigPopup.display = "none";
+ }
+ },
},
mounted() {
var DC = global.DC;
@@ -203,7 +227,7 @@
viewer.scene.globe.depthTestAgainstTerrain = false;
// console.log(document.getElementById("mobile-map_content_content"));
- console.log(e.position);
+ // console.log(e.position);
// 定制化窗体
var divForms = new DC.mobileDivForms(viewer, {
@@ -216,8 +240,8 @@
viewer.zoomToPosition(
new DC.Position(
e.wgs84Position.lng,
- e.wgs84Position.lat - 0.016,
- 2030,
+ e.wgs84Position.lat - 0.012,
+ 1530,
0,
-45
)
@@ -232,7 +256,7 @@
// )
viewer.compass.enable = false;
- viewer.zoomController.enable = false;
+ viewer.zoomController.enable = true;
viewer.locationBar.enable = false;
viewer.distanceLegend.enable = true;
}
@@ -244,6 +268,35 @@
let imgsDom = document.getElementById("mobileBigImgs");
imgsDom.click();
},
+ goOn() {
+ // if (navigator.geolocation) {
+ // navigator.geolocation.watchPosition(backPoint);
+ // }
+ // function backPoint(res) {
+ // console.log(res);
+ // let position = [res.coords.longitude, res.coords.latitude];
+ // console.log(position);
+ // }
+ // this.getLocation();
+ // location((res) => {
+ // console.log(res);
+ // alert(res.message);
+ // });
+ // console.log(returnCitySN["cip"]);
+ },
+ getLocation() {
+ // let _that = this;
+ // let geolocation = location.initMap("map-container"); //定位
+ // AMap.event.addListener(geolocation, "complete", (result) => {
+ // console.log(result);
+ // // console.log("hhha");
+ // // _that.lat = result.position.lat;
+ // // _that.lng = result.position.lng;
+ // // _that.province = result.addressComponent.province;
+ // // _that.city = result.addressComponent.city;
+ // // _that.district = result.addressComponent.district;
+ // });
+ },
},
};
</script>
diff --git a/src/mobileDivForms/mobileDivForms.js b/src/mobileDivForms/mobileDivForms.js
index e26010c..3aa512a 100644
--- a/src/mobileDivForms/mobileDivForms.js
+++ b/src/mobileDivForms/mobileDivForms.js
@@ -70,53 +70,9 @@
var el = $("<div class=''></div>")
- // var divBig = $("<div style='width: 100%; height: 100%;' class=''></div>")
-
- // var divForms = $("<div class='divForms divForms-theme'></div>")
-
- // var divFormsWrap = $("<div class='divForms-wrap'></div>")
-
- // var area = $("<div class='area'></div>")
-
- // var arrowLt = $("<div class='arrow-lt'></div>")
- // var bT = $("<div class='b-t'></div>")
- // var bR = $("<div class='b-r'></div>")
- // var bB = $("<div class='b-b'></div>")
- // var bL = $("<div class='b-l'></div>")
- // var arrowRb = $("<div class='arrow-rb'></div>")
-
- // var labelWrap = $("<div class='label-wrap'></div>")
var titleDiv = $("<div class='mobiletitle'></div>").text(this._title)
var labelContent = $("<div class='mobilelabel-content'></div>").append(this._content)
- // var titleDiv = $("<div class='mobiletitle'>楼</div>")
- // var labelContent = $("<div class='mobilelabel-content'>内容</div>")
-
- // labelWrap.append(titleDiv)
- // labelWrap.append(labelContent)
-
- // var bTL = $("<div class='b-t-l'></div>")
- // var bBR = $("<div class='b-b-r'></div>")
-
- // var arrow = $("<div class='arrow'></div>")
-
- // area.append(arrowLt)
- // area.append(bT)
- // area.append(bR)
- // area.append(bB)
- // area.append(bL)
- // area.append(arrowRb)
- // area.append(labelWrap)
-
- // divFormsWrap.append(area)
- // divFormsWrap.append(bTL)
- // divFormsWrap.append(bBR)
-
- // divForms.append(divFormsWrap)
- // divForms.append(arrow)
-
- // divBig.append(divForms)
- // el.append(divBig)
el.append(titleDiv)
el.append(labelContent)
@@ -137,6 +93,9 @@
}
positionPopUp(windowCoord, id) {
+ if (!windowCoord) {
+ return;
+ }
const wx = document.getElementById('app').clientWidth;
const x = windowCoord.x - (wx / 100 * 35);
const y = windowCoord.y - document.getElementById(id).offsetHeight - 15;
diff --git a/src/position/position.js b/src/position/position.js
new file mode 100644
index 0000000..1091582
--- /dev/null
+++ b/src/position/position.js
@@ -0,0 +1,60 @@
+/**
+* 高德地图定位
+*
+*/
+// export const location = {
+// undefined
+// initMap(id) {
+// // undefined
+// let mapObj = new AMap.Map(id, {});
+// let geolocation;
+// mapObj.plugin(["AMap.Geolocation"], function () {
+// // undefined
+// geolocation = new AMap.Geolocation({
+// // undefined
+// enableHighAccuracy: true, // 是否使用高精度定位，默认:true
+// timeout: 10000, // 超过10秒后停止定位，默认：无穷大
+// maximumAge: 0, // 定位结果缓存0毫秒，默认：0
+// convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
+// showButton: true, // 显示定位按钮，默认：true
+// buttonPosition: "LB", // 定位按钮停靠位置，默认：'LB'，左下角
+// buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+// showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
+// showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
+// panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
+// zoomToAccuracy: true, // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+// });
+// mapObj.addControl(geolocation);
+// geolocation.getCurrentPosition();
+// });
+// return geolocation;
+// },
+// };
+export const location = function (fn) {
+ AMap.plugin('AMap.Geolocation', function () {
+ var geolocation = new AMap.Geolocation({
+ // 是否使用高精度定位，默认：true
+ enableHighAccuracy: true,
+ // 设置定位超时时间，默认：无穷大
+ // timeout: 10000,
+ // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
+ // buttonOffset: new AMap.Pixel(10, 20),
+ // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+ // zoomToAccuracy: true,
+ // 定位按钮的排放位置, RB表示右下
+ // buttonPosition: 'RB'
+ })
+
+ geolocation.getCurrentPosition()
+ AMap.event.addListener(geolocation, 'complete', onComplete)
+ AMap.event.addListener(geolocation, 'error', onError)
+ function onComplete(data) {
+ // data是具体的定位信息
+ fn(data);
+ }
+ function onError(data) {
+ // 定位出错
+ fn(data);
+ }
+ })
+};
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
index f9941db..a7e07d6 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -2,6 +2,8 @@
viewer: state => state.viewer.viewer,
popupBgUrl: state => state.popupParams.popupBgUrl,
pupupQRUrl: state => state.popupParams.pupupQRUrl,
- mviewer: state => state.mobile.mviewer
+ mviewer: state => state.mobile.mviewer,
+ mBigPopup: state => state.mobile.mBigPopup,
+ mBigPopupAfter: state => state.mobile.mBigPopupAfter
}
export default getters
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 095fce9..133768c 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -1,10 +1,19 @@
const mobile = {
state: {
- mviewer: null
+ mviewer: null,
+ mBigPopup: false,
+ mBigPopupAfter: false,
+ ips: ''
},
mutations: {
MSET_VIEWER(state, viewer) {
state.mviewer = viewer
+ },
+ MSET_BIGPOPUP(state, viewer) {
+ state.mBigPopup = viewer
+ },
+ MSET_BIGPOPUPAFTER(state, viewer) {
+ state.mBigPopupAfter = viewer
}
},
actions: {
diff --git a/src/store/modules/popupParams.js b/src/store/modules/popupParams.js
index 2d3705a..7b1ccc1 100644
--- a/src/store/modules/popupParams.js
+++ b/src/store/modules/popupParams.js
@@ -4,10 +4,10 @@
pupupQRUrl: null
},
mutations: {
- SET_POPUPBGURL (state, popupBgUrl) {
+ SET_POPUPBGURL(state, popupBgUrl) {
state.popupBgUrl = popupBgUrl
},
- SET_POPUPQRURL (state, pupupQRUrl) {
+ SET_POPUPQRURL(state, pupupQRUrl) {
state.pupupQRUrl = pupupQRUrl
}
},
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index 8371b01..5a07d87 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -61,25 +61,87 @@
}
}
-// 比例尺
-#mobile-viewer-container .dc-distance-legend {
- right: 5px !important;
- left: auto !important;
-}
-// 缩放控制
-#mobile-viewer-container .dc-zoom-controller {
- left: 20px !important;
- top: 20px !important;
- .zoom-in .refresh .zoom-out {
- width: 32px !important;
- height: 32px !important;
- background-color: #c9302c !important;
+$controllerw: 35px !important;
+#mobile-viewer-container {
+ // 继承类
+ .flexCenter {
display: flex !important;
align-items: center !important;
justify-content: center !important;
- color: white !important;
- font-size: 22px !important;
- margin-bottom: 12px !important;
- border-radius: 5px !important;
+ }
+ // 比例尺
+ .dc-distance-legend {
+ right: 5px !important;
+ left: auto !important;
+ }
+ // 缩放控制
+ .dc-zoom-controller {
+ width: 32px !important;
+ height: auto !important;
+ left: 20px !important;
+ top: 50px !important;
+ z-index: 200;
+ background-color: transparent !important;
+ border: 1px solid transparent !important;
+
+ div:nth-child(1) {
+ // border-bottom: 1px solid #ebebeb;
+ margin-bottom: 20px !important;
+ }
+ div:nth-child(2) {
+ display: none !important;
+ }
+ div:nth-child(3) {
+ // border-top: 1px solid #ebebeb;
+ }
+ div {
+ width: $controllerw;
+ height: $controllerw;
+ position: relative !important;
+ left: -1px !important;
+ background-color: #c9302c !important;
+ color: white !important;
+ @extend .flexCenter;
+ border-radius: 8px;
+ svg {
+ width: 20px !important;
+ height: 20px !important;
+ }
+ }
+ }
+ //弹窗标签栏的标签
+ .m_p_center {
+ .el-tabs {
+ width: 100% !important;
+ height: 100% !important;
+ box-sizing: border-box;
+ .el-tabs__nav-scroll {
+ width: 100% !important;
+ @extend .flexCenter;
+ }
+ .el-tabs__content {
+ width: 100% !important;
+ height: calc(100% - 55px) !important;
+ box-sizing: border-box;
+ .el-tab-pane {
+ width: 100% !important;
+ height: 100% !important;
+ }
+ }
+ }
+ }
+
+ //地图底部按钮下拉菜单
+ .m-left-mobileCortrolButtom {
+ .el-dropdown {
+ width: 100% !important;
+ height: 100% !important;
+ @extend .flexCenter;
+ .el-icon-s-flag.icon {
+ position: relative;
+ top: 10px;
+ left: 10px;
+ }
+ }
}
}
--
Gitblit v1.9.3