From dcbda98765ffa9e8066330502379fafbf2a750b7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 14 Dec 2021 16:21:34 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/school-web
---
src/router/page/index.js | 343 +++++++------
src/mobileviews/home/index.vue | 29 +
src/mobileLayout/index.vue | 13
src/components/mobileCortrolButtom/index.vue | 53 ++
src/store/index.js | 4
src/components/mobileLeftNav/index.vue | 351 ++++++++++++++
src/store/modules/mobile.js | 16
src/components/mobileCortrol/index.vue | 50 ++
src/styles/common.scss | 41 -
src/components/mobilemap/index.vue | 259 ++++++++++
src/main.js | 4
src/styles/mobile/popup.scss | 68 ++
src/store/getters.js | 3
src/store/modules/viewer.js | 1
src/components/mobileCortrolSearch/index.vue | 66 ++
src/mobileDivForms/mobileDivForms.js | 154 ++++++
16 files changed, 1,252 insertions(+), 203 deletions(-)
diff --git a/src/components/mobileCortrol/index.vue b/src/components/mobileCortrol/index.vue
new file mode 100644
index 0000000..a189ca4
--- /dev/null
+++ b/src/components/mobileCortrol/index.vue
@@ -0,0 +1,50 @@
+<template>
+ <div class="m-left-control">
+ <div class="m-l-inbut">+</div>
+ <div class="m-l-inbut">-</div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "mobileCortrol",
+ computed: {},
+ data() {
+ return {
+ viewer: null,
+ DC: null,
+ };
+ },
+ created() {
+ this.DC = global.DC;
+ },
+ mounted() {},
+ methods: {
+ initialize(viewer) {
+ viewer.scene.globe.depthTestAgainstTerrain = false;
+ this.viewer = viewer;
+ },
+ },
+};
+</script>
+
+<style scoped lang='scss'>
+.m-left-control {
+ position: fixed;
+ left: 20px;
+ top: 20px;
+ z-index: 200;
+ .m-l-inbut {
+ width: 32px;
+ height: 32px;
+ background-color: #c9302c;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 22px;
+ margin-bottom: 12px;
+ border-radius: 5px;
+ }
+}
+</style>
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
new file mode 100644
index 0000000..ea17825
--- /dev/null
+++ b/src/components/mobileCortrolButtom/index.vue
@@ -0,0 +1,53 @@
+<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>
+</template>
+
+<script>
+export default {
+ name: "mobileCortrolButtom",
+ computed: {},
+ data() {
+ return {
+ viewer: null,
+ DC: null,
+ };
+ },
+ created() {
+ this.DC = global.DC;
+ },
+ mounted() {},
+ methods: {
+ initialize(viewer) {
+ viewer.scene.globe.depthTestAgainstTerrain = false;
+ this.viewer = viewer;
+ },
+ },
+};
+</script>
+
+<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;
+ }
+}
+</style>
diff --git a/src/components/mobileCortrolSearch/index.vue b/src/components/mobileCortrolSearch/index.vue
new file mode 100644
index 0000000..3926498
--- /dev/null
+++ b/src/components/mobileCortrolSearch/index.vue
@@ -0,0 +1,66 @@
+<template>
+ <div class="m-left-mobileCortrolSearch">
+ <div class="m-left-SearchMain">
+ <el-input placeholder="请输入内容" v-model="input" clearable size="small"
+ ><el-button
+ slot="append"
+ class="iconSearch"
+ icon="el-icon-search"
+ ></el-button>
+ </el-input>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "mobileCortrolSearch",
+ computed: {},
+ data() {
+ return {
+ viewer: null,
+ DC: null,
+ };
+ },
+ created() {
+ this.DC = global.DC;
+ },
+ mounted() {},
+ methods: {
+ initialize(viewer) {
+ viewer.scene.globe.depthTestAgainstTerrain = false;
+ this.viewer = viewer;
+ },
+ },
+};
+</script>
+
+<style scoped lang='scss'>
+.m-left-mobileCortrolSearch {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ // left: 20px;
+ z-index: 200;
+ .m-left-SearchMain {
+ margin: 0 auto;
+ width: 60%;
+ position: relative;
+ z-index: 1;
+ top: 20px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .iconSearch {
+ width: 30px;
+ height: 30px;
+ padding-top: 0;
+ padding-bottom: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 24px;
+ }
+ }
+}
+</style>
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
new file mode 100644
index 0000000..1247850
--- /dev/null
+++ b/src/components/mobileLeftNav/index.vue
@@ -0,0 +1,351 @@
+<template>
+ <div class="m-left-nav" :style="[navStyle]">
+ <!-- :style="[coutrolStyle]" -->
+ <div class="m-left-coutrol" @click="iconHide = !iconHide">
+ <i :class="icons"></i>
+ </div>
+ <ul>
+ <li
+ v-for="(item, index) in leftNavData"
+ :key="index"
+ @click="leftNavClick(item)"
+ >
+ <img :style="[imgStyle]" :src="item.img" alt="" />
+ <span>{{ item.label }}</span>
+ </li>
+ </ul>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "mobileLeftNav",
+ computed: {},
+ watch: {
+ iconHide() {
+ if (this.iconHide) {
+ this.icons = "el-icon-d-arrow-left";
+ this.navStyle.right = "-51px";
+ this.imgStyle.right = "6px";
+ } else {
+ this.icons = "el-icon-d-arrow-right";
+ this.navStyle.right = "0px";
+ this.imgStyle.right = "0";
+ }
+ },
+ },
+ data() {
+ return {
+ icons: "el-icon-d-arrow-right",
+ iconHide: false,
+ navStyle: {
+ right: "0px",
+ },
+ imgStyle: {
+ right: "0",
+ },
+ // coutrolStyle: {
+ // position: " absolute",
+ // left: "-26px",
+ // top: "114px",
+ // right: "auto",
+ // width: "25px",
+ // height: "60px",
+ // backgroundColor: "#fff",
+ // borderRadius: "10px",
+ // display: "flex",
+ // alignItems: "center",
+ // justifyContent: "center",
+ // transition: "left 3s",
+ // },
+ leftNavData: [
+ {
+ flag: false,
+ label: "标签",
+ img: "/img/leftnav/tag.png",
+ normal: "/img/leftnav/tag.png",
+ checked: "/img/leftnav/tag-checked.png",
+ layer: "tagLayer",
+ },
+ {
+ flag: false,
+ label: "道路",
+ img: "/img/leftnav/way.png",
+ normal: "/img/leftnav/way.png",
+ checked: "/img/leftnav/way-checked.png",
+ layer: "wayLayer",
+ },
+ {
+ flag: false,
+ label: "实景",
+ img: "/img/leftnav/scene.png",
+ normal: "/img/leftnav/scene.png",
+ checked: "/img/leftnav/scene-checked.png",
+ layer: "sceneLayer",
+ },
+ {
+ flag: false,
+ label: "活动",
+ img: "/img/leftnav/activity.png",
+ normal: "/img/leftnav/activity.png",
+ checked: "/img/leftnav/activity-checked.png",
+ layer: "activityLayer",
+ },
+ {
+ flag: false,
+ label: "AED",
+ img: "/img/leftnav/aed.png",
+ normal: "/img/leftnav/aed.png",
+ checked: "/img/leftnav/aed-checked.png",
+ layer: "aedLayer",
+ },
+ {
+ flag: false,
+ label: "停车",
+ img: "/img/leftnav/park.png",
+ normal: "/img/leftnav/park.png",
+ checked: "/img/leftnav/park-checked.png",
+ layer: "parkLayer",
+ },
+ {
+ flag: false,
+ label: "出入",
+ img: "/img/leftnav/come.png",
+ normal: "/img/leftnav/come.png",
+ checked: "/img/leftnav/come-checked.png",
+ layer: "comeLayer",
+ },
+ ],
+ viewer: null,
+ DC: null,
+ tagLayer: null,
+ wayLayer: null,
+ sceneLayer: null,
+ activityLayer: null,
+ aedLayer: null,
+ parkLayer: null,
+ comeLayer: null,
+ };
+ },
+ created() {
+ this.DC = global.DC;
+ },
+ mounted() {},
+ methods: {
+ generatePosition(num) {
+ const list = [];
+ for (let i = 0; i < num; i++) {
+ const lng = 121.0493 + Math.random() * 0.5;
+ const lat = 31.2583 + Math.random() * 0.5;
+ list.push(new this.DC.Position(lng, lat, 0));
+ }
+ return list;
+ },
+ leftNavClick(item) {
+ item.flag = !item.flag;
+ if (item.flag == true) {
+ item.img = item.checked;
+ this[item.layer].show = true;
+ } else {
+ item.img = item.normal;
+ this[item.layer].show = false;
+ }
+ },
+ initialize(viewer) {
+ 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.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);
+
+ const positions1 = this.generatePosition(50);
+ positions1.forEach((item, index) => {
+ const divIcon = new this.DC.DivIcon(
+ item,
+ `
+ <div class="tag-entitys-box">
+ <div class="tag-content">
+ 南门口
+ </div>
+ <div class="tag-angle-content">
+ <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ </div>
+ </div>
+ `
+ );
+ this.tagLayer.addOverlay(divIcon);
+ });
+
+ const positions2 = this.generatePosition(50);
+ positions2.forEach((item, index) => {
+ const divIcon = new this.DC.DivIcon(
+ item,
+ `
+ <div class="way-entitys-box">
+ <div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
+ 工建街
+ </div>
+ <div class="way-sign-box">
+ <img src="https://map.hit.edu.cn/images/roadsign3.png">
+ </div>
+ </div>
+ `
+ );
+ this.wayLayer.addOverlay(divIcon);
+ });
+
+ const positions3 = this.generatePosition(50);
+ positions3.forEach((item) => {
+ const billboard = new this.DC.Billboard(
+ item,
+ "/img/leftnav/map-panorama.png"
+ );
+ billboard.size = [16, 16];
+ this.sceneLayer.addOverlay(billboard);
+ });
+
+ const positions4 = this.generatePosition(10);
+ positions4.forEach((item, index) => {
+ const label = new this.DC.Label(item, "建筑AED");
+ label.setStyle({
+ fillColor: this.DC.Color.ORANGERED,
+ font: "10px sans-serif",
+ pixelOffset: { x: 0, y: -16 },
+ });
+ this.aedLayer.addOverlay(label);
+
+ const billboard = new this.DC.Billboard(
+ item,
+ "/img/leftnav/map-aed.png"
+ );
+ billboard.size = [16, 16];
+
+ this.aedLayer.addOverlay(billboard);
+ });
+
+ const positions5 = this.generatePosition(120);
+ positions5.forEach((item, index) => {
+ const divIcon = new this.DC.DivIcon(
+ item,
+ `
+ <div class="park-entitys-box">
+ <div class="park-title" alt="校外街路侧停车场">
+ </div>
+ <div class="park-sign-box">
+ <div>
+ <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="校外街路侧停车场" title="校外街路侧停车场">
+ </div>
+ <div>
+ <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
+ </div>
+ </div>
+ </div>
+ `
+ );
+ this.parkLayer.addOverlay(divIcon);
+ });
+
+ const positions6 = this.generatePosition(10);
+ positions6.forEach((item, index) => {
+ const label = new this.DC.Label(item, "123");
+ label.setStyle({
+ fillColor: this.DC.Color.PURPLE,
+ outlineColor: this.DC.Color.WHITE, // 边框颜色
+ outlineWidth: 2, // 边框大小，
+ font: "10px sans-serif",
+ pixelOffset: { x: 0, y: -16 },
+ });
+ this.comeLayer.addOverlay(label);
+
+ const billboard = new this.DC.Billboard(
+ item,
+ "/img/leftnav/map-activity.png"
+ );
+ billboard.size = [16, 16];
+
+ this.comeLayer.addOverlay(billboard);
+ });
+
+ this.tagLayer.show = false;
+ this.wayLayer.show = false;
+ this.sceneLayer.show = false;
+ this.aedLayer.show = false;
+ this.parkLayer.show = false;
+ this.comeLayer.show = false;
+ },
+ },
+};
+</script>
+
+<style scoped lang='scss'>
+.m-left-nav {
+ position: fixed;
+ bottom: 30px;
+ right: 0px;
+ z-index: 200;
+ background-color: #fff;
+ border-radius: 17px 0 0 17px;
+ transition: all 0.5s;
+ .m-left-coutrol {
+ position: absolute;
+ left: -24px;
+ top: 96px;
+ width: 25px;
+ height: 60px;
+ background-color: #fff;
+ border-radius: 17px 0 0 17px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ ul {
+ position: relative;
+ top: 3px;
+ }
+ li {
+ margin-bottom: 6px;
+ font-weight: 400;
+ display: block;
+ width: 80px;
+ height: 30px;
+ line-height: 30px;
+ background-color: #fff;
+ border-radius: 15px;
+ text-align: center;
+ font-size: 0;
+ cursor: pointer;
+
+ img {
+ position: relative;
+ transition: all 0.5s;
+ width: 24px;
+ height: 24px;
+ vertical-align: middle;
+ margin-right: 10px;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: -o-crisp-edges;
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: crisp-edges;
+ -ms-interpolation-mode: nearest-neighbor;
+ }
+
+ span {
+ display: inline-block;
+ vertical-align: middle;
+ font-size: 14px;
+ color: #2f2f2f;
+ }
+ }
+}
+</style>
diff --git a/src/components/mobilemap/index.vue b/src/components/mobilemap/index.vue
new file mode 100644
index 0000000..637aae8
--- /dev/null
+++ b/src/components/mobilemap/index.vue
@@ -0,0 +1,259 @@
+/* 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>
+ <mobileLeftNav ref="mobileLeftNav"></mobileLeftNav>
+ <mobileCortrol ref="mobileCortrol"></mobileCortrol>
+ <mobileCortrolButtom ref="mobileCortrolButtom"></mobileCortrolButtom>
+ <mobileCortrolSearch ref="mobileCortrolSearch"></mobileCortrolSearch>
+ </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,
+ };
+ },
+ computed: {
+ ...mapGetters(["mviewer"]),
+ },
+ mounted() {
+ var DC = global.DC;
+
+ var that = this;
+
+ let viewer;
+
+ function distanceSurface() {
+ viewer.measure.distanceSurface();
+ }
+
+ function calcArea() {
+ viewer.measure.area();
+ }
+
+ function areaSurface() {
+ viewer.measure.areaSurface();
+ }
+
+ function calcAngle() {
+ viewer.measure.angle();
+ }
+
+ function calcModelAngle() {
+ viewer.measure.angle({
+ clampToModel: true,
+ });
+ }
+
+ function calcHeight() {
+ viewer.measure.height();
+ }
+
+ function calcModelHeight() {
+ viewer.measure.height({
+ clampToModel: true,
+ });
+ }
+
+ function calcHeading() {
+ viewer.measure.heading();
+ }
+
+ function areaHeight() {
+ viewer.measure.areaHeight();
+ }
+
+ function calcTriangleHeight() {
+ viewer.measure.triangleHeight();
+ }
+
+ function calcModelTriangleHeight() {
+ viewer.measure.triangleHeight({
+ clampToModel: true,
+ });
+ }
+
+ function deactivate() {
+ viewer.measure.deactivate();
+ }
+
+ function gotoModel() {
+ viewer.flyTo(tileset);
+ }
+
+ function initViewer() {
+ viewer = new DC.Viewer("mobile-viewer-container", {
+ contextOptions: {
+ webgl: {
+ stencil: true,
+ preserveDrawingBuffer: true,
+ },
+ },
+ });
+ that.$refs.mobileLeftNav.initialize(viewer);
+
+ const popup = viewer.popup;
+
+ popup.hide();
+
+ that.$store.commit("MSET_VIEWER", viewer);
+
+ const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+ });
+ viewer.addBaseLayer(baselayer, {
+ iconUrl: "examples/images/icon/img.png",
+ name: "影像",
+ });
+
+ // // eslint-disable-next-line camelcase
+ // const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ // url: "http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer",
+ // });
+ // viewer.addBaseLayer(baselayer_shaded, {
+ // iconUrl: "examples/images/icon/elec.png",
+ // name: "电子",
+ // });
+
+ // // eslint-disable-next-line camelcase
+ // const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ // url: "http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer",
+ // });
+ // viewer.addBaseLayer(baselayer_street, {
+ // iconUrl: "examples/images/icon/ter.png",
+ // name: "地形",
+ // });
+
+ // // eslint-disable-next-line camelcase
+ // const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ // url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer",
+ // });
+ // viewer.addBaseLayer(baselayer_ter, {
+ // iconUrl: "examples/images/icon/ter.png",
+ // name: "地形",
+ // });
+
+ const layer = new DC.TilesetLayer("layer");
+ viewer.addLayer(layer);
+ const tileset = new DC.Tileset(
+ "http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json"
+ );
+ const style = new DC.TilesetStyle();
+ style.color = {
+ conditions: [
+ ["${Height} >= 300", "rgba(45, 0, 75, 0.5)"],
+ ["${Height} >= 200", "rgb(102, 71, 151)"],
+ ["${Height} >= 100", "rgb(170, 162, 204)"],
+ ["${Height} >= 50", "rgb(224, 226, 238)"],
+ ["${Height} >= 25", "rgb(252, 230, 200)"],
+ ["${Height} >= 10", "rgb(248, 176, 87)"],
+ ["${Height} >= 5", "rgb(198, 106, 11)"],
+ ["true", "rgb(127, 59, 8)"],
+ ],
+ };
+
+ viewer.use(new DC.Measure());
+
+ tileset.setStyle(style);
+ layer.addOverlay(tileset);
+ viewer.flyTo(tileset);
+
+ tileset.on(DC.MouseEventType.CLICK, (e) => {
+ // that.popupFlag = true
+ that.popupWindow = true;
+
+ viewer.scene.globe.depthTestAgainstTerrain = false;
+
+ // console.log(document.getElementById("mobile-map_content_content"));
+ console.log(e.position);
+
+ // 定制化窗体
+ 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
+ )
+ );
+ // popup.setWrapper('<div></div>')
+
+ // popup.showAt(e.position, document.getElementById('modelPopup'))
+ });
+
+ // viewer.zoomToPosition(
+ // new DC.Position(105.565571, 31.984708, 15362816, 0, -90)
+ // )
+
+ viewer.compass.enable = false;
+ viewer.zoomController.enable = false;
+ viewer.locationBar.enable = false;
+ viewer.distanceLegend.enable = true;
+ }
+
+ DC.ready(initViewer);
+ },
+ methods: {
+ mobileOpenImgs() {
+ let imgsDom = document.getElementById("mobileBigImgs");
+ imgsDom.click();
+ },
+ },
+};
+</script>
+
+<style lang='scss' scope>
+#mobile-viewer-container {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 2ac8264..ec145f3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -42,6 +42,10 @@
DC.divForms = divForms
+//手机弹窗
+import mobileDivForms from '@/mobileDivForms/mobileDivForms'
+DC.mobileDivForms = mobileDivForms
+
DC.use(DcCore) // 安装DC核心库
// DC.use(DcChart) // 安装DC图标库，使用前确保echarts为全局函数
diff --git a/src/mobileDivForms/mobileDivForms.js b/src/mobileDivForms/mobileDivForms.js
new file mode 100644
index 0000000..e26010c
--- /dev/null
+++ b/src/mobileDivForms/mobileDivForms.js
@@ -0,0 +1,154 @@
+/*
+ * @Descripttion:
+ * @version: 0.01
+ * @Author: Morpheus
+ * @Date: 2020-10-22 11:05:09
+ * @LastEditors: Morpheus
+ * @LastEditTime: 2020-10-22 13:48:22
+ */
+
+import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
+import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包
+
+var $ = window.$
+
+DC.use(DcCore) // 安装DC核心库
+
+class mobileDivForms {
+ /**
+ * @popup 存放 dom 相关
+ *
+ */
+ constructor(viewer, popup) {
+ this._viewer = viewer
+ this._popup = popup
+ this._position = popup.position
+ this._title = popup.title
+ this._content = popup.content
+ this.appendPopup()
+ }
+
+ get viewer() {
+ return this._viewer
+ }
+
+ get title() {
+ return this._title
+ }
+
+ get content() {
+ return this._content
+ }
+
+ get popup() {
+ return this._popup
+ }
+
+ get position() {
+ return this._position
+ }
+
+ appendPopup() {
+ /**
+ * @domId 存放 dom 的id, 多个数组，单个字符串
+ */
+
+ this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
+ }
+
+ // 创建元素并追加
+ createVideoWindowAll(id, className, position) {
+ 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])
+ }
+ }
+
+ var self = this
+
+ 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)
+
+ el.attr('id', id)
+
+ el.addClass(className || '')
+
+ $('#mobile-map_popup_content').append(el)
+
+ this._viewer.scene.postRender.addEventListener(function () {
+ const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+ self._viewer.scene,
+ position
+ )
+
+ self.positionPopUp(windowCoord, id)
+ })
+ }
+
+ positionPopUp(windowCoord, id) {
+ const wx = document.getElementById('app').clientWidth;
+ const x = windowCoord.x - (wx / 100 * 35);
+ const y = windowCoord.y - document.getElementById(id).offsetHeight - 15;
+ // x = windowCoord.x - document.getElementById(id).offsetWidth
+
+ // document.getElementById(id).style.cssText = `
+ document.getElementById(id).style.cssText = `
+ visibility:visible;
+ z-index:98;
+ transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
+ `
+ }
+}
+
+export default mobileDivForms
diff --git a/src/mobileLayout/index.vue b/src/mobileLayout/index.vue
index feea8c6..bf5727f 100644
--- a/src/mobileLayout/index.vue
+++ b/src/mobileLayout/index.vue
@@ -1,14 +1,17 @@
<template>
- <div>
- <mapBox ref="modalForm" />
+ <div id="mobileMaps">
+ <mobilemapBox ref="mobilemapBoxFrom" />
</div>
</template>
<script>
-export default {
-}
+export default {};
</script>
<style>
-
+#mobileMaps {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
</style>
diff --git a/src/mobileviews/home/index.vue b/src/mobileviews/home/index.vue
new file mode 100644
index 0000000..96fabaa
--- /dev/null
+++ b/src/mobileviews/home/index.vue
@@ -0,0 +1,29 @@
+<template>
+ <div class="content-container">
+ <div class="main-content" id="MainContent">
+ <router-view ref="target-name" />
+ </div>
+
+ <div class="map-scene" ref="MapSceneContent">
+ <div>
+ <mobilemapBox ref="mobilemapBoxFrom" />
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "Main",
+ components: {},
+ data() {
+ return {};
+ },
+ created() {},
+ mounted() {},
+ methods: {},
+};
+</script>
+
+<style scoped lang='scss'>
+</style>
diff --git a/src/router/page/index.js b/src/router/page/index.js
index 5e6c479..ae24e98 100644
--- a/src/router/page/index.js
+++ b/src/router/page/index.js
@@ -1,8 +1,8 @@
/*
* @Author: Morpheus
* @Date: 2021-04-30 14:12:09
- * @Last Modified by: Morpheus
- * @Last Modified time: 2021-11-13 16:48:01
+ * @Last Modified by: liu
+ * @Last Modified time: 2021-12-13 14:53:06
*/
import Vue from 'vue'
@@ -26,177 +26,188 @@
title: '系统首页'
},
children: [{
- path: 'mapnav',
- component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
- meta: {
- title: '地图导览'
- }
- },
- {
- path: 'orgnav',
- component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
- meta: {
- title: '校内机构导览'
- },
- children: [{
- path: 'masses',
- component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
- meta: {
- title: '党群机构'
- }
- },
- {
- path: 'ofc',
- component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
- meta: {
- title: '职能部处'
- }
- }, {
- path: 'directly',
- component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
- meta: {
- title: '直属及附属单位'
- }
- },
- {
- path: 'teaching',
- component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
- meta: {
- title: '教学与科研机构'
- }
- }, {
- path: 'rest',
- component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
- meta: {
- title: '其他机构'
- }
- }
- ]
- },
- {
- path: 'arc',
- component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
- meta: {
- title: '校内建筑'
- },
- children: [{
- path: 'edifact',
- component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
- meta: {
- title: '行政办公'
- }
- },
- {
- path: 'teaching',
- component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
- meta: {
- title: '教学科研'
- }
- }, {
- path: 'venue',
- component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
- meta: {
- title: '校内场馆'
- }
- },
- {
- path: 'dorm',
- component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
- meta: {
- title: '学生宿舍'
- }
- }, {
- path: 'culture',
- component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
- meta: {
- title: '文化风景'
- }
- },
- {
- path: 'family',
- component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
- meta: {
- title: '家属住宅'
- }
- }, {
- path: 'rest',
- component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
- meta: {
- title: '其他楼宇'
- }
- }
- ]
- },
- {
- path: 'service',
- component: resolve => require(['../../pcviews/service/index.vue'], resolve),
- meta: {
- title: '生活服务设施'
- }
- },
- {
- path: 'allquery',
- component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
- meta: {
- title: '综合查询'
- }
- },
- {
- path: 'campusnav',
- component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
- meta: {
- title: '校园导览'
- }
- },
- {
- path: 'campusnavi',
- component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
- meta: {
- title: '校园导航'
- }
- },
- {
- path: 'specialmap',
- component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
- meta: {
- title: '专题地图'
- }
- },
- {
- path: 'tool',
- component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
- meta: {
- title: '工具'
- },
- children: [{
- path: 'download',
- component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
- meta: {
- title: '地图下载'
- }
- }, {
- path: 'sign',
- component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
- meta: {
- title: '地图标记'
- }
- },
- {
- path: 'ranging',
- component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
- meta: {
- title: '地图测距'
- }
- }
- ]
+ path: 'mapnav',
+ component: resolve => require(['../../pcviews/mapnav/index.vue'], resolve),
+ meta: {
+ title: '地图导览'
}
+ },
+ {
+ path: 'orgnav',
+ component: resolve => require(['../../pcviews/orgnav/index.vue'], resolve),
+ meta: {
+ title: '校内机构导览'
+ },
+ children: [{
+ path: 'masses',
+ component: resolve => require(['../../pcviews/orgnav/masses.vue'], resolve),
+ meta: {
+ title: '党群机构'
+ }
+ },
+ {
+ path: 'ofc',
+ component: resolve => require(['../../pcviews/orgnav/ofc.vue'], resolve),
+ meta: {
+ title: '职能部处'
+ }
+ }, {
+ path: 'directly',
+ component: resolve => require(['../../pcviews/orgnav/directly.vue'], resolve),
+ meta: {
+ title: '直属及附属单位'
+ }
+ },
+ {
+ path: 'teaching',
+ component: resolve => require(['../../pcviews/orgnav/teaching.vue'], resolve),
+ meta: {
+ title: '教学与科研机构'
+ }
+ }, {
+ path: 'rest',
+ component: resolve => require(['../../pcviews/orgnav/rest.vue'], resolve),
+ meta: {
+ title: '其他机构'
+ }
+ }
+ ]
+ },
+ {
+ path: 'arc',
+ component: resolve => require(['../../pcviews/arc/index.vue'], resolve),
+ meta: {
+ title: '校内建筑'
+ },
+ children: [{
+ path: 'edifact',
+ component: resolve => require(['../../pcviews/arc/edifact.vue'], resolve),
+ meta: {
+ title: '行政办公'
+ }
+ },
+ {
+ path: 'teaching',
+ component: resolve => require(['../../pcviews/arc/teaching.vue'], resolve),
+ meta: {
+ title: '教学科研'
+ }
+ }, {
+ path: 'venue',
+ component: resolve => require(['../../pcviews/arc/venue.vue'], resolve),
+ meta: {
+ title: '校内场馆'
+ }
+ },
+ {
+ path: 'dorm',
+ component: resolve => require(['../../pcviews/arc/dorm.vue'], resolve),
+ meta: {
+ title: '学生宿舍'
+ }
+ }, {
+ path: 'culture',
+ component: resolve => require(['../../pcviews/arc/culture.vue'], resolve),
+ meta: {
+ title: '文化风景'
+ }
+ },
+ {
+ path: 'family',
+ component: resolve => require(['../../pcviews/arc/family.vue'], resolve),
+ meta: {
+ title: '家属住宅'
+ }
+ }, {
+ path: 'rest',
+ component: resolve => require(['../../pcviews/arc/rest.vue'], resolve),
+ meta: {
+ title: '其他楼宇'
+ }
+ }
+ ]
+ },
+ {
+ path: 'service',
+ component: resolve => require(['../../pcviews/service/index.vue'], resolve),
+ meta: {
+ title: '生活服务设施'
+ }
+ },
+ {
+ path: 'allquery',
+ component: resolve => require(['../../pcviews/allquery/index.vue'], resolve),
+ meta: {
+ title: '综合查询'
+ }
+ },
+ {
+ path: 'campusnav',
+ component: resolve => require(['../../pcviews/campusnav/index.vue'], resolve),
+ meta: {
+ title: '校园导览'
+ }
+ },
+ {
+ path: 'campusnavi',
+ component: resolve => require(['../../pcviews/campusnavi/index.vue'], resolve),
+ meta: {
+ title: '校园导航'
+ }
+ },
+ {
+ path: 'specialmap',
+ component: resolve => require(['../../pcviews/specialmap/index.vue'], resolve),
+ meta: {
+ title: '专题地图'
+ }
+ },
+ {
+ path: 'tool',
+ component: resolve => require(['../../pcviews/tool/index.vue'], resolve),
+ meta: {
+ title: '工具'
+ },
+ children: [{
+ path: 'download',
+ component: resolve => require(['../../pcviews/tool/download.vue'], resolve),
+ meta: {
+ title: '地图下载'
+ }
+ }, {
+ path: 'sign',
+ component: resolve => require(['../../pcviews/tool/sign.vue'], resolve),
+ meta: {
+ title: '地图标记'
+ }
+ },
+ {
+ path: 'ranging',
+ component: resolve => require(['../../pcviews/tool/ranging.vue'], resolve),
+ meta: {
+ title: '地图测距'
+ }
+ }
+ ]
+ }
]
}]
},
// 手机端
{
path: '/mobileLayout',
- component: resolve => require(['../../mobileLayout/index.vue'], resolve)
+ redirect: '/mobileLayout/default',
+ meta: {
+ title: '导航菜单'
+ },
+ component: resolve => require(['../../mobileLayout/index.vue'], resolve),
+ children: [{
+ path: 'default',
+ component: resolve => require(['../../mobileviews/home/index.vue'], resolve),
+ meta: {
+ title: '系统首页'
+ }
+ }]
},
{
path: '/403',
diff --git a/src/store/getters.js b/src/store/getters.js
index e52bdd6..f9941db 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,6 +1,7 @@
const getters = {
viewer: state => state.viewer.viewer,
popupBgUrl: state => state.popupParams.popupBgUrl,
- pupupQRUrl: state => state.popupParams.pupupQRUrl
+ pupupQRUrl: state => state.popupParams.pupupQRUrl,
+ mviewer: state => state.mobile.mviewer
}
export default getters
diff --git a/src/store/index.js b/src/store/index.js
index 6a8816e..1ae2da2 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,6 +3,7 @@
import viewer from './modules/viewer'
import popupParams from './modules/popupParams'
+import mobile from './modules/mobile'
import getters from './getters'
Vue.use(Vuex)
@@ -10,7 +11,8 @@
const store = new Vuex.Store({
modules: {
viewer,
- popupParams
+ popupParams,
+ mobile
},
getters
})
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
new file mode 100644
index 0000000..7933a3c
--- /dev/null
+++ b/src/store/modules/mobile.js
@@ -0,0 +1,16 @@
+const mobile = {
+ state: {
+ mviewer: null
+ },
+ mutations: {
+ MSET_VIEWER(state, viewer) {
+ // console.log(viewer, 456)
+ state.mviewer = viewer
+ }
+ },
+ actions: {
+
+ }
+}
+
+export default mobile
diff --git a/src/store/modules/viewer.js b/src/store/modules/viewer.js
index 7d45c13..dd07d31 100644
--- a/src/store/modules/viewer.js
+++ b/src/store/modules/viewer.js
@@ -4,6 +4,7 @@
},
mutations: {
SET_VIEWER (state, viewer) {
+ // console.log(viewer, 456)
state.viewer = viewer
}
},
diff --git a/src/styles/common.scss b/src/styles/common.scss
index adccd1c..76cc0e7 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,25 +1,25 @@
-@import './index.scss';
+@import "./index.scss";
// 布局
-@import './layout/pc.scss';
-@import './layout/mobile.scss';
+@import "./layout/pc.scss";
+@import "./layout/mobile.scss";
// home
-@import './home/pc.scss';
-@import './home/mobile.scss';
+@import "./home/pc.scss";
+@import "./home/mobile.scss";
// page
-@import './pcpage/index.scss';
+@import "./pcpage/index.scss";
// page
-@import './divforms/divForms.scss';
-@import './divforms/popup.scss';
+@import "./divforms/divForms.scss";
+@import "./divforms/popup.scss";
+// 手机样式
+@import "./mobile/popup.scss";
// 实体样式
-@import './entitys/text-entitys.scss';
-
-
+@import "./entitys/text-entitys.scss";
.custom-icon {
display: inline-block;
@@ -29,65 +29,46 @@
}
.menu-dtdl {
-
background: url(/img/icon/dtdl.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-jg {
-
background: url(/img/icon/jg.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-xyjz {
-
background: url(/img/icon/xyjz.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-shfw {
-
background: url(/img/icon/shfw.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-zhcx {
-
background: url(/img/icon/zhcx.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-xydl {
-
background: url(/img/icon/xydl.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-xydh {
-
background: url(/img/icon/xydh.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-ztdt {
-
background: url(/img/icon/ztdt.png) no-repeat;
background-size: 100% 100%;
-
}
.menu-tool {
-
background: url(/img/icon/tool.png) no-repeat;
background-size: 100% 100%;
-
}
-
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
new file mode 100644
index 0000000..39dc937
--- /dev/null
+++ b/src/styles/mobile/popup.scss
@@ -0,0 +1,68 @@
+#mobile-map_popup_content {
+ width: 100%;
+ position: fixed;
+ z-index: 99;
+ left: -1000px;
+ box-sizing: border-box;
+ #mobilePopup {
+ width: 70%;
+ left: 1000px;
+ position: absolute;
+ height: auto;
+ background-color: #fff;
+ border-radius: 10px;
+ position: relative;
+ &::before {
+ content: "";
+ width: 0px;
+ height: 0px;
+ border: 8px solid #ebebeb;
+ position: absolute;
+ bottom: -8px;
+ left: calc(50% - 8px);
+ transform: rotate(45deg);
+ }
+ .mobiletitle {
+ width: calc(90% - 1px);
+ height: 15px;
+ background-color: #f7f7f7;
+ border-bottom: 1px solid #ebebeb;
+ font-size: 14px;
+ border-radius: 10px 10px 0 0;
+ padding: 8px 14px;
+ }
+ .mobilelabel-content {
+ width: 100%;
+ height: auto;
+ // 内容样式
+ .mobile-popup-imgs-heard {
+ width: 100%;
+ padding: 10px;
+ text-align: justify;
+ letter-spacing: 1px;
+ box-sizing: border-box;
+ img {
+ width: 70px;
+ height: 50px;
+ }
+ }
+ .mobile-popup-control {
+ width: 100%;
+ height: 20px;
+ background-color: #f7f7f7;
+ border-top: 1px solid #ebebeb;
+ padding: 5px 0 8px 0;
+ border-radius: 0 0 10px 10px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+ }
+}
+
+// 比例尺
+.dc-distance-legend {
+ position: relative;
+ left: 30px;
+}
--
Gitblit v1.9.3