From 7804a3a4d61ff1d857973e974bbdf78a2e17feab Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 17 Dec 2021 15:08:36 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
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 | 96 +++
src/components/mobilePopupOurAfter/index.vue | 135 ++++
public/img/cc/cc.png | 0
src/components/mobileLeftNav/index.vue | 131 ++++
src/store/modules/mobile.js | 87 +++
src/components/mobileCortrol/index.vue | 34
src/components/mobileGoTo/index.vue | 63 ++
src/components/mobilePopupOurOnce/index.vue | 132 ++++
src/components/mobileWindow/index.vue | 80 ++
src/components/mobilemap/index.vue | 133 ++--
src/components/mobilePanorama/index.vue | 45 +
src/styles/mobile/popup.scss | 110 +++
src/components/mobilePopupOur/index.vue | 367 +++++++++++++
src/store/getters.js | 18
src/components/mobileCortrolSearch/index.vue | 7
src/mobileDivForms/mobileDivForms.js | 78 +-
20 files changed, 1,463 insertions(+), 176 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..b3a1cbc 100644
--- a/src/components/mobileCortrol/index.vue
+++ b/src/components/mobileCortrol/index.vue
@@ -1,7 +1,8 @@
<template>
<div class="m-left-control">
- <div class="m-l-inbut" @click="zoomIn('+')">+</div>
- <div class="m-l-inbut" @click="zoomIn('-')">-</div>
+ <div class="m-l-inbut zoom-in" @click="zoomIn">
+ <i class="el-icon-refresh"></i>
+ </div>
</div>
</template>
@@ -9,12 +10,31 @@
import { mapGetters } from "vuex";
export default {
name: "mobileCortrol",
+ data() {
+ return {
+ DC: "",
+ };
+ },
computed: {
...mapGetters(["mviewer"]),
},
+ created() {
+ this.DC = global.DC;
+ },
methods: {
zoomIn(val) {
- console.log(val);
+ let that = this;
+ // console.log(val);
+ // 121.49592752204283 31.23567802276832
+ this.mviewer.zoomToPosition(
+ new that.DC.Position(
+ 121.49592752204283,
+ 31.23567802276832 - 0.012,
+ 2530,
+ 0,
+ -45
+ )
+ );
// let camera = this.mviewer.camera;
// // console.log(camera.moveStart());
// // this.mviewer.getImageryLayerInfo().then((res) => {
@@ -65,11 +85,11 @@
.m-left-control {
position: fixed;
left: 20px;
- top: 20px;
- z-index: 200;
+ top: 87px;
+ z-index: 201 !important;
.m-l-inbut {
- width: 32px;
- height: 32px;
+ width: 35px;
+ height: 35px;
background-color: #c9302c;
display: flex;
align-items: center;
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index ea17825..27b63b7 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/src/components/mobileCortrolButtom/index.vue
@@ -1,30 +1,95 @@
<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
+ v-for="(item, index) in flagList"
+ :key="index"
+ :command="item"
+ >{{ item.name }}</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,
+ DC: "",
+ flagList: [
+ {
+ name: "西东大街",
+ position: [121.49500690245499, 31.23791479409691],
+ },
+ {
+ name: "长江路",
+ position: [121.52498934134815, 31.227021231622302],
+ },
+ {
+ name: "科技园",
+ position: [121.48624368075255, 31.197575925580797],
+ },
+ {
+ name: "逸夫楼",
+ position: [121.52391709005656, 31.276115901927575],
+ },
+ ],
};
+ },
+ computed: {
+ ...mapGetters(["mviewer", "openmobileGoTo"]),
},
created() {
this.DC = global.DC;
},
mounted() {},
methods: {
- initialize(viewer) {
- viewer.scene.globe.depthTestAgainstTerrain = false;
- this.viewer = viewer;
+ handleCommand(command) {
+ let that = this;
+ console.log(command, "定位");
+ // 定位
+ this.mviewer.zoomToPosition(
+ new that.DC.Position(
+ command.position[0],
+ command.position[1] - 0.012,
+ 1530,
+ 0,
+ -45
+ )
+ );
+ },
+ 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);
+ // });
},
},
};
@@ -48,6 +113,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/mobileGoTo/index.vue b/src/components/mobileGoTo/index.vue
new file mode 100644
index 0000000..a4c8f2c
--- /dev/null
+++ b/src/components/mobileGoTo/index.vue
@@ -0,0 +1,63 @@
+<template>
+ <div v-show="openmobileGoTo" class="mobileGoTo">
+ <el-input v-model="lnt"></el-input>
+ <el-input v-model="lat"></el-input>
+ <!-- <el-input v-model="alt"></el-input> -->
+ <el-button type="primary" @click="submitForm('')">跳转</el-button>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+ name: "mobileGoTo",
+ computed: {
+ ...mapGetters([
+ "openmobileGoTo",
+ "mviewer",
+ "DC",
+ "query",
+ "MobileWindowChangeData",
+ ]),
+ },
+ data() {
+ return {
+ lnt: "121.53772514948211",
+ lat: "31.23938286341316",
+ alt: "90.648862227",
+ };
+ },
+ watch: {
+ MobileWindowChangeData() {
+ this.lnt = this.query.lntLat[0];
+ this.lat = this.query.lntLat[1];
+ },
+ },
+ methods: {
+ submitForm() {
+ if (this.lnt && this.lat) {
+ let that = this;
+ // 定制化窗体
+ let position = {};
+ let lntLat = [that.lnt, that.lat];
+ let d = {
+ position,
+ lntLat,
+ query: { position, lntLat },
+ useJWD: true, //仅使用经纬度
+ };
+ that.$store.dispatch("setMobileWindows", d);
+ }
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.mobileGoTo {
+ position: fixed;
+ bottom: 60px;
+ width: 73%;
+ z-index: 500;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index 1247850..1e471c6 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -1,7 +1,7 @@
<template>
<div class="m-left-nav" :style="[navStyle]">
<!-- :style="[coutrolStyle]" -->
- <div class="m-left-coutrol" @click="iconHide = !iconHide">
+ <div class="m-left-coutrol" @click="changeIconHide">
<i :class="icons"></i>
</div>
<ul>
@@ -18,9 +18,9 @@
</template>
<script>
+import { mapGetters } from "vuex";
export default {
name: "mobileLeftNav",
- computed: {},
watch: {
iconHide() {
if (this.iconHide) {
@@ -34,10 +34,12 @@
}
},
},
+ computed: {
+ ...mapGetters(["iconHide"]),
+ },
data() {
return {
icons: "el-icon-d-arrow-right",
- iconHide: false,
navStyle: {
right: "0px",
},
@@ -132,6 +134,10 @@
},
mounted() {},
methods: {
+ changeIconHide() {
+ let isif = this.iconHide;
+ this.$store.commit("MSET_ICONHIDE", !isif);
+ },
generatePosition(num) {
const list = [];
for (let i = 0; i < num; i++) {
@@ -150,22 +156,30 @@
item.img = item.normal;
this[item.layer].show = false;
}
+ this.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
},
initialize(viewer) {
+ var that = this;
viewer.scene.globe.depthTestAgainstTerrain = false;
this.viewer = viewer;
this.tagLayer = new this.DC.HtmlLayer("tagLayer");
viewer.addLayer(this.tagLayer);
+
this.wayLayer = new this.DC.HtmlLayer("wayLayer");
viewer.addLayer(this.wayLayer);
+
this.sceneLayer = new this.DC.VectorLayer("sceneLayer");
viewer.addLayer(this.sceneLayer);
+
+ this.activityLayer = new this.DC.VectorLayer("activityLayer");
+ viewer.addLayer(this.activityLayer);
this.aedLayer = new this.DC.VectorLayer("aedLayer");
viewer.addLayer(this.aedLayer);
this.parkLayer = new this.DC.HtmlLayer("parkLayer");
viewer.addLayer(this.parkLayer);
+
this.comeLayer = new this.DC.VectorLayer("comeLayer");
viewer.addLayer(this.comeLayer);
@@ -184,7 +198,18 @@
</div>
`
);
- this.tagLayer.addOverlay(divIcon);
+ // e.overlay._position._lng,
+ // e.overlay._position._lat - 0.012,
+ //订阅事件1
+ divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ { name: "标签" }
+ );
+ });
+ this.tagLayer.addOverlay(divIcon); //标签
});
const positions2 = this.generatePosition(50);
@@ -202,7 +227,16 @@
</div>
`
);
- this.wayLayer.addOverlay(divIcon);
+ //订阅事件2
+ divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ { name: "道路" }
+ );
+ });
+ this.wayLayer.addOverlay(divIcon); //道路
});
const positions3 = this.generatePosition(50);
@@ -212,7 +246,44 @@
"/img/leftnav/map-panorama.png"
);
billboard.size = [16, 16];
- this.sceneLayer.addOverlay(billboard);
+ //订阅事件3
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "实景" }
+ );
+ });
+ this.sceneLayer.addOverlay(billboard); //实景
+ });
+
+ const positions10 = this.generatePosition(50);
+ positions10.forEach((item) => {
+ const label = new this.DC.Label(item, "活动");
+ label.setStyle({
+ fillColor: this.DC.Color.ORANGERED,
+ font: "10px sans-serif",
+ pixelOffset: { x: 0, y: -16 },
+ });
+ this.activityLayer.addOverlay(label);
+
+ const billboard = new this.DC.Billboard(
+ item,
+ "/img/leftnav/map-aed.png"
+ // "/img/leftnav/map-panorama.png"
+ );
+ billboard.size = [16, 16];
+ //订阅事件10
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "活动" }
+ );
+ });
+ this.activityLayer.addOverlay(billboard); //活动
});
const positions4 = this.generatePosition(10);
@@ -230,8 +301,16 @@
"/img/leftnav/map-aed.png"
);
billboard.size = [16, 16];
-
- this.aedLayer.addOverlay(billboard);
+ //订阅事件4
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "建筑AED" }
+ );
+ });
+ this.aedLayer.addOverlay(billboard); //AED
});
const positions5 = this.generatePosition(120);
@@ -253,6 +332,15 @@
</div>
`
);
+ //订阅事件5
+ divIcon.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.overlay._position._lng, e.overlay._position._lat],
+ { name: "校外街路侧停车场" }
+ );
+ });
this.parkLayer.addOverlay(divIcon);
});
@@ -273,17 +361,42 @@
"/img/leftnav/map-activity.png"
);
billboard.size = [16, 16];
-
+ //订阅事件6
+ billboard.on(DC.MouseEventType.CLICK, (e) => {
+ // 定制化窗体
+ that.openPopupS(
+ e.position,
+ [e.wgs84Position.lng, e.wgs84Position.lat],
+ { name: "123" }
+ );
+ });
this.comeLayer.addOverlay(billboard);
});
this.tagLayer.show = false;
this.wayLayer.show = false;
this.sceneLayer.show = false;
+ this.activityLayer.show = false;
this.aedLayer.show = false;
this.parkLayer.show = false;
this.comeLayer.show = false;
},
+ mobileOpenImgs1() {
+ let imgsDom = document.getElementById("mobileBigImgs");
+ imgsDom.click();
+ },
+ goOn1() {},
+ openPopupS(position, lntLat, query) {
+ let that = this;
+ // 定制化窗体
+ let d = {
+ position,
+ lntLat,
+ query: { ...(query || {}), position, lntLat },
+ useJWD: true, //仅使用经纬度
+ };
+ that.$store.dispatch("setMobileWindows", d);
+ },
},
};
</script>
diff --git a/src/components/mobilePanorama/index.vue b/src/components/mobilePanorama/index.vue
new file mode 100644
index 0000000..516a31f
--- /dev/null
+++ b/src/components/mobilePanorama/index.vue
@@ -0,0 +1,45 @@
+<template>
+ <div v-show="openmobilePanorama" class="mobilePanorama">
+ <div class="mobilePanorama-close" @click="closeMobilePanorama">
+ <i class="el-icon-error icon"></i>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+ name: "mobilePanorama",
+ computed: {
+ ...mapGetters(["openmobilePanorama"]),
+ },
+ data() {
+ return {};
+ },
+ methods: {
+ closeMobilePanorama() {
+ this.$store.commit("MSET_OPENMOBILEPANORAMA", false);
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.mobilePanorama {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 1000;
+ background-color: #fff;
+ .mobilePanorama-close {
+ position: absolute;
+ right: 5px;
+ top: 5px;
+ .icon {
+ font-size: 35px;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
new file mode 100644
index 0000000..5775c35
--- /dev/null
+++ b/src/components/mobilePopupOur/index.vue
@@ -0,0 +1,367 @@
+<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">
+ 查询结果{{ searchLabel ? "--" + searchLabel : "" }}
+ </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
+ v-for="(item, index) in tabTable"
+ :key="index"
+ :label="item.label"
+ :name="item.value"
+ >
+ <div class="m_p_c_tableIn">
+ <el-empty
+ v-show="item.child.length == 0"
+ description="暂无数据"
+ ></el-empty>
+ <mobilePopupOurOnce
+ v-for="(citem, cindex) in item.child"
+ :key="cindex"
+ :ends="item.child.length - 1 == cindex"
+ :onceData="citem"
+ ></mobilePopupOurOnce>
+ <div v-show="item.child.length != 0">
+ <el-divider content-position="left">
+ <i class="el-icon-s-promotion"></i> 暂无更多
+ </el-divider>
+ </div>
+ </div>
+ </el-tab-pane>
+ </el-tabs>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+ computed: {
+ ...mapGetters(["mBigPopup"]),
+ },
+ name: "mobilePopupOur",
+ data() {
+ return {
+ searchLabel: "",
+ choiceValue: "",
+ choiceData: [
+ {
+ name: "党群机构",
+ value: "1",
+ },
+ {
+ name: "职能部门",
+ value: "2",
+ },
+ {
+ name: "其他机构",
+ value: "3",
+ },
+ ],
+ tabTable: [
+ {
+ label: "西东大街",
+ value: "first",
+ child: [
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ lntLat: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ lntLat: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ lntLat: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ ],
+ },
+ {
+ label: "长江路",
+ value: "second",
+ child: [
+ {
+ name: "电力部门1",
+ icon: "",
+ position: [121.49190702133591, 31.234911741858513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门1",
+ icon: "",
+ position: [121.49907021413591, 31.234911741895513],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆1",
+ icon: "",
+ position: [121.49901024133591, 31.234911749581513],
+ buts: ["定位"],
+ },
+ ],
+ },
+ {
+ label: "科技园",
+ value: "third",
+ child: [],
+ },
+ {
+ label: "逸夫楼",
+ value: "fourth",
+ child: [],
+ },
+ ],
+ fullscreenLoading: false,
+ activeName: "first",
+ };
+ },
+ // watch: {
+ // mBigPopup() {
+ // console.log(this.mBigPopup.name);
+ // this.choiceValue = this.mBigPopup.name;
+ // },
+ // },
+ mounted() {
+ this.fullscreenLoading = true;
+ setTimeout(() => {
+ if (this.mBigPopup.search) {
+ this.searchLabel = this.mBigPopup.value;
+ console.log("查询搜索结果", this.mBigPopup.value);
+ this.fullscreenLoading = false;
+ return;
+ }
+ this.choiceValue = this.mBigPopup.name;
+ this.fullscreenLoading = false;
+ this.$store.commit("MSET_BIGPOPUPAFTER", false);
+ console.log("请求对应街道接口");
+ }, 500);
+ // this.choiceValue = this.choiceData[0].name;
+ },
+ methods: {
+ handleClick(tab, event) {
+ console.log(tab.name);
+ },
+ choiceIt(name) {
+ this.fullscreenLoading = true;
+ setTimeout(() => {
+ this.choiceValue = name;
+ this.fullscreenLoading = false;
+ console.log("请求对应头部下拉菜单接口");
+ }, 500);
+ },
+ 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..400eccb
--- /dev/null
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -0,0 +1,132 @@
+<template>
+ <div class="mobilePopupOurOnce">
+ <div
+ class="mobilePopupOurOnce_center"
+ :style="{
+ borderBottom: !ends ? '#d4d4d4 dashed 1px' : '',
+ marginBottom: !ends ? '6px' : '',
+ }"
+ >
+ <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", "ends"],
+ name: "mobilePopupOurOnce",
+ created() {
+ this.DC = global.DC;
+ },
+ data() {
+ return {
+ DC: "",
+ };
+ },
+ 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) {
+ let that = this;
+ console.log(val, this.onceData);
+ if (val == "定位") {
+ this.$store.commit("MSET_BIGPOPUP", false);
+ setTimeout(() => {
+ // 定制化窗体
+ let d = {
+ position: {},
+ lntLat: that.onceData.lntLat,
+ query: this.onceData,
+ useJWD: true, //仅使用经纬度
+ };
+ that.popupsDom = that.$store.dispatch("setMobileWindows", d);
+ }, 500);
+ } else if (val == "实景") {
+ this.$store.commit("MSET_OPENMOBILEPANORAMA", true);
+ }
+ },
+ },
+};
+</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/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
new file mode 100644
index 0000000..85f0188
--- /dev/null
+++ b/src/components/mobileWindow/index.vue
@@ -0,0 +1,80 @@
+<template>
+ <div
+ ref="mobile-mapContentContent"
+ v-show="!MobileWindowsHide"
+ id="mobile-map_content_content"
+ >
+ <div class="mobile-popup-imgs-heard">
+ <img :src="url" alt="" />
+ <el-image
+ style="width: 100px; height: 100px"
+ :src="url"
+ id="mobileBigImgs"
+ v-show="false"
+ :preview-src-list="srcList"
+ >
+ </el-image>
+ <div>{{ query.query }}</div>
+ <!-- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑 -->
+ </div>
+ <div class="mobile-popup-control">
+ <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
+ >图集</el-link
+ >
+ <el-divider direction="vertical"></el-divider>
+ <el-link icon="el-icon-map-location" @click="openMobilePanorama"
+ >实景</el-link
+ >
+ <el-divider direction="vertical"></el-divider>
+ <el-link icon="el-icon-aim" @click="goOn">去这</el-link>
+ </div>
+ </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+ name: "mobileWindow",
+ computed: {
+ ...mapGetters(["MobileWindowsHide", "query", "MobileWindowChangeData"]),
+ },
+ watch: {
+ MobileWindowChangeData() {
+ // this.fullscreenLoading = true;
+ if (!this.MobileWindowsHide) {
+ // setTimeout(() => {
+ // this.fullscreenLoading = false;
+ console.log("地图点击弹窗数据请求参数", this.query);
+ // console.log("地图点击弹窗数据请求参数", this.query.lntLat[0]);
+ // console.log("地图点击弹窗数据请求参数", this.query.lntLat[1]);
+ // }, 500);
+ }
+ },
+ },
+ data() {
+ return {
+ fullscreenLoading: false,
+ url: "/img/job/one.jpg",
+ positions: "",
+ srcList: [
+ "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
+ "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
+ ],
+ };
+ },
+ methods: {
+ mobileOpenImgs() {
+ let imgsDom = document.getElementById("mobileBigImgs");
+ imgsDom.click();
+ },
+ goOn() {},
+ openMobilePanorama() {
+ console.log(11);
+ this.$store.commit("MSET_OPENMOBILEPANORAMA", true);
+ },
+ },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
index 1953320..7046ae0 100644
--- a/src/components/mobilemap/index.vue
+++ b/src/components/mobilemap/index.vue
@@ -1,63 +1,66 @@
/* eslint-disable camelcase */
<template>
<div id="mobile-viewer-container">
+ <!-- 地图图标弹窗↓ -->
<div id="mobile-map_popup_content"></div>
-
- <div
- ref="mobile-mapContentContent"
- v-show="popupWindow"
- id="mobile-map_content_content"
- >
- <div class="mobile-popup-imgs-heard">
- <img :src="url" alt="" />
- <el-image
- style="width: 100px; height: 100px"
- :src="url"
- id="mobileBigImgs"
- v-show="false"
- :preview-src-list="srcList"
- >
- </el-image>
- 哈工大A10公寫总建筑面积30740平方米,于2001年采用货款方式高标准建造并投入使用。整个楼体共分十层,地上九层为公寫主体。公寓外观呈工字型,公寓内房司以A、B、C三个区域別分,与哈工大雄厚的工科底蕴遥相呼应,是哈尔滨工业大学学生公寫的标志性建筑
- </div>
- <div class="mobile-popup-control">
- <el-link icon="el-icon-picture-outline-round" @click="mobileOpenImgs"
- >图集</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>
- </div>
- </div>
+ <mobileWindow></mobileWindow>
+ <!-- 地图图标弹窗↑ -->
+ <!-- 控制↓ -->
<mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
<mobileCortrol ref="mobileCortrol"></mobileCortrol>
<mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
<mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
+ <!-- 控制↑ -->
+ <!-- 控制大弹窗的弹窗 -->
+ <mobilePopupOurAfter v-if="mBigPopupAfter"></mobilePopupOurAfter>
+ <!-- 大弹窗 -->
+ <mobilePopupOur :style="[bigPopup]" v-if="mBigPopup"></mobilePopupOur>
+ <!-- 测试-跳转位置 -->
+ <mobileGoTo></mobileGoTo>
+ <!-- 实景窗口 -->
+ <mobilePanorama></mobilePanorama>
</div>
</template>
<script>
import { mapGetters } from "vuex";
-
export default {
name: "mobilemapBox",
data() {
return {
- url: "/img/job/one.jpg",
- srcList: [
- "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
- "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
- ],
- popupFlag: false,
- popupWindow: false,
+ DC: "",
+ bigPopup: {
+ width: 0,
+ height: 0,
+ // transition: "all 3s",
+ },
};
},
computed: {
- ...mapGetters(["mviewer"]),
+ ...mapGetters([
+ "mviewer",
+ "MobileWindowsHide",
+ "mBigPopup",
+ "mBigPopupAfter",
+ "iconHide",
+ "popupsDom",
+ ]),
+ },
+ 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;
+ this.DC = DC;
var that = this;
@@ -132,6 +135,7 @@
});
that.$refs.mobileLeftNav.initialize(viewer);
that.$store.commit("MSET_VIEWER", viewer);
+ that.$store.commit("MSET_DC", DC);
const popup = viewer.popup;
popup.hide();
@@ -144,7 +148,7 @@
name: "影像",
});
- // // eslint-disable-next-line camelcase
+ // eslint-disable-next-line camelcase
// const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
// url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer",
// });
@@ -170,6 +174,20 @@
// iconUrl: "examples/images/icon/ter.png",
// name: "地形",
// });
+
+ // 地图移动事件
+ viewer.on(DC.MouseEventType.MOUSE_MOVE, (e) => {
+ if (!that.iconHide) {
+ that.$store.commit("MSET_ICONHIDE", true);
+ }
+ that.$store.dispatch("closeMobileWindowsDom"); //关闭弹窗
+ // if (!that.MobileWindowsHide && that.popupsDom) {
+ // that.popupsDom.closeOur();
+ // that.$store.commit("MSET_MOBILEWINDOWSHIDE", true);
+ // }
+ // nowPosition = [e.wgs84Position.lng, e.wgs84Position.lat];
+ // console.log(nowPosition);
+ });
const layer = new DC.TilesetLayer("layer");
viewer.addLayer(layer);
@@ -198,30 +216,16 @@
tileset.on(DC.MouseEventType.CLICK, (e) => {
// that.popupFlag = true
- that.popupWindow = true;
+ // that.popupWindow = true;
viewer.scene.globe.depthTestAgainstTerrain = false;
// console.log(document.getElementById("mobile-map_content_content"));
- console.log(e.position);
+ console.log(e);
// 定制化窗体
- var divForms = new DC.mobileDivForms(viewer, {
- domId: "mobilePopup",
- title: "成教楼 ",
- className: "mobilePopup",
- content: document.getElementById("mobile-map_content_content"),
- position: [e.position],
- });
- viewer.zoomToPosition(
- new DC.Position(
- e.wgs84Position.lng,
- e.wgs84Position.lat - 0.016,
- 2030,
- 0,
- -45
- )
- );
+ that.openPopupS(e.position, [e.wgs84Position.lng, e.wgs84Position.lat]);
+
// popup.setWrapper('<div></div>')
// popup.showAt(e.position, document.getElementById('modelPopup'))
@@ -232,7 +236,7 @@
// )
viewer.compass.enable = false;
- viewer.zoomController.enable = false;
+ viewer.zoomController.enable = true;
viewer.locationBar.enable = false;
viewer.distanceLegend.enable = true;
}
@@ -240,9 +244,16 @@
DC.ready(initViewer);
},
methods: {
- mobileOpenImgs() {
- let imgsDom = document.getElementById("mobileBigImgs");
- imgsDom.click();
+ openPopupS(position, lntLat, query) {
+ let that = this;
+ // 定制化窗体
+ let d = {
+ position,
+ lntLat,
+ query: { ...(query || {}), position, lntLat },
+ useJWD: true, //仅使用经纬度
+ };
+ that.$store.dispatch("setMobileWindows", d);
},
},
};
diff --git a/src/mobileDivForms/mobileDivForms.js b/src/mobileDivForms/mobileDivForms.js
index e26010c..aacdde5 100644
--- a/src/mobileDivForms/mobileDivForms.js
+++ b/src/mobileDivForms/mobileDivForms.js
@@ -20,12 +20,13 @@
*
*/
constructor(viewer, popup) {
- this._viewer = viewer
- this._popup = popup
- this._position = popup.position
- this._title = popup.title
- this._content = popup.content
- this.appendPopup()
+ this._viewer = viewer;
+ this._popup = popup;
+ this._position = popup.position;
+ this._title = popup.title;
+ this._content = popup.content;
+ this.appendPopup();
+ this.isOpen = true;
}
get viewer() {
@@ -58,6 +59,9 @@
// 创建元素并追加
createVideoWindowAll(id, className, position) {
+ let dom = document.getElementById('mobile-map_popup_content');
+ dom.style.display = 'block';
+
var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')
if (childs.length > 0) {
@@ -70,53 +74,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)
@@ -127,6 +87,9 @@
$('#mobile-map_popup_content').append(el)
this._viewer.scene.postRender.addEventListener(function () {
+ if (!self.isOpen) {
+ return;
+ }
const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
self._viewer.scene,
position
@@ -137,6 +100,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;
@@ -149,6 +115,18 @@
transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
`
}
+ closeOur() {
+ this.isOpen = false;
+ let dom = document.getElementById('mobile-map_popup_content');
+ dom.style.display = 'none';
+ // var childs = document.getElementById('mobile-map_popup_content').getElementsByTagName('div')
+
+ // if (childs.length > 0) {
+ // for (var i = 0; i < childs.length; i++) {
+ // document.getElementById('mobile-map_popup_content').removeChild(childs[i])
+ // }
+ // }
+ }
}
export default mobileDivForms
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 ef4d138..bae0997 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,6 +1,20 @@
-const getters = {
- viewer: state => state.viewer.viewer,
+// 手机端
+const mobile = {
mviewer: state => state.mobile.mviewer,
+ mBigPopup: state => state.mobile.mBigPopup,
+ mBigPopupAfter: state => state.mobile.mBigPopupAfter,
+ iconHide: state => state.mobile.iconHide,
+ DC: state => state.mobile.DC,
+ MobileWindowsHide: state => state.mobile.MobileWindowsHide,
+ MobileWindowChangeData: state => state.mobile.MobileWindowChangeData,
+ popupsDom: state => state.mobile.popupsDom,
+ query: state => state.mobile.query,
+ openmobileGoTo: state => state.mobile.openmobileGoTo,
+ openmobilePanorama: state => state.mobile.openmobilePanorama
+}
+const getters = {
+ ...mobile,
+ viewer: state => state.viewer.viewer,
popupBgUrl: state => state.popupParams.popupBgUrl,
pupupQRUrl: state => state.popupParams.pupupQRUrl,
pointPosition: state => state.popupParams.pointPosition,
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 095fce9..9842189 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -1,14 +1,97 @@
+import $store from '../index'
const mobile = {
state: {
- mviewer: null
+ mviewer: null,//地图实体类
+ mBigPopup: false,//全屏弹窗
+ mBigPopupAfter: false,////全屏弹窗之前的弹窗
+ ips: '',//获取的ip
+ iconHide: false,//右侧伸缩状态
+ DC: '',//DC全局保存
+ MobileWindowsHide: true,//改变点击窗口的显示状态
+ MobileWindowChangeData: false,//改变点击窗口的数据
+ popupsDom: '',//mobileDivForms的实体类
+ query: {},//传输数据
+ openmobileGoTo: false,//测试
+ openmobilePanorama: false,//实景显影
},
mutations: {
MSET_VIEWER(state, viewer) {
state.mviewer = viewer
+ },
+ MSET_BIGPOPUP(state, viewer) {
+ state.mBigPopup = viewer;
+ $store.dispatch("closeMobileWindowsDom"); //关闭弹窗
+ },
+ MSET_BIGPOPUPAFTER(state, viewer) {
+ state.mBigPopupAfter = viewer;
+ $store.dispatch("closeMobileWindowsDom"); //关闭弹窗
+ },
+ MSET_ICONHIDE(state, viewer) {
+ state.iconHide = viewer
+ },
+ MSET_DC(state, viewer) {
+ state.DC = viewer
+ },
+ MSET_MOBILEWINDOWSHIDE(state, viewer) {
+ state.MobileWindowChangeData = !state.MobileWindowChangeData;
+ state.MobileWindowsHide = viewer
+ },
+ MSET_POPUPDOM(state, viewer) {
+ state.popupsDom = viewer
+ },
+ MSET_QUERY(state, viewer) {
+ state.query = viewer
+ },
+ MSET_OPENMOBILEGOTO(state, viewer) {
+ state.openmobileGoTo = viewer
+ },
+ MSET_OPENMOBILEPANORAMA(state, viewer) {
+ state.openmobilePanorama = viewer
}
},
actions: {
-
+ setMobileWindows({ state, commit, }, data) {
+ if (data.useJWD) {
+ var ellipsoid = state.mviewer.scene.globe.ellipsoid;
+ var cartographic = state.DC.Namespace.Cesium.Cartographic.fromDegrees(
+ data.lntLat[0],
+ data.lntLat[1] - 0.00006,
+ "90.648862227"
+ );
+ data.position = ellipsoid.cartographicToCartesian(cartographic);
+ }
+ // 传递响应数据
+ commit("MSET_QUERY", data);
+ // 定制化窗体
+ let popupsDom = new state.DC.mobileDivForms(state.mviewer, {
+ domId: "mobilePopup",
+ title: data.query.name || "成教楼 ",
+ className: "mobilePopup",
+ content: document.getElementById("mobile-map_content_content"),
+ position: [data.position],
+ });
+ commit("MSET_MOBILEWINDOWSHIDE", false)
+ state.mviewer.zoomToPosition(
+ new state.DC.Position(data.lntLat[0], data.lntLat[1] - 0.012, 1530, 0, -45)
+ );
+ commit("MSET_POPUPDOM", popupsDom)
+ },
+ closeMobileWindowsDom({ state, commit }) {
+ if (!state.MobileWindowsHide && state.popupsDom) {
+ state.popupsDom.closeOur();
+ commit("MSET_MOBILEWINDOWSHIDE", true);
+ }
+ },
+ CHANGETOC3({ state, commit }, data) {// //转换经纬度坐标 成世界坐标cartesian3
+ var ellipsoid = state.mviewer.scene.globe.ellipsoid;
+ var cartographic = state.DC.Namespace.Cesium.Cartographic.fromDegrees(
+ data.lnt,
+ data.lat - 0.0004,
+ data.alt || "90.648862227"
+ );
+ var position = ellipsoid.cartographicToCartesian(cartographic);
+ return position;
+ }
}
}
diff --git a/src/store/modules/popupParams.js b/src/store/modules/popupParams.js
index b77ed47..997c1e2 100644
--- a/src/store/modules/popupParams.js
+++ b/src/store/modules/popupParams.js
@@ -13,10 +13,10 @@
panoramaPopup: false
},
mutations: {
- SET_POPUPBGURL (state, popupBgUrl) {
+ SET_POPUPBGURL(state, popupBgUrl) {
state.popupBgUrl = popupBgUrl
},
- SET_POPUPQRURL (state, pupupQRUrl) {
+ SET_POPUPQRURL(state, pupupQRUrl) {
state.pupupQRUrl = pupupQRUrl
},
SET_TERMINUS (state, terminus) {
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index 8371b01..195c75b 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -1,7 +1,8 @@
#mobile-map_popup_content {
+ //弹窗
width: 100%;
position: fixed;
- z-index: 99;
+ z-index: 999;
left: -1000px;
box-sizing: border-box;
#mobilePopup {
@@ -61,25 +62,98 @@
}
}
-// 比例尺
-#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: 37px !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: 5px;
+ 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;
+ }
+ }
+ }
+
+ //滚动条
+ /*定义滑块 内阴影+圆角*/
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ width: 2px !important;
+ /*滚动条的圆角*/
+ -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
+ background-color: #f1f1f1;
+ /*滚动条的背景颜色*/
}
}
--
Gitblit v1.9.3