From ebc12b5f54c664bfd06e884dc2040223392558f8 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 05 Mar 2022 17:47:19 +0800
Subject: [PATCH] 地图部分修改
---
src/components/map/components/dimension.vue | 1924 +++++++++---------
src/components/map/components/campusBuildingSearch.vue | 840 ++++----
src/components/map/index.vue | 839 +++++---
src/components/map/components/campusBuildingSearch copy.vue | 849 ++++----
src/components/map/components/mapPopup.vue | 1411 +++++++-------
5 files changed, 2,999 insertions(+), 2,864 deletions(-)
diff --git a/src/components/map/components/campusBuildingSearch copy.vue b/src/components/map/components/campusBuildingSearch copy.vue
index 2e2ee60..f29494e 100644
--- a/src/components/map/components/campusBuildingSearch copy.vue
+++ b/src/components/map/components/campusBuildingSearch copy.vue
@@ -1,454 +1,443 @@
<template>
- <div>
- <div class="map-campus-search" id="CampusSearchPanel">
- <el-input
- class="search-input"
- placeholder="校区搜索…"
- v-model="searchInput"
- @input="searchValueChange"
- @focus="shortcutFlag = true"
- >
- </el-input>
- <el-button-group>
- <el-button
- @click="navigationShow"
- class="deblurring"
- icon="el-icon-my-path"
- ></el-button>
- <el-button
- class="deblurring"
- type="primary"
- icon="el-icon-my-search"
- ></el-button>
- </el-button-group>
- <div v-show="searchValShow" class="search-value-box">
- <ul>
- <li
- v-for="(item, index) in searchValList"
- :key="index"
- @click="loadPopup(item)"
- >
- {{ item.name }}
- </li>
- </ul>
- </div>
- <div class="map-campus-shortcut" v-show="shortcutFlag">
- <div class="shortcut-box">
- <ul>
- <li v-for="(item, index) in shortcutList" :key="index">
- <el-button @click="openModelPopup(item)">
- <img :src="item.bgimg" alt="" />
- <span>{{ item.title }}</span>
- </el-button>
- </li>
- </ul>
+ <div>
+ <div class="map-campus-search" id="CampusSearchPanel">
+ <el-input
+ class="search-input"
+ placeholder="校区搜索…"
+ v-model="searchInput"
+ @input="searchValueChange"
+ @focus="shortcutFlag = true"
+ ></el-input>
+ <el-button-group>
+ <el-button @click="navigationShow" class="deblurring" icon="el-icon-my-path"></el-button>
+ <el-button class="deblurring" type="primary" icon="el-icon-my-search"></el-button>
+ </el-button-group>
+ <div v-show="searchValShow" class="search-value-box">
+ <ul>
+ <li
+ v-for="(item, index) in searchValList"
+ :key="index"
+ @click="loadPopup(item)"
+ >{{ item.name }}</li>
+ </ul>
+ </div>
+ <div class="map-campus-shortcut" v-show="shortcutFlag">
+ <div class="shortcut-box">
+ <ul>
+ <li v-for="(item, index) in shortcutList" :key="index">
+ <el-button @click="openModelPopup(item)">
+ <img :src="item.bgimg" alt />
+ <span>{{ item.title }}</span>
+ </el-button>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
</div>
- </div>
</template>
<script>
-import { mapGetters } from "vuex";
+import { mapGetters } from 'vuex'
-import { getList } from "@/api/pc/orgnav/index";
-import { getSearchList } from "@/api/pc/public/search";
+import { getList } from '@/api/pc/orgnav/index'
+import { getSearchList } from '@/api/pc/public/search'
export default {
- name: "campusBuildingSearch",
- data() {
- return {
- DC: null,
- shortcutList: [
- // {
- // bgimg: '/img/search/org.png',
- // title: '党群机构',
- // type: 'orgnav',
- // path: '/pcLayout/default/orgnav/masses',
- // code: 1
- // },
- // {
- // bgimg: '/img/search/ofc.png',
- // title: '职能部处',
- // type: 'orgnav',
- // path: '/pcLayout/default/orgnav/ofc',
- // code: 2
- // },
- // {
- // bgimg: '/img/search/teach.png',
- // title: '教学科研',
- // type: 'arc',
- // path: '/pcLayout/default/arc/teaching',
- // code: 2
- // },
- {
- bgimg: "/img/search/venue.png",
- title: "校区场馆",
- type: "arc",
- path: "/pcLayout/default/arc/venue",
- code: 3,
+ name: 'campusBuildingSearch',
+ data () {
+ return {
+ DC: null,
+ shortcutList: [
+ // {
+ // bgimg: '/img/search/org.png',
+ // title: '党群机构',
+ // type: 'orgnav',
+ // path: '/pcLayout/default/orgnav/masses',
+ // code: 1
+ // },
+ // {
+ // bgimg: '/img/search/ofc.png',
+ // title: '职能部处',
+ // type: 'orgnav',
+ // path: '/pcLayout/default/orgnav/ofc',
+ // code: 2
+ // },
+ // {
+ // bgimg: '/img/search/teach.png',
+ // title: '教学科研',
+ // type: 'arc',
+ // path: '/pcLayout/default/arc/teaching',
+ // code: 2
+ // },
+ {
+ bgimg: '/img/search/venue.png',
+ title: '校区场馆',
+ type: 'arc',
+ path: '/pcLayout/default/arc/venue',
+ code: 3
+ }
+ // {
+ // bgimg: '/img/search/dorm.png',
+ // title: '校区宿舍',
+ // type: 'arc',
+ // path: '/pcLayout/default/arc/dorm',
+ // code: 4
+ // },
+ // {
+ // bgimg: '/img/search/scenery.png',
+ // title: '文化风景',
+ // type: 'arc',
+ // path: '/pcLayout/default/arc/culture',
+ // code: 5
+ // }
+ ],
+ shortcutFlag: false,
+ searchInput: '',
+ searchValShow: false,
+ searchValList: []
+ }
+ },
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ // 校区内导航的显示关闭
+ 'campusNavFlag',
+ 'orgNavBarFlag',
+ 'arcNavBarFlag'
+ ])
+ },
+ created () {
+ this.DC = global.DC
+ },
+ methods: {
+ searchValueChange () {
+ if (this.searchInput == '') {
+ this.searchValList = []
+ this.searchValShow = false
+ return
+ }
+ getSearchList({ mechanismName: this.searchInput }).then((res) => {
+ if (res.data.data.length > 0) {
+ this.searchValList = res.data.data
+ this.searchValShow = true
+ }
+ })
},
- // {
- // bgimg: '/img/search/dorm.png',
- // title: '校区宿舍',
- // type: 'arc',
- // path: '/pcLayout/default/arc/dorm',
- // code: 4
- // },
- // {
- // bgimg: '/img/search/scenery.png',
- // title: '文化风景',
- // type: 'arc',
- // path: '/pcLayout/default/arc/culture',
- // code: 5
- // }
- ],
- shortcutFlag: false,
- searchInput: "",
- searchValShow: false,
- searchValList: [],
- };
- },
- computed: {
- ...mapGetters([
- "viewer",
- // 校区内导航的显示关闭
- "campusNavFlag",
- "orgNavBarFlag",
- "arcNavBarFlag",
- ]),
- },
- created() {
- this.DC = global.DC;
- },
- methods: {
- searchValueChange() {
- if (this.searchInput == "") {
- this.searchValList = [];
- this.searchValShow = false;
- return;
- }
- getSearchList({ mechanismName: this.searchInput }).then((res) => {
- if (res.data.data.length > 0) {
- this.searchValList = res.data.data;
- this.searchValShow = true;
+
+ navigationShow () {
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
+ },
+
+ openModelPopup (param) {
+ var list = []
+ if (this.$route.path.indexOf('/service') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ }
+
+ if (param.type == 'orgnav') {
+ var path = this.$route.path
+ if (path.indexOf('/arc') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ this.$store.commit('SET_ARCNAVBARTITLE', '')
+ this.$store.commit('SET_ARCNAVBARCODE', '')
+ this.$store.commit('SET_ARCNAVBARFLAG', false)
+ }
+
+ if (this.arcNavBarFlag == true) {
+ this.$store.commit('SET_ARCNAVBARTITLE', '')
+ this.$store.commit('SET_ARCNAVBARCODE', '')
+ this.$store.commit('SET_ARCNAVBARFLAG', false)
+ }
+
+ this.$store.commit('SET_ORGNAVBARTITLE', param.title)
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+
+ this.$store.commit('SET_ORGNAVBARFLAG', true)
+
+ getList({ type: param.code }).then((res) => {
+ res.data.data.records.forEach((item) => {
+ list.push({
+ navTitle: item.mechanismname,
+ icon: '/img/navicon/tag.png',
+ longitude: item.jd,
+ latitude: item.wd,
+ alt: item.gd,
+ heading: item.heading,
+ pitch: item.pitch,
+ roll: item.roll,
+ bgImg: item.tpurl,
+ QRImg: item.codeurl,
+ address: item.address,
+ telephone: item.telephone,
+ introduce: item.introduce,
+ videourl: item.videourl
+ })
+ })
+
+ this.$store.commit('SET_ORGNAVBARLIST', list)
+ })
+ } else if (param.type == 'arc') {
+ if (this.$route.path.indexOf('/orgnav') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ this.$store.commit('SET_ORGNAVBARTITLE', '')
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+ this.$store.commit('SET_ORGNAVBARFLAG', false)
+ }
+
+ if (this.orgNavBarFlag == true) {
+ this.$store.commit('SET_ORGNAVBARTITLE', '')
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+ this.$store.commit('SET_ORGNAVBARFLAG', false)
+ }
+
+ this.$store.commit('SET_ARCNAVBARTITLE', param.title)
+ this.$store.commit('SET_ARCNAVBARCODE', param.code)
+ this.$store.commit('SET_ARCNAVBARFLAG', true)
+ }
+ },
+
+ shortcutShow (event) {
+ var sp = document.getElementById('CampusSearchPanel')
+
+ if (sp) {
+ if (!sp.contains(event.target)) {
+ // 这句是说如果我们点击到了id为myPanel以外的区域
+ this.shortcutFlag = false
+ }
+ }
+ },
+
+ loadPopup (param) {
+ var that = this
+
+ that.searchInput = ''
+ that.searchValList = []
+ that.searchValShow = false
+
+ this.$store.commit('CLEAR_ALL', null)
+
+ var result = param.list
+
+ var imgArr = result.tpurl.split(',')
+
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', result.codeurl)
+ this.$store.commit('SET_POINTPOSITION', [
+ Number(result.jd),
+ Number(result.wd),
+ Number(result.gd),
+ Number(result.heading),
+ Number(result.pitch),
+ Number(result.roll)
+ ])
+ this.$store.commit('SET_STATENAME', result.mechanismname)
+ this.$store.commit('SET_SITENAME', result.address)
+ this.$store.commit('SET_TELEPHONE', result.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', result.introduce)
+ if (result.panoramaurl != '') {
+ this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
+ }
+ if (result.videourl && result.videourl != '') {
+ this.$store.commit('SET_MONITORURL', result.videourl)
+ }
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+ if (param.jx != undefined && param.jx != '') {
+ var tabOne = param.jx.split(',')
+ this.$store.commit('SET_TEACHLIST', tabOne)
+ } else {
+ this.$store.commit('SET_TEACHLIST', [])
+ }
+
+ if (param.sh != undefined && param.sh != '') {
+ var tabTwo = param.sh.split(',')
+ this.$store.commit('SET_LIVELIST', tabTwo)
+ } else {
+ this.$store.commit('SET_LIVELIST', [])
+ }
+
+ this.newPopup(result)
+ this.viewer.flyToPosition(
+ new this.DC.Position(
+ Number(result.jd),
+ Number(result.wd),
+ 300,
+ Number(result.heading),
+ Number(result.pitch),
+ Number(result.roll)
+ ),
+ () => { },
+ 3
+ )
+ },
+
+ newPopup (item) {
+ const position = this.DC.Transform.transformWGS84ToCartesian(
+ new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
+ )
+ // eslint-disable-next-line no-unused-vars
+ var popup = new this.DC.DivForms(this.viewer, {
+ domId: 'divFormsDomBox',
+ position: [position]
+ })
+
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', true)
}
- });
- },
-
- navigationShow() {
- if (this.campusNavFlag == false) {
- this.$store.commit("SET_CAMPUSNAVFLAG", true);
- }
- },
-
- openModelPopup(param) {
- var list = [];
- if (this.$route.path.indexOf("/service") != -1) {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
- }
-
- if (param.type == "orgnav") {
- var path = this.$route.path;
- if (path.indexOf("/arc") != -1) {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
- this.$store.commit("SET_ARCNAVBARTITLE", "");
- this.$store.commit("SET_ARCNAVBARCODE", "");
- this.$store.commit("SET_ARCNAVBARFLAG", false);
- }
-
- if (this.arcNavBarFlag == true) {
- this.$store.commit("SET_ARCNAVBARTITLE", "");
- this.$store.commit("SET_ARCNAVBARCODE", "");
- this.$store.commit("SET_ARCNAVBARFLAG", false);
- }
-
- this.$store.commit("SET_ORGNAVBARTITLE", param.title);
- this.$store.commit("SET_ORGNAVBARLIST", []);
-
- this.$store.commit("SET_ORGNAVBARFLAG", true);
-
- getList({ type: param.code }).then((res) => {
- res.data.data.records.forEach((item) => {
- list.push({
- navTitle: item.mechanismname,
- icon: "/img/navicon/tag.png",
- longitude: item.jd,
- latitude: item.wd,
- alt: item.gd,
- heading: item.heading,
- pitch: item.pitch,
- roll: item.roll,
- bgImg: item.tpurl,
- QRImg: item.codeurl,
- address: item.address,
- telephone: item.telephone,
- introduce: item.introduce,
- videourl: item.videourl,
- });
- });
-
- this.$store.commit("SET_ORGNAVBARLIST", list);
- });
- } else if (param.type == "arc") {
- if (this.$route.path.indexOf("/orgnav") != -1) {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
- this.$store.commit("SET_ORGNAVBARTITLE", "");
- this.$store.commit("SET_ORGNAVBARLIST", []);
- this.$store.commit("SET_ORGNAVBARFLAG", false);
- }
-
- if (this.orgNavBarFlag == true) {
- this.$store.commit("SET_ORGNAVBARTITLE", "");
- this.$store.commit("SET_ORGNAVBARLIST", []);
- this.$store.commit("SET_ORGNAVBARFLAG", false);
- }
-
- this.$store.commit("SET_ARCNAVBARTITLE", param.title);
- this.$store.commit("SET_ARCNAVBARCODE", param.code);
- this.$store.commit("SET_ARCNAVBARFLAG", true);
- }
- },
-
- shortcutShow(event) {
- var sp = document.getElementById("CampusSearchPanel");
-
- if (sp) {
- if (!sp.contains(event.target)) {
- // 这句是说如果我们点击到了id为myPanel以外的区域
- this.shortcutFlag = false;
- }
- }
- },
-
- loadPopup(param) {
- var that = this;
-
- that.searchInput = "";
- that.searchValList = [];
- that.searchValShow = false;
-
- this.$store.commit("CLEAR_ALL", null);
-
- var result = param.list;
-
- var imgArr = result.tpurl.split(",");
-
- this.$store.commit("SET_POPUPBGURL", imgArr[0]);
- this.$store.commit("SET_POPUPQRURL", result.codeurl);
- this.$store.commit("SET_POINTPOSITION", [
- Number(result.jd),
- Number(result.wd),
- Number(result.gd),
- Number(result.heading),
- Number(result.pitch),
- Number(result.roll),
- ]);
- this.$store.commit("SET_STATENAME", result.mechanismname);
- this.$store.commit("SET_SITENAME", result.address);
- this.$store.commit("SET_TELEPHONE", result.telephone);
- this.$store.commit("SET_INTRODUCETEXT", result.introduce);
- if (result.panoramaurl != "") {
- this.$store.commit("SET_PANORAMAURL", result.panoramaurl);
- }
- if (result.videourl && result.videourl != "") {
- this.$store.commit("SET_MONITORURL", result.videourl);
- }
- this.$store.commit("SET_POPUPIMGATLAS", imgArr);
- if (param.jx != undefined && param.jx != "") {
- var tabOne = param.jx.split(",");
- this.$store.commit("SET_TEACHLIST", tabOne);
- } else {
- this.$store.commit("SET_TEACHLIST", []);
- }
-
- if (param.sh != undefined && param.sh != "") {
- var tabTwo = param.sh.split(",");
- this.$store.commit("SET_LIVELIST", tabTwo);
- } else {
- this.$store.commit("SET_LIVELIST", []);
- }
-
- this.newPopup(result);
- this.viewer.flyToPosition(
- new this.DC.Position(
- Number(result.jd),
- Number(result.wd),
- 300,
- Number(result.heading),
- Number(result.pitch),
- Number(result.roll)
- ),
- () => {},
- 3
- );
- },
-
- newPopup(item) {
- const position = this.DC.Transform.transformWGS84ToCartesian(
- new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
- );
- // eslint-disable-next-line no-unused-vars
- var popup = new this.DC.DivForms(this.viewer, {
- domId: "divFormsDomBox",
- position: [position],
- });
-
- this.$store.commit("SET_PANORAMAPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", false);
- this.$store.commit("SET_DETAILSPOPUP", true);
- },
- },
-};
+ }
+}
</script>
<style lang="scss" scope>
.map-campus-search {
- position: fixed;
- top: 100px;
- left: 0;
- right: 0;
- bottom: auto;
- margin: auto;
- width: 330px;
- min-height: 40px;
- max-height: 360px;
- height: auto;
- z-index: 11;
- border-radius: 5px;
- box-shadow: 0 0 14px 2px rgb(221, 221, 221);
-
- .search-input {
- float: left;
- width: 250px;
- height: 40px;
- border-radius: 5px 0 0 5px;
-
- input {
- box-sizing: border-box;
- border-radius: 5px 0 0 5px;
- }
- }
-
- .el-button-group {
- float: left;
- width: 80px;
-
- .el-button {
- margin: 0;
- padding: 0;
- width: 40px;
- height: 40px !important;
- position: relative;
- border-radius: 0;
- border: 1px solid #dcdfe6;
-
- i {
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- }
-
- .el-button:nth-child(1) {
- border-left: none;
- border-right: none;
- }
-
- .el-button:nth-child(2) {
- border-left: none;
- border-right: none;
- border-radius: 0 5px 5px 0;
- }
- }
-
- .search-value-box {
- position: absolute;
- top: 41px;
+ position: fixed;
+ top: 100px;
left: 0;
- width: auto;
- min-width: 250px;
- max-height: 520px;
- background: #fff;
- overflow-y: auto;
+ right: 0;
+ bottom: auto;
+ margin: auto;
+ width: 330px;
+ min-height: 40px;
+ max-height: 360px;
+ height: auto;
+ z-index: 11;
+ border-radius: 5px;
box-shadow: 0 0 14px 2px rgb(221, 221, 221);
- border-radius: 5px;
- ul {
- li {
- padding-left: 20px;
- height: 36px;
- line-height: 36px;
- cursor: pointer;
- }
+ .search-input {
+ float: left;
+ width: 250px;
+ height: 40px;
+ border-radius: 5px 0 0 5px;
- li:hover {
- background: #f5f5f5;
- }
- }
- }
-
- .map-campus-shortcut {
- margin-top: 20px;
- width: 100%;
- height: 330px;
- background: #fff;
- border-radius: 5px;
-
- .shortcut-box {
- padding-top: 36px;
- ul {
- display: flex;
- width: 100%;
- height: 120px;
- justify-content: flex-start;
- flex-wrap: wrap;
-
- li {
- margin: 0 13px;
- width: 84px;
- height: 76px;
-
- .el-button {
- width: 80px;
- height: 70px;
- padding: 6px 12px;
- background: #efefef;
- border: none;
- border-radius: 5px;
+ input {
box-sizing: border-box;
- text-align: center;
-
- & > span {
- width: auto;
- height: auto;
-
- img {
- margin-top: 4px;
- width: 26px;
- height: 26px;
- }
-
- span {
- display: block;
- font-size: 14px;
- line-height: 28px;
- }
- }
- }
-
- .el-button:focus {
- border: 1px solid #000;
- }
+ border-radius: 5px 0 0 5px;
}
- }
}
- }
+
+ .el-button-group {
+ float: left;
+ width: 80px;
+
+ .el-button {
+ margin: 0;
+ padding: 0;
+ width: 40px;
+ height: 40px !important;
+ position: relative;
+ border-radius: 0;
+ border: 1px solid #dcdfe6;
+
+ i {
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+
+ .el-button:nth-child(1) {
+ border-left: none;
+ border-right: none;
+ }
+
+ .el-button:nth-child(2) {
+ border-left: none;
+ border-right: none;
+ border-radius: 0 5px 5px 0;
+ }
+ }
+
+ .search-value-box {
+ position: absolute;
+ top: 41px;
+ left: 0;
+ width: auto;
+ min-width: 250px;
+ max-height: 520px;
+ background: #fff;
+ overflow-y: auto;
+ box-shadow: 0 0 14px 2px rgb(221, 221, 221);
+ border-radius: 5px;
+
+ ul {
+ li {
+ padding-left: 20px;
+ height: 36px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ li:hover {
+ background: #f5f5f5;
+ }
+ }
+ }
+
+ .map-campus-shortcut {
+ margin-top: 20px;
+ width: 100%;
+ height: 330px;
+ background: #fff;
+ border-radius: 5px;
+
+ .shortcut-box {
+ padding-top: 36px;
+ ul {
+ display: flex;
+ width: 100%;
+ height: 120px;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+
+ li {
+ margin: 0 13px;
+ width: 84px;
+ height: 76px;
+
+ .el-button {
+ width: 80px;
+ height: 70px;
+ padding: 6px 12px;
+ background: #efefef;
+ border: none;
+ border-radius: 5px;
+ box-sizing: border-box;
+ text-align: center;
+
+ & > span {
+ width: auto;
+ height: auto;
+
+ img {
+ margin-top: 4px;
+ width: 26px;
+ height: 26px;
+ }
+
+ span {
+ display: block;
+ font-size: 14px;
+ line-height: 28px;
+ }
+ }
+ }
+
+ .el-button:focus {
+ border: 1px solid #000;
+ }
+ }
+ }
+ }
+ }
}
</style>
diff --git a/src/components/map/components/campusBuildingSearch.vue b/src/components/map/components/campusBuildingSearch.vue
index 81d94eb..f0c0af6 100644
--- a/src/components/map/components/campusBuildingSearch.vue
+++ b/src/components/map/components/campusBuildingSearch.vue
@@ -1,453 +1,447 @@
<template>
- <div>
- <div class="map-campus-search" id="CampusSearchPanel">
- <el-input
- class="search-input"
- placeholder="校区搜索…"
- v-model="searchInput"
- @input="searchValueChange"
- @focus="shortcutFlag = true"
- ></el-input>
- <el-button-group>
- <el-button
- @click="navigationShow"
- class="deblurring"
- icon="el-icon-my-path"
- ></el-button>
- <el-button
- @click="fuzzyQuery"
- class="deblurring"
- type="primary"
- icon="el-icon-my-search"
- ></el-button>
- </el-button-group>
- <div v-show="searchValShow" class="search-value-box">
- <ul>
- <li
- v-for="(item, index) in searchValList"
- :key="index"
- @click="loadPopup(item)"
- >
- {{ item.mechanismname }}
- </li>
- </ul>
- </div>
- <div class="map-campus-shortcut" v-show="shortcutFlag">
- <div class="shortcut-box">
- <ul>
- <li v-for="(item, index) in shortcutList" :key="index">
- <el-button @click="openModelPopup(item)">
- <img :src="item.bgimg" alt />
- <span>{{ item.title }}</span>
- </el-button>
- </li>
- </ul>
+ <div>
+ <div class="map-campus-search" id="CampusSearchPanel">
+ <el-input
+ class="search-input"
+ placeholder="校区搜索…"
+ v-model="searchInput"
+ @input="searchValueChange"
+ @focus="shortcutFlag = true"
+ ></el-input>
+ <el-button-group>
+ <el-button @click="navigationShow" class="deblurring" icon="el-icon-my-path"></el-button>
+ <el-button
+ @click="fuzzyQuery"
+ class="deblurring"
+ type="primary"
+ icon="el-icon-my-search"
+ ></el-button>
+ </el-button-group>
+ <div v-show="searchValShow" class="search-value-box">
+ <ul>
+ <li
+ v-for="(item, index) in searchValList"
+ :key="index"
+ @click="loadPopup(item)"
+ >{{ item.mechanismname }}</li>
+ </ul>
+ </div>
+ <div class="map-campus-shortcut" v-show="shortcutFlag">
+ <div class="shortcut-box">
+ <ul>
+ <li v-for="(item, index) in shortcutList" :key="index">
+ <el-button @click="openModelPopup(item)">
+ <img :src="item.bgimg" alt />
+ <span>{{ item.title }}</span>
+ </el-button>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
- </div>
</div>
- </div>
</template>
<script>
-import { mapGetters } from "vuex";
+import { mapGetters } from 'vuex'
-import { getList } from "@/api/pc/orgnav/index";
-import { getSearchList } from "@/api/pc/public/search";
+import { getList } from '@/api/pc/orgnav/index'
+import { getSearchList } from '@/api/pc/public/search'
export default {
- name: "campusBuildingSearch",
- data() {
- return {
- DC: null,
- shortcutList: [
- {
- bgimg: "/img/search/org.png",
- title: "其他机构",
- type: "orgnav",
- path: "/pcLayout/default/orgnav/rest",
- code: 5,
- },
- // {
- // bgimg: '/img/search/ofc.png',
- // title: '职能部处',
- // type: 'orgnav',
- // path: '/pcLayout/default/orgnav/ofc',
- // code: 2
- // },
- // {
- // bgimg: '/img/search/teach.png',
- // title: '教学科研',
- // type: 'arc',
- // path: '/pcLayout/default/arc/teaching',
- // code: 2
- // },
- {
- bgimg: "/img/search/venue.png",
- title: "校区场馆",
- type: "arc",
- path: "/pcLayout/default/arc/venue",
- code: 3,
- },
- {
- bgimg: "/img/search/floor.png",
- title: "主要场馆",
- type: "arc",
- path: "/pcLayout/default/arc/rest",
- code: 7,
- },
- // {
- // bgimg: "/img/search/dorm.png",
- // title: "校区宿舍",
- // type: "arc",
- // path: "/pcLayout/default/arc/dorm",
- // code: 4,
- // },
+ name: 'campusBuildingSearch',
+ data () {
+ return {
+ DC: null,
+ shortcutList: [
+ {
+ bgimg: '/img/search/org.png',
+ title: '其他机构',
+ type: 'orgnav',
+ path: '/pcLayout/default/orgnav/rest',
+ code: 5
+ },
+ // {
+ // bgimg: '/img/search/ofc.png',
+ // title: '职能部处',
+ // type: 'orgnav',
+ // path: '/pcLayout/default/orgnav/ofc',
+ // code: 2
+ // },
+ // {
+ // bgimg: '/img/search/teach.png',
+ // title: '教学科研',
+ // type: 'arc',
+ // path: '/pcLayout/default/arc/teaching',
+ // code: 2
+ // },
+ {
+ bgimg: '/img/search/venue.png',
+ title: '校区场馆',
+ type: 'arc',
+ path: '/pcLayout/default/arc/venue',
+ code: 3
+ },
+ {
+ bgimg: '/img/search/floor.png',
+ title: '主要场馆',
+ type: 'arc',
+ path: '/pcLayout/default/arc/rest',
+ code: 7
+ }
+ // {
+ // bgimg: "/img/search/dorm.png",
+ // title: "校区宿舍",
+ // type: "arc",
+ // path: "/pcLayout/default/arc/dorm",
+ // code: 4,
+ // },
- // {
- // bgimg: '/img/search/scenery.png',
- // title: '文化风景',
- // type: 'arc',
- // path: '/pcLayout/default/arc/culture',
- // code: 5
- // }
- ],
- shortcutFlag: false,
- searchInput: "",
- searchValShow: false,
- searchValList: [],
- };
- },
- computed: {
- ...mapGetters([
- "viewer",
- // 校区内导航的显示关闭
- "campusNavFlag",
- "orgNavBarFlag",
- "arcNavBarFlag",
- ]),
- },
- created() {
- this.DC = global.DC;
- },
- methods: {
- searchValueChange() {
- if (this.searchInput == "") {
- this.searchValList = [];
- this.searchValShow = false;
- return;
- }
- getSearchList({ mechanismName: this.searchInput }).then((res) => {
- if (res.data.data.length > 0) {
- this.searchValList = res.data.data;
- this.searchValShow = true;
+ // {
+ // bgimg: '/img/search/scenery.png',
+ // title: '文化风景',
+ // type: 'arc',
+ // path: '/pcLayout/default/arc/culture',
+ // code: 5
+ // }
+ ],
+ shortcutFlag: false,
+ searchInput: '',
+ searchValShow: false,
+ searchValList: []
}
- });
},
-
- navigationShow() {
- if (this.campusNavFlag == false) {
- this.$store.commit("SET_CAMPUSNAVFLAG", true);
- }
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ // 校区内导航的显示关闭
+ 'campusNavFlag',
+ 'orgNavBarFlag',
+ 'arcNavBarFlag'
+ ])
},
+ created () {
+ this.DC = global.DC
+ },
+ methods: {
+ searchValueChange () {
+ if (this.searchInput == '') {
+ this.searchValList = []
+ this.searchValShow = false
+ return
+ }
+ getSearchList({ mechanismName: this.searchInput }).then((res) => {
+ if (res.data.data.length > 0) {
+ this.searchValList = res.data.data
+ this.searchValShow = true
+ }
+ })
+ },
- fuzzyQuery() {
- if (this.searchInput == "") {
- this.searchValList = [];
- this.searchValShow = false;
+ navigationShow () {
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
+ },
- this.$message({
- message: "请输入关键字",
- type: "warning",
- duration: 1000,
- });
- return;
- }
- getSearchList({ mechanismName: this.searchInput }).then((res) => {
- if (res.data.data.length > 0) {
- this.$store.commit("SET_SEARCHPOPUPFLAG", true);
- this.$store.commit("SET_SEARCHPOPUPLIST", res.data.data);
- this.searchInput = "";
- this.searchValList = [];
- this.searchValShow = false;
+ fuzzyQuery () {
+ if (this.searchInput == '') {
+ this.searchValList = []
+ this.searchValShow = false
+
+ this.$message({
+ message: '请输入关键字',
+ type: 'warning',
+ duration: 1000
+ })
+ return
+ }
+ getSearchList({ mechanismName: this.searchInput }).then((res) => {
+ if (res.data.data.length > 0) {
+ this.$store.commit('SET_SEARCHPOPUPFLAG', true)
+ this.$store.commit('SET_SEARCHPOPUPLIST', res.data.data)
+ this.searchInput = ''
+ this.searchValList = []
+ this.searchValShow = false
+ }
+ })
+ },
+
+ openModelPopup (param) {
+ var list = []
+
+ if (param.type == 'orgnav') {
+ this.$store.commit('SET_ORGNAVBARTITLE', param.title)
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+ this.$store.commit('SET_ORGNAVBARFLAG', true)
+
+ getList({ type: param.code }).then((res) => {
+ res.data.data.records.forEach((item) => {
+ list.push({
+ navTitle: item.mechanismname,
+ icon: '/img/navicon/tag.png',
+ longitude: item.jd,
+ latitude: item.wd,
+ alt: item.gd,
+ heading: item.heading,
+ pitch: item.pitch,
+ roll: item.roll,
+ bgImg: item.tpurl,
+ QRImg: item.codeurl,
+ address: item.address,
+ telephone: item.telephone,
+ introduce: item.introduce,
+ videourl: item.videourl
+ })
+ })
+
+ this.$store.commit('SET_ORGNAVBARLIST', list)
+ })
+ } else if (param.type == 'arc') {
+ this.$store.commit('SET_ARCNAVBARTITLE', param.title)
+ this.$store.commit('SET_ARCNAVBARCODE', param.code)
+ this.$store.commit('SET_ARCNAVBARFLAG', true)
+ }
+
+ this.$router.push(param.path)
+ },
+
+ shortcutShow (event) {
+ var sp = document.getElementById('CampusSearchPanel')
+
+ if (sp) {
+ if (!sp.contains(event.target)) {
+ // 这句是说如果我们点击到了id为myPanel以外的区域
+ this.shortcutFlag = false
+ }
+ }
+ },
+
+ loadPopup (param) {
+ var that = this
+
+ that.searchInput = ''
+ that.searchValList = []
+ that.searchValShow = false
+
+ this.$store.commit('CLEAR_ALL', null)
+
+ var imgArr = param.tpurl.split(',')
+
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', param.codeurl)
+ this.$store.commit('SET_POINTPOSITION', [
+ Number(param.jd),
+ Number(param.wd),
+ Number(param.gd),
+ Number(param.heading),
+ Number(param.pitch),
+ Number(param.roll)
+ ])
+ this.$store.commit('SET_STATENAME', param.mechanismname)
+ this.$store.commit('SET_SITENAME', param.address)
+ this.$store.commit('SET_TELEPHONE', param.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', param.introduce)
+ if (param.panoramaurl != '') {
+ this.$store.commit('SET_PANORAMAURL', param.panoramaurl)
+ }
+ if (param.videourl && param.videourl != '') {
+ this.$store.commit('SET_MONITORURL', param.videourl)
+ }
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+ if (param.jx != undefined && param.jx != '') {
+ var tabOne = param.jx.split(',')
+ this.$store.commit('SET_TEACHLIST', tabOne)
+ } else {
+ this.$store.commit('SET_TEACHLIST', [])
+ }
+
+ if (param.sh != undefined && param.sh != '') {
+ var tabTwo = param.sh.split(',')
+ this.$store.commit('SET_LIVELIST', tabTwo)
+ } else {
+ this.$store.commit('SET_LIVELIST', [])
+ }
+
+ this.newPopup(param)
+ this.viewer.flyToPosition(
+ new this.DC.Position(
+ Number(param.jd),
+ Number(param.wd),
+ 300,
+ Number(param.heading),
+ Number(param.pitch),
+ Number(param.roll)
+ ),
+ () => { },
+ 0.5
+ )
+ },
+
+ newPopup (item) {
+ const position = this.DC.Transform.transformWGS84ToCartesian(
+ new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
+ )
+ // eslint-disable-next-line no-unused-vars
+ var popup = new this.DC.DivForms(this.viewer, {
+ domId: 'divFormsDomBox',
+ position: [position]
+ })
+
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', true)
}
- });
- },
-
- openModelPopup(param) {
- var list = [];
-
- if (param.type == "orgnav") {
- this.$store.commit("SET_ORGNAVBARTITLE", param.title);
- this.$store.commit("SET_ORGNAVBARLIST", []);
- this.$store.commit("SET_ORGNAVBARFLAG", true);
-
- getList({ type: param.code }).then((res) => {
- res.data.data.records.forEach((item) => {
- list.push({
- navTitle: item.mechanismname,
- icon: "/img/navicon/tag.png",
- longitude: item.jd,
- latitude: item.wd,
- alt: item.gd,
- heading: item.heading,
- pitch: item.pitch,
- roll: item.roll,
- bgImg: item.tpurl,
- QRImg: item.codeurl,
- address: item.address,
- telephone: item.telephone,
- introduce: item.introduce,
- videourl: item.videourl,
- });
- });
-
- this.$store.commit("SET_ORGNAVBARLIST", list);
- });
- } else if (param.type == "arc") {
- this.$store.commit("SET_ARCNAVBARTITLE", param.title);
- this.$store.commit("SET_ARCNAVBARCODE", param.code);
- this.$store.commit("SET_ARCNAVBARFLAG", true);
- }
-
- this.$router.push(param.path);
- },
-
- shortcutShow(event) {
- var sp = document.getElementById("CampusSearchPanel");
-
- if (sp) {
- if (!sp.contains(event.target)) {
- // 这句是说如果我们点击到了id为myPanel以外的区域
- this.shortcutFlag = false;
- }
- }
- },
-
- loadPopup(param) {
- var that = this;
-
- that.searchInput = "";
- that.searchValList = [];
- that.searchValShow = false;
-
- this.$store.commit("CLEAR_ALL", null);
-
- var imgArr = param.tpurl.split(",");
-
- this.$store.commit("SET_POPUPBGURL", imgArr[0]);
- this.$store.commit("SET_POPUPQRURL", param.codeurl);
- this.$store.commit("SET_POINTPOSITION", [
- Number(param.jd),
- Number(param.wd),
- Number(param.gd),
- Number(param.heading),
- Number(param.pitch),
- Number(param.roll),
- ]);
- this.$store.commit("SET_STATENAME", param.mechanismname);
- this.$store.commit("SET_SITENAME", param.address);
- this.$store.commit("SET_TELEPHONE", param.telephone);
- this.$store.commit("SET_INTRODUCETEXT", param.introduce);
- if (param.panoramaurl != "") {
- this.$store.commit("SET_PANORAMAURL", param.panoramaurl);
- }
- if (param.videourl && param.videourl != "") {
- this.$store.commit("SET_MONITORURL", param.videourl);
- }
- this.$store.commit("SET_POPUPIMGATLAS", imgArr);
- if (param.jx != undefined && param.jx != "") {
- var tabOne = param.jx.split(",");
- this.$store.commit("SET_TEACHLIST", tabOne);
- } else {
- this.$store.commit("SET_TEACHLIST", []);
- }
-
- if (param.sh != undefined && param.sh != "") {
- var tabTwo = param.sh.split(",");
- this.$store.commit("SET_LIVELIST", tabTwo);
- } else {
- this.$store.commit("SET_LIVELIST", []);
- }
-
- this.newPopup(param);
- this.viewer.flyToPosition(
- new this.DC.Position(
- Number(param.jd),
- Number(param.wd),
- 300,
- Number(param.heading),
- Number(param.pitch),
- Number(param.roll)
- ),
- () => {},
- 0.5
- );
- },
-
- newPopup(item) {
- const position = this.DC.Transform.transformWGS84ToCartesian(
- new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
- );
- // eslint-disable-next-line no-unused-vars
- var popup = new this.DC.DivForms(this.viewer, {
- domId: "divFormsDomBox",
- position: [position],
- });
-
- this.$store.commit("SET_PANORAMAPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", false);
- this.$store.commit("SET_DETAILSPOPUP", true);
- },
- },
-};
+ }
+}
</script>
<style lang="scss" scope>
.map-campus-search {
- position: fixed;
- top: 100px;
- left: 0;
- right: 0;
- bottom: auto;
- margin: auto;
- width: 330px;
- min-height: 40px;
- max-height: 360px;
- height: auto;
- z-index: 11;
- border-radius: 5px;
- box-shadow: 0 0 14px 2px rgb(221, 221, 221);
-
- .search-input {
- float: left;
- width: 250px;
- height: 40px;
- border-radius: 5px 0 0 5px;
-
- input {
- box-sizing: border-box;
- border-radius: 5px 0 0 5px;
- }
- }
-
- .el-button-group {
- float: left;
- width: 80px;
-
- .el-button {
- margin: 0;
- padding: 0;
- width: 40px;
- height: 40px !important;
- position: relative;
- border-radius: 0;
- border: 1px solid #dcdfe6;
-
- i {
- margin: auto;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- }
-
- .el-button:nth-child(1) {
- border-left: none;
- border-right: none;
- }
-
- .el-button:nth-child(2) {
- border-left: none;
- border-right: none;
- border-radius: 0 5px 5px 0;
- }
- }
-
- .search-value-box {
- position: absolute;
- top: 41px;
+ position: fixed;
+ top: 100px;
left: 0;
- width: auto;
- min-width: 250px;
- max-height: 520px;
- background: #fff;
- overflow-y: auto;
- box-shadow: 0 0 14px 2px rgb(221, 221, 221);
- border-radius: 5px;
-
- ul {
- li {
- padding-left: 20px;
- height: 36px;
- line-height: 36px;
- cursor: pointer;
- }
-
- li:hover {
- background: #f5f5f5;
- }
- }
- }
-
- .map-campus-shortcut {
- margin-top: 20px;
- width: 100%;
- // height: 330px;
+ right: 0;
+ bottom: auto;
+ margin: auto;
+ width: 330px;
+ min-height: 40px;
+ max-height: 360px;
height: auto;
- background: #fff;
+ z-index: 11;
border-radius: 5px;
+ box-shadow: 0 0 14px 2px rgb(221, 221, 221);
- .shortcut-box {
- padding-top: 36px;
- height: auto;
- ul {
- display: flex;
- width: 100%;
- height: auto;
- justify-content: flex-start;
- flex-wrap: wrap;
+ .search-input {
+ float: left;
+ width: 250px;
+ height: 40px;
+ border-radius: 5px 0 0 5px;
- li {
- margin: 0 13px;
- width: 84px;
- height: 76px;
-
- .el-button {
- width: 80px;
- height: 70px;
- padding: 6px 12px;
- background: #efefef;
- border: none;
- border-radius: 5px;
+ input {
box-sizing: border-box;
- text-align: center;
-
- & > span {
- width: auto;
- height: auto;
-
- img {
- margin-top: 4px;
- width: 26px;
- height: 26px;
- }
-
- span {
- display: block;
- font-size: 14px;
- line-height: 28px;
- }
- }
- }
-
- .el-button:focus {
- border: 1px solid #000;
- }
+ border-radius: 5px 0 0 5px;
}
- }
}
- }
+
+ .el-button-group {
+ float: left;
+ width: 80px;
+
+ .el-button {
+ margin: 0;
+ padding: 0;
+ width: 40px;
+ height: 40px !important;
+ position: relative;
+ border-radius: 0;
+ border: 1px solid #dcdfe6;
+
+ i {
+ margin: auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ }
+
+ .el-button:nth-child(1) {
+ border-left: none;
+ border-right: none;
+ }
+
+ .el-button:nth-child(2) {
+ border-left: none;
+ border-right: none;
+ border-radius: 0 5px 5px 0;
+ }
+ }
+
+ .search-value-box {
+ position: absolute;
+ top: 41px;
+ left: 0;
+ width: auto;
+ min-width: 250px;
+ max-height: 520px;
+ background: #fff;
+ overflow-y: auto;
+ box-shadow: 0 0 14px 2px rgb(221, 221, 221);
+ border-radius: 5px;
+
+ ul {
+ li {
+ padding-left: 20px;
+ height: 36px;
+ line-height: 36px;
+ cursor: pointer;
+ }
+
+ li:hover {
+ background: #f5f5f5;
+ }
+ }
+ }
+
+ .map-campus-shortcut {
+ margin-top: 20px;
+ width: 100%;
+ // height: 330px;
+ height: auto;
+ background: #fff;
+ border-radius: 5px;
+
+ .shortcut-box {
+ padding-top: 36px;
+ height: auto;
+ ul {
+ display: flex;
+ width: 100%;
+ height: auto;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+
+ li {
+ margin: 0 13px;
+ width: 84px;
+ height: 76px;
+
+ .el-button {
+ width: 80px;
+ height: 70px;
+ padding: 6px 12px;
+ background: #efefef;
+ border: none;
+ border-radius: 5px;
+ box-sizing: border-box;
+ text-align: center;
+
+ & > span {
+ width: auto;
+ height: auto;
+
+ img {
+ margin-top: 4px;
+ width: 26px;
+ height: 26px;
+ }
+
+ span {
+ display: block;
+ font-size: 14px;
+ line-height: 28px;
+ }
+ }
+ }
+
+ .el-button:focus {
+ border: 1px solid #000;
+ }
+ }
+ }
+ }
+ }
}
</style>
diff --git a/src/components/map/components/dimension.vue b/src/components/map/components/dimension.vue
index cea1467..8bbc355 100644
--- a/src/components/map/components/dimension.vue
+++ b/src/components/map/components/dimension.vue
@@ -1,979 +1,975 @@
<template>
- <div class="dimension-cut">
- <el-radio-group
- v-model="dimensionValue"
- size="medium"
- @change="dimensionChange"
- >
- <el-radio-button label="三 维"></el-radio-button>
- <el-radio-button label="真三维"></el-radio-button>
- </el-radio-group>
- </div>
+ <div class="dimension-cut">
+ <el-radio-group v-model="dimensionValue" size="medium" @change="dimensionChange">
+ <el-radio-button label="三 维"></el-radio-button>
+ <el-radio-button label="真三维"></el-radio-button>
+ </el-radio-group>
+ </div>
</template>
<script>
-import axios from "axios";
-import { mapGetters } from "vuex";
-import { getDetail } from "@/api/pc/public/arc";
+import axios from 'axios'
+import { mapGetters } from 'vuex'
+import { getDetail } from '@/api/pc/public/arc'
export default {
- name: "dimension",
- data() {
- return {
- DC: null,
- dimensionValue: "三 维",
- // 建筑2.5D地图
- newLayer: null,
- baseLayer: null,
- // 电子地图
- vecLayer: null,
- // 标注
- cvaLayer: null,
- // 建筑2.5D面数据
- provider: null,
- wallLayer: null,
- tileset: null,
- tilesetLayer: null,
- titlesetLayerFlag: false,
- silhouetteBlue: null,
- wallArr: [
- [114.04006133, 27.628038, 100],
- [114.04020623, 27.62809403, 100],
- [114.04025389, 27.62819931, 100],
- [114.04032823, 27.62827743, 100],
- [114.0410871, 27.62918798, 100],
- [114.04001425, 27.62986815, 100],
- [114.04001615, 27.62986817, 100],
- [114.03992451, 27.62998379, 100],
- [114.03967878, 27.62999684, 100],
- [114.03940001, 27.63008698, 100],
- [114.03951075, 27.63047135, 100],
- [114.03946107, 27.63056152, 100],
- [114.03927571, 27.63072325, 100],
- [114.03871751, 27.63128845, 100],
- [114.03872079, 27.63135594, 100],
- [114.03869211, 27.63139169, 100],
- [114.03960653, 27.63200726, 100],
- [114.03945732, 27.63215207, 100],
- [114.03760837, 27.63092563, 100],
- [114.03770336, 27.63078037, 100],
- [114.03782957, 27.63072932, 100],
- [114.03787347, 27.63068209, 100],
- [114.03824591, 27.62887902, 100],
- [114.03837943, 27.6289105, 100],
- [114.03863853, 27.62868839, 100],
- [114.03905656, 27.62843592, 100],
- [114.03954722, 27.62819644, 100],
- [114.04006133, 27.628038, 100],
- ],
- mapCenter: [115.871863, 28.743861, 400.0],
- };
- },
- props: ["areaLayer"],
- computed: {
- ...mapGetters([
- "viewer",
- // 校区内导航的显示关闭
- "campusNavFlag",
- "orgNavBarFlag",
- "arcNavBarFlag",
- "closeMapClick", // 关闭地图点击，防止新增标签误触
- ]),
- },
- created() {
- this.DC = global.DC;
- },
- watch: {
- viewer: {
- immediate: true,
- handler(newCode, oldCode) {
- if (this.titlesetLayerFlag == false && newCode != null) {
- var that = this;
-
- that.tilesetLayer = new that.DC.TilesetLayer("tilesetLayer");
- that.viewer.addLayer(that.tilesetLayer);
- that.tileset = new that.DC.Tileset("/mx/tileset.json", {
- luminanceAtZenith: 0.3,
- shadows: that.DC.Namespace.Cesium.ShadowMode.DISABLED,
- });
- that.tilesetLayer.addOverlay(that.tileset);
- that.tilesetLayer.show = false;
-
- that.silhouetteBlue =
- that.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
- that.silhouetteBlue.uniforms.color =
- that.DC.Namespace.Cesium.Color.fromBytes(9, 162, 40);
- that.silhouetteBlue.uniforms.length = 0.01;
- that.silhouetteBlue.selected = [];
-
- that.viewer.scene.postProcessStages.add(
- that.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage(
- [that.silhouetteBlue]
- )
- );
-
- that.vecLayer = that.viewer.imageryLayers.addImageryProvider(
- new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: " http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
- type: "wmts",
- layer: "vec",
- style: "default",
- format: "tiles",
- tileMatrixSetID: "w",
- show: true,
- maximumLevel: 18,
- })
- );
-
- that.cvaLayer = that.viewer.imageryLayers.addImageryProvider(
- new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: " http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
- type: "wmts",
- layer: "cva",
- style: "default",
- format: "tiles",
- tileMatrixSetID: "w",
- show: true,
- maximumLevel: 18,
- })
- );
-
- var highlighted = {
- feature: undefined,
- originalColor: new that.DC.Namespace.Cesium.Color(),
- };
-
- var selected = {
- feature: undefined,
- originalColor: new that.DC.Namespace.Cesium.Color(),
- };
-
- const videoLayer = new that.DC.CameraVideoLayer("video-layer").addTo(
- that.viewer
- );
-
- const cameraVideo = new that.DC.CameraVideo(
- new that.DC.Position(114.03935976, 27.62939045, 100.25, 4.2, -90),
- document.getElementById("video")
- );
- cameraVideo.setStyle({
- fov: 30,
- far: 120,
- near: 1,
- aspectRatio: 1.3,
- alpha: 0.7,
- });
- videoLayer.addOverlay(cameraVideo);
-
- that.tileset.on(that.DC.MouseEventType.CLICK, (e) => {
- if (that.closeMapClick) {
- return;
- }
- that.viewer.scene.globe.depthTestAgainstTerrain = false;
-
- if (e.overlay && e.overlay.attr.arcName != null) {
- this.$store.commit("CLEAR_ALL", null);
- getDetail({
- mechanismname: e.overlay.attr.arcName,
- }).then((res) => {
- if (res && JSON.stringify(res.data.data) != "{}") {
- var result = res.data.data;
-
- var imgArr = result.tpurl.split(",");
- this.$store.commit("SET_POPUPBGURL", imgArr[0]);
- this.$store.commit("SET_POPUPQRURL", result.codeurl);
- this.$store.commit("SET_POINTPOSITION", [
- Number(e.wgs84Position.lng),
- Number(e.wgs84Position.lat),
- Number(e.wgs84Position.alt),
- Number(0),
- Number(0),
- Number(0),
- ]);
- this.$store.commit("SET_STATENAME", result.mechanismname);
- this.$store.commit("SET_SITENAME", result.address);
- this.$store.commit("SET_TELEPHONE", result.telephone);
- this.$store.commit("SET_INTRODUCETEXT", result.introduce);
- this.$store.commit("SET_PANORAMAURL", result.panoramaurl);
- this.$store.commit("SET_POPUPIMGATLAS", imgArr);
- if (result.videourl && result.videourl != "") {
- this.$store.commit("SET_MONITORURL", result.videourl);
- }
- if (result.jx != undefined && result.jx != "") {
- var tabOne = res.data.data[0].jx.split(",");
- this.$store.commit("SET_TEACHLIST", tabOne);
- } else {
- this.$store.commit("SET_TEACHLIST", []);
- }
-
- if (result.sh != undefined && result.sh != "") {
- var tabTwo = res.data.data[0].sh.split(",");
- this.$store.commit("SET_LIVELIST", tabTwo);
- } else {
- this.$store.commit("SET_LIVELIST", []);
- }
-
- // 定制化窗体
- // eslint-disable-next-line no-unused-vars
- var popup = new that.DC.DivForms(that.viewer, {
- domId: "divFormsDomBox",
- position: [
- that.DC.Transform.transformWGS84ToCartesian(
- new that.DC.Position(
- Number(e.wgs84Position.lng),
- Number(e.wgs84Position.lat),
- Number(e.wgs84Position.alt)
- )
- ),
- ],
- });
-
- this.$store.commit("SET_PANORAMAPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", false);
- this.$store.commit("SET_DETAILSPOPUP", true);
- }
- });
-
- this.viewer.flyToPosition(
- new this.DC.Position(
- Number(e.wgs84Position.lng + 0.00070806),
- Number(e.wgs84Position.lat - 0.00261205),
- 300,
- Number(-9),
- Number(-34.54),
- Number(0)
- )
- );
- }
- });
-
- // that.tileset.on(that.DC.MouseEventType.MOUSE_MOVE, e => {
- // that.silhouetteBlue.selected = []
-
- // if (that.DC.Namespace.Cesium.defined(highlighted.feature)) {
- // highlighted.feature.color = highlighted.originalColor
- // highlighted.feature = undefined
- // }
-
- // if (e.feature !== selected.feature) {
- // that.silhouetteBlue.selected = [e.feature]
-
- // highlighted.feature = e.feature
-
- // that.DC.Namespace.Cesium.Color.clone(
- // e.feature.color,
- // highlighted.originalColor
- // )
- // e.feature.color = that.DC.Namespace.Cesium.Color.fromBytes(155, 255, 175)
- // }
- // })
-
- // var provider = new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- // url: 'http://www.tdtfz.com/OneMapServer/rest/services/fzsw2019/MapServer/WMTS/tile/1.0.0/fzsw2019/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}',
- // layer: 'fzsw2019',
- // style: 'default',
- // tileMatrixSetID: 'default028mm',
- // format: 'image/jpgpng',
- // tilingScheme: new that.DC.Namespace.Cesium.GeographicTilingScheme(),
- // maximumLevel: 19,
- // tileMatrixLabels: [
- // '0',
- // '1',
- // '2',
- // '3',
- // '4',
- // '5',
- // '6',
- // '7',
- // '8',
- // '9',
- // '10',
- // '11',
- // '12',
- // '13',
- // '14',
- // '15',
- // '16',
- // '17',
- // '18',
- // '19'
- // ]
- // })
-
- var provider =
- new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: "/wp/{z}/{x}/{y}.png",
- fileExtension: "png",
- // minimumLevel: 19
- });
-
- var baseProvider =
- new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: "/base/{z}/{x}/{y}.png",
- fileExtension: "png",
- });
-
- // that.baseLayer = that.viewer.imageryLayers.addImageryProvider(baseProvider)
- that.newLayer =
- that.viewer.imageryLayers.addImageryProvider(provider);
-
- that.wallLayer = new that.DC.VectorLayer("wallLayer");
- // that.viewer.addLayer(that.wallLayer)
-
- that.wallArr.forEach((item) => {
- item = item.join(",");
- });
- that.wallArr = that.wallArr.join(";");
- const wall = new that.DC.Wall(that.wallArr);
- wall.setStyle({
- material: new that.DC.WallTrailMaterialProperty({
- color: that.DC.Namespace.Cesium.Color.fromBytes(0, 142, 255, 150),
- // color: that.DC.Color.CYAN,
- speed: 10,
- }),
- });
- // that.wallLayer.addOverlay(wall)
-
- // that.viewer.camera.setView({
- // // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // // fromDegrees()方法，将经纬度和高程转换为世界坐标
- // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.03928791, 27.62954732, 400.0),
- // orientation: {
- // // 指向
- // heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // // 视角
- // pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- // roll: 0.0
- // }
- // })
-
- // setTimeout(() => {
- // that.viewer.camera.flyTo({
- // // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // // fromDegrees()方法，将经纬度和高程转换为世界坐标
- // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.0351, 27.6314, 200.0),
- // duration: 5,
- // complete: () => {
- // that.viewer.camera.flyTo({
- // // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // // fromDegrees()方法，将经纬度和高程转换为世界坐标
- // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.0351, 27.6314, 200.0),
- // orientation: {
- // // 指向
- // heading: that.DC.Namespace.Cesium.Math.toRadians(108),
- // // 视角
- // pitch: that.DC.Namespace.Cesium.Math.toRadians(-26.46),
- // roll: 0.0
- // }
- // })
- // }
- // })
- // }, 400)
- that.titlesetLayerFlag = true;
-
- that.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- that.mapCenter[0],
- that.mapCenter[1],
- that.mapCenter[2]
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
-
- // 最小
- that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 220;
- // 最大
- that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 400;
-
- // 设置相机缩小时的速率
- that.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000;
- // 设置相机放大时的速率
- that.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000;
- // 视角平移
- that.viewer.scene.screenSpaceCameraController.enableRotate = true;
- // 视角缩放
- that.viewer.scene.screenSpaceCameraController.enableZoom = true;
- // 视角旋转
- that.viewer.scene.screenSpaceCameraController.enableTilt = false;
-
- axios
- .get(
- "http://arcgis.jxpskj.com:6080/arcgis/rest/services/lxxqwxq/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson"
- )
- .then((resultData) => {
- resultData.data.features.forEach((item) => {
- item.geometry.rings[0].forEach((it) => {
- it = it.join(",");
- });
-
- item.geometry.rings[0] = item.geometry.rings[0].join(";");
-
- const polygon = new that.DC.Polygon(item.geometry.rings[0]);
- polygon.attr = item.attributes;
-
- polygon.setStyle({
- material: that.DC.Namespace.Cesium.Color.fromBytes(
- 255,
- 255,
- 255,
- 1
- ),
- });
-
- that.areaLayer.addOverlay(polygon);
- });
-
- that.areaLayer.show = true;
- });
-
- var select = {
- overlay: undefined,
- color: undefined,
- };
-
- that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => {
- if (that.closeMapClick) {
- return;
- }
- if (e.overlay != undefined && e.layer.id == "areaLayer") {
- if (select.overlay != undefined) {
- if (e.overlay != select.overlay) {
- select.overlay.setStyle({
- material: select.color,
- outline: false,
- });
-
- select.overlay = undefined;
- select.color = undefined;
- }
- }
-
- if (select.overlay == undefined) {
- select.overlay = e.overlay;
-
- select.color = e.overlay._style.material;
- select.overlay.setStyle({
- outline: true,
- outlineColor: that.DC.Namespace.Cesium.Color.fromBytes(
- 3,
- 255,
- 13,
- 255
- ), // 边框颜色
- outlineWidth: 10, // 边框大小，
- height: 0.01,
- material: that.DC.Namespace.Cesium.Color.fromBytes(
- 108,
- 245,
- 113,
- 158
- ),
- });
- }
- } else {
- if (select.overlay != undefined) {
- select.overlay.setStyle({
- material: select.color,
- outline: false,
- });
-
- select.overlay = undefined;
- select.color = undefined;
- }
- }
- });
-
- that.viewer.on(that.DC.MouseEventType.CLICK, (e) => {
- if (that.closeMapClick) {
- return;
- }
- if (e.overlay != undefined && e.layer.id == "areaLayer") {
- var rid =
- e.overlay.attr["楼栋号"] == "8栋"
- ? "9栋"
- : e.overlay.attr["楼栋号"] == "9栋"
- ? "8栋"
- : e.overlay.attr["楼栋号"];
- this.$store.commit("CLEAR_ALL", null);
- getDetail({ mechanismname: "香琴湾" + rid }).then((res) => {
- that.viewer.scene.globe.depthTestAgainstTerrain = false;
- var result = res.data.data;
-
- var imgArr = result.tpurl.split(",");
- this.$store.commit("SET_POPUPBGURL", imgArr[0]);
- this.$store.commit("SET_POPUPQRURL", result.codeurl);
- this.$store.commit("SET_POINTPOSITION", [
- Number(e.wgs84Position.lng),
- Number(e.wgs84Position.lat),
- Number(e.wgs84Position.alt),
- Number(0),
- Number(0),
- Number(0),
- ]);
- this.$store.commit("SET_STATENAME", result.mechanismname);
- this.$store.commit("SET_SITENAME", result.address);
- this.$store.commit("SET_TELEPHONE", result.telephone);
- this.$store.commit("SET_INTRODUCETEXT", result.introduce);
- this.$store.commit("SET_PANORAMAURL", result.panoramaurl);
- this.$store.commit("SET_POPUPIMGATLAS", imgArr);
- if (result.videourl && result.videourl != "") {
- this.$store.commit("SET_MONITORURL", result.videourl);
- }
- if (result.jx != undefined && result.jx != "") {
- var tabOne = res.data.data[0].jx.split(",");
- this.$store.commit("SET_TEACHLIST", tabOne);
- } else {
- this.$store.commit("SET_TEACHLIST", []);
- }
-
- if (result.sh != undefined && result.sh != "") {
- var tabTwo = res.data.data[0].sh.split(",");
- this.$store.commit("SET_LIVELIST", tabTwo);
- } else {
- this.$store.commit("SET_LIVELIST", []);
- }
-
- // 定制化窗体
- // eslint-disable-next-line no-unused-vars
- var popup = new that.DC.DivForms(that.viewer, {
- domId: "divFormsDomBox",
- position: [
- that.DC.Transform.transformWGS84ToCartesian(
- new that.DC.Position(
- Number(e.wgs84Position.lng),
- Number(e.wgs84Position.lat),
- Number(e.wgs84Position.alt)
- )
- ),
- ],
- });
-
- this.$store.commit("SET_PANORAMAPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", false);
- this.$store.commit("SET_DETAILSPOPUP", true);
- });
-
- this.viewer.flyToPosition(
- new this.DC.Position(
- Number(e.wgs84Position.lng),
- Number(e.wgs84Position.lat),
- 300,
- Number(0),
- Number(-90),
- Number(0)
- ),
- () => {},
- 0
- );
- }
- });
-
- document.querySelector(".dc-zoom-controller").children[1].onclick =
- function () {
- if (that.dimensionValue == "真三维") {
- that.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- that.mapCenter[0],
- that.mapCenter[1],
- 220.0
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(-9),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-34.54),
- roll: 0.0,
- },
- });
- } else {
- that.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- that.mapCenter[0],
- that.mapCenter[1],
- 400.0
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
- };
-
- document.querySelector(".dc-zoom-controller").children[2].onclick =
- function () {
- if (
- that.dimensionValue != undefined &&
- that.dimensionValue != "真三维"
- ) {
- const height = Math.ceil(
- that.viewer.camera.positionCartographic.height
- );
-
- if (height <= 250) {
- that.viewer.camera.setView({
- destination:
- that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 280
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
-
- if (height > 250 && height <= 310) {
- that.viewer.camera.setView({
- destination:
- that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 340
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
-
- if (height > 310 && height < 370) {
- that.viewer.camera.setView({
- destination:
- that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 400
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
- }
- };
-
- document.querySelector(".dc-zoom-controller").children[0].onclick =
- function () {
- if (
- that.dimensionValue != undefined &&
- that.dimensionValue != "真三维"
- ) {
- const height = Math.ceil(
- that.viewer.camera.positionCartographic.height
- );
-
- if (height > 370) {
- that.viewer.camera.setView({
- destination:
- that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 340
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
-
- return;
- }
-
- if (height > 310) {
- that.viewer.camera.setView({
- destination:
- that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 280
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
-
- return;
- }
-
- if (height > 250) {
- that.viewer.camera.setView({
- destination:
- that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 220
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
- }
- };
-
- that.viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, () => {
- if (
- that.dimensionValue != undefined &&
- that.dimensionValue != "真三维"
- ) {
- const height = Math.ceil(
- that.viewer.camera.positionCartographic.height
- );
-
- that.viewer.camera.setView({
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
-
- if (height <= 250) {
- that.viewer.camera.setView({
- destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 220
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
-
- if (height > 250 && height <= 310) {
- that.viewer.camera.setView({
- destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 280
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
-
- if (height > 310 && height <= 370) {
- that.viewer.camera.setView({
- destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 340
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
-
- if (height > 370) {
- that.viewer.camera.setView({
- destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
- that.viewer.camera.positionCartographic.longitude,
- that.viewer.camera.positionCartographic.latitude,
- 400
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- }
- }
- });
+ name: 'dimension',
+ data () {
+ return {
+ DC: null,
+ dimensionValue: '三 维',
+ // 建筑2.5D地图
+ newLayer: null,
+ baseLayer: null,
+ // 电子地图
+ vecLayer: null,
+ // 标注
+ cvaLayer: null,
+ // 建筑2.5D面数据
+ provider: null,
+ wallLayer: null,
+ tileset: null,
+ tilesetLayer: null,
+ titlesetLayerFlag: false,
+ silhouetteBlue: null,
+ wallArr: [
+ [114.04006133, 27.628038, 100],
+ [114.04020623, 27.62809403, 100],
+ [114.04025389, 27.62819931, 100],
+ [114.04032823, 27.62827743, 100],
+ [114.0410871, 27.62918798, 100],
+ [114.04001425, 27.62986815, 100],
+ [114.04001615, 27.62986817, 100],
+ [114.03992451, 27.62998379, 100],
+ [114.03967878, 27.62999684, 100],
+ [114.03940001, 27.63008698, 100],
+ [114.03951075, 27.63047135, 100],
+ [114.03946107, 27.63056152, 100],
+ [114.03927571, 27.63072325, 100],
+ [114.03871751, 27.63128845, 100],
+ [114.03872079, 27.63135594, 100],
+ [114.03869211, 27.63139169, 100],
+ [114.03960653, 27.63200726, 100],
+ [114.03945732, 27.63215207, 100],
+ [114.03760837, 27.63092563, 100],
+ [114.03770336, 27.63078037, 100],
+ [114.03782957, 27.63072932, 100],
+ [114.03787347, 27.63068209, 100],
+ [114.03824591, 27.62887902, 100],
+ [114.03837943, 27.6289105, 100],
+ [114.03863853, 27.62868839, 100],
+ [114.03905656, 27.62843592, 100],
+ [114.03954722, 27.62819644, 100],
+ [114.04006133, 27.628038, 100]
+ ],
+ mapCenter: [115.871863, 28.743861, 400.0]
}
- },
},
- },
- methods: {
- // openPopups(lng, lat, alt) {
- // var popup = new that.DC.DivForms(that.viewer, {
- // domId: "divFormsDomBox",
- // position: [
- // that.DC.Transform.transformWGS84ToCartesian(
- // new that.DC.Position(Number(lng), Number(lat), Number(alt))
- // ),
- // ],
- // });
- // },
- dimensionChange() {
- var that = this;
- that.$store.commit("SET_TWOORTHREE", that.dimensionValue);
- if (that.dimensionValue == "真三维") {
- // that.wallLayer.show = false
- that.areaLayer.show = false;
- that.viewer.imageryLayers.remove(that.newLayer);
- that.newLayer = null;
- // that.viewer.imageryLayers.remove(that.baseLayer)
- that.baseLayer = null;
- // that.vecLayer = that.viewer.imageryLayers.addImageryProvider(new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- // url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
- // type: 'wmts',
- // layer: 'vec',
- // style: 'default',
- // format: 'tiles',
- // tileMatrixSetID: 'w',
- // show: true,
- // maximumLevel: 18
- // }))
-
- // that.cvaLayer = that.viewer.imageryLayers.addImageryProvider(new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- // url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
- // type: 'wmts',
- // layer: 'cva',
- // style: 'default',
- // format: 'tiles',
- // tileMatrixSetID: 'w',
- // show: true,
- // maximumLevel: 18
- // }))
- that.silhouetteBlue.selected = [];
- that.tilesetLayer.show = true;
- // 最小
- that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1.0;
- // 最大
- that.viewer.scene.screenSpaceCameraController.maximumZoomDistance =
- Number.POSITIVE_INFINITY;
- // 视角旋转
- that.viewer.scene.screenSpaceCameraController.enableTilt = true;
- // 115.877863,28.741661
- that.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- that.mapCenter[0],
- that.mapCenter[1],
- 220.0
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(-9),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-34.54),
- roll: 0.0,
- },
- });
- } else {
- that.tilesetLayer.show = false;
- // that.viewer.imageryLayers.remove(that.vecLayer)
- // that.vecLayer = null
- // that.viewer.imageryLayers.remove(that.cvaLayer)
- // that.cvaLayer = null
- that.areaLayer.show = true;
-
- // var provider = new that.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({
- // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/PingXiang25DMapQP/MapServer'
- // })
-
- var provider = new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: "/wp/{z}/{x}/{y}.png",
- fileExtension: "png",
- });
-
- var baseProvider =
- new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- url: "/base/{z}/{x}/{y}.png",
- fileExtension: "png",
- });
-
- // that.baseLayer = that.viewer.imageryLayers.addImageryProvider(baseProvider)
- that.newLayer = that.viewer.imageryLayers.addImageryProvider(provider);
-
- // that.wallLayer.show = true
-
- that.viewer.camera.setView({
- // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
- // fromDegrees()方法，将经纬度和高程转换为世界坐标
- destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
- that.mapCenter[0],
- that.mapCenter[1],
- 400.0
- ),
- orientation: {
- // 指向
- heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
- // 视角
- pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
- roll: 0.0,
- },
- });
- // 最小
- that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 220;
- // 最大
- that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 400;
- // 视角旋转
- that.viewer.scene.screenSpaceCameraController.enableTilt = false;
- }
+ props: ['areaLayer'],
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ // 校区内导航的显示关闭
+ 'campusNavFlag',
+ 'orgNavBarFlag',
+ 'arcNavBarFlag',
+ 'closeMapClick' // 关闭地图点击，防止新增标签误触
+ ])
},
- },
-};
+ created () {
+ this.DC = global.DC
+ },
+ watch: {
+ viewer: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (this.titlesetLayerFlag == false && newCode != null) {
+ var that = this
+
+ that.tilesetLayer = new that.DC.TilesetLayer('tilesetLayer')
+ that.viewer.addLayer(that.tilesetLayer)
+ that.tileset = new that.DC.Tileset('/mx/tileset.json', {
+ luminanceAtZenith: 0.3,
+ shadows: that.DC.Namespace.Cesium.ShadowMode.DISABLED
+ })
+ that.tilesetLayer.addOverlay(that.tileset)
+ that.tilesetLayer.show = false
+
+ that.silhouetteBlue =
+ that.DC.Namespace.Cesium.PostProcessStageLibrary.createEdgeDetectionStage()
+ that.silhouetteBlue.uniforms.color =
+ that.DC.Namespace.Cesium.Color.fromBytes(9, 162, 40)
+ that.silhouetteBlue.uniforms.length = 0.01
+ that.silhouetteBlue.selected = []
+
+ that.viewer.scene.postProcessStages.add(
+ that.DC.Namespace.Cesium.PostProcessStageLibrary.createSilhouetteStage(
+ [that.silhouetteBlue]
+ )
+ )
+
+ that.vecLayer = that.viewer.imageryLayers.addImageryProvider(
+ new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
+ type: 'wmts',
+ layer: 'vec',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'w',
+ show: true,
+ maximumLevel: 18
+ })
+ )
+
+ that.cvaLayer = that.viewer.imageryLayers.addImageryProvider(
+ new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
+ type: 'wmts',
+ layer: 'cva',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'w',
+ show: true,
+ maximumLevel: 18
+ })
+ )
+
+ var highlighted = {
+ feature: undefined,
+ originalColor: new that.DC.Namespace.Cesium.Color()
+ }
+
+ var selected = {
+ feature: undefined,
+ originalColor: new that.DC.Namespace.Cesium.Color()
+ }
+
+ const videoLayer = new that.DC.CameraVideoLayer('video-layer').addTo(
+ that.viewer
+ )
+
+ const cameraVideo = new that.DC.CameraVideo(
+ new that.DC.Position(114.03935976, 27.62939045, 100.25, 4.2, -90),
+ document.getElementById('video')
+ )
+ cameraVideo.setStyle({
+ fov: 30,
+ far: 120,
+ near: 1,
+ aspectRatio: 1.3,
+ alpha: 0.7
+ })
+ videoLayer.addOverlay(cameraVideo)
+
+ that.tileset.on(that.DC.MouseEventType.CLICK, (e) => {
+ if (that.closeMapClick) {
+ return
+ }
+ that.viewer.scene.globe.depthTestAgainstTerrain = false
+
+ if (e.overlay && e.overlay.attr.arcName != null) {
+ this.$store.commit('CLEAR_ALL', null)
+ getDetail({
+ mechanismname: e.overlay.attr.arcName
+ }).then((res) => {
+ if (res && JSON.stringify(res.data.data) != '{}') {
+ var result = res.data.data
+
+ var imgArr = result.tpurl.split(',')
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', result.codeurl)
+ this.$store.commit('SET_POINTPOSITION', [
+ Number(e.wgs84Position.lng),
+ Number(e.wgs84Position.lat),
+ Number(e.wgs84Position.alt),
+ Number(0),
+ Number(0),
+ Number(0)
+ ])
+ this.$store.commit('SET_STATENAME', result.mechanismname)
+ this.$store.commit('SET_SITENAME', result.address)
+ this.$store.commit('SET_TELEPHONE', result.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', result.introduce)
+ this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+ if (result.videourl && result.videourl != '') {
+ this.$store.commit('SET_MONITORURL', result.videourl)
+ }
+ if (result.jx != undefined && result.jx != '') {
+ var tabOne = res.data.data[0].jx.split(',')
+ this.$store.commit('SET_TEACHLIST', tabOne)
+ } else {
+ this.$store.commit('SET_TEACHLIST', [])
+ }
+
+ if (result.sh != undefined && result.sh != '') {
+ var tabTwo = res.data.data[0].sh.split(',')
+ this.$store.commit('SET_LIVELIST', tabTwo)
+ } else {
+ this.$store.commit('SET_LIVELIST', [])
+ }
+
+ // 定制化窗体
+ // eslint-disable-next-line no-unused-vars
+ var popup = new that.DC.DivForms(that.viewer, {
+ domId: 'divFormsDomBox',
+ position: [
+ that.DC.Transform.transformWGS84ToCartesian(
+ new that.DC.Position(
+ Number(e.wgs84Position.lng),
+ Number(e.wgs84Position.lat),
+ Number(e.wgs84Position.alt)
+ )
+ )
+ ]
+ })
+
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', true)
+ }
+ })
+
+ this.viewer.flyToPosition(
+ new this.DC.Position(
+ Number(e.wgs84Position.lng + 0.00070806),
+ Number(e.wgs84Position.lat - 0.00261205),
+ 300,
+ Number(-9),
+ Number(-34.54),
+ Number(0)
+ )
+ )
+ }
+ })
+
+ // that.tileset.on(that.DC.MouseEventType.MOUSE_MOVE, e => {
+ // that.silhouetteBlue.selected = []
+
+ // if (that.DC.Namespace.Cesium.defined(highlighted.feature)) {
+ // highlighted.feature.color = highlighted.originalColor
+ // highlighted.feature = undefined
+ // }
+
+ // if (e.feature !== selected.feature) {
+ // that.silhouetteBlue.selected = [e.feature]
+
+ // highlighted.feature = e.feature
+
+ // that.DC.Namespace.Cesium.Color.clone(
+ // e.feature.color,
+ // highlighted.originalColor
+ // )
+ // e.feature.color = that.DC.Namespace.Cesium.Color.fromBytes(155, 255, 175)
+ // }
+ // })
+
+ // var provider = new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ // url: 'http://www.tdtfz.com/OneMapServer/rest/services/fzsw2019/MapServer/WMTS/tile/1.0.0/fzsw2019/{Style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}',
+ // layer: 'fzsw2019',
+ // style: 'default',
+ // tileMatrixSetID: 'default028mm',
+ // format: 'image/jpgpng',
+ // tilingScheme: new that.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // maximumLevel: 19,
+ // tileMatrixLabels: [
+ // '0',
+ // '1',
+ // '2',
+ // '3',
+ // '4',
+ // '5',
+ // '6',
+ // '7',
+ // '8',
+ // '9',
+ // '10',
+ // '11',
+ // '12',
+ // '13',
+ // '14',
+ // '15',
+ // '16',
+ // '17',
+ // '18',
+ // '19'
+ // ]
+ // })
+
+ var provider =
+ new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: '/wp/{z}/{x}/{y}.png',
+ fileExtension: 'png'
+ // minimumLevel: 19
+ })
+
+ var baseProvider =
+ new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: '/base/{z}/{x}/{y}.png',
+ fileExtension: 'png'
+ })
+
+ // that.baseLayer = that.viewer.imageryLayers.addImageryProvider(baseProvider)
+ that.newLayer =
+ that.viewer.imageryLayers.addImageryProvider(provider)
+
+ that.wallLayer = new that.DC.VectorLayer('wallLayer')
+ // that.viewer.addLayer(that.wallLayer)
+
+ that.wallArr.forEach((item) => {
+ item = item.join(',')
+ })
+ that.wallArr = that.wallArr.join(';')
+ const wall = new that.DC.Wall(that.wallArr)
+ wall.setStyle({
+ material: new that.DC.WallTrailMaterialProperty({
+ color: that.DC.Namespace.Cesium.Color.fromBytes(0, 142, 255, 150),
+ // color: that.DC.Color.CYAN,
+ speed: 10
+ })
+ })
+ // that.wallLayer.addOverlay(wall)
+
+ // that.viewer.camera.setView({
+ // // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.03928791, 27.62954732, 400.0),
+ // orientation: {
+ // // 指向
+ // heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // // 视角
+ // pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ // roll: 0.0
+ // }
+ // })
+
+ // setTimeout(() => {
+ // that.viewer.camera.flyTo({
+ // // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.0351, 27.6314, 200.0),
+ // duration: 5,
+ // complete: () => {
+ // that.viewer.camera.flyTo({
+ // // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ // destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(114.0351, 27.6314, 200.0),
+ // orientation: {
+ // // 指向
+ // heading: that.DC.Namespace.Cesium.Math.toRadians(108),
+ // // 视角
+ // pitch: that.DC.Namespace.Cesium.Math.toRadians(-26.46),
+ // roll: 0.0
+ // }
+ // })
+ // }
+ // })
+ // }, 400)
+ that.titlesetLayerFlag = true
+
+ that.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ that.mapCenter[0],
+ that.mapCenter[1],
+ that.mapCenter[2]
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+
+ // 最小
+ that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 220
+ // 最大
+ that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 400
+
+ // 设置相机缩小时的速率
+ that.viewer.scene.screenSpaceCameraController._minimumZoomRate = 2000
+ // 设置相机放大时的速率
+ that.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000
+ // 视角平移
+ that.viewer.scene.screenSpaceCameraController.enableRotate = true
+ // 视角缩放
+ that.viewer.scene.screenSpaceCameraController.enableZoom = true
+ // 视角旋转
+ that.viewer.scene.screenSpaceCameraController.enableTilt = false
+
+ axios
+ .get(
+ 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/lxxqwxq/MapServer/0/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson'
+ )
+ .then((resultData) => {
+ resultData.data.features.forEach((item) => {
+ item.geometry.rings[0].forEach((it) => {
+ it = it.join(',')
+ })
+
+ item.geometry.rings[0] = item.geometry.rings[0].join(';')
+
+ const polygon = new that.DC.Polygon(item.geometry.rings[0])
+ polygon.attr = item.attributes
+
+ polygon.setStyle({
+ material: that.DC.Namespace.Cesium.Color.fromBytes(
+ 255,
+ 255,
+ 255,
+ 1
+ )
+ })
+
+ that.areaLayer.addOverlay(polygon)
+ })
+
+ that.areaLayer.show = true
+ })
+
+ var select = {
+ overlay: undefined,
+ color: undefined
+ }
+
+ that.viewer.on(that.DC.MouseEventType.MOUSE_MOVE, (e) => {
+ if (that.closeMapClick) {
+ return
+ }
+ if (e.overlay != undefined && e.layer.id == 'areaLayer') {
+ if (select.overlay != undefined) {
+ if (e.overlay != select.overlay) {
+ select.overlay.setStyle({
+ material: select.color,
+ outline: false
+ })
+
+ select.overlay = undefined
+ select.color = undefined
+ }
+ }
+
+ if (select.overlay == undefined) {
+ select.overlay = e.overlay
+
+ select.color = e.overlay._style.material
+ select.overlay.setStyle({
+ outline: true,
+ outlineColor: that.DC.Namespace.Cesium.Color.fromBytes(
+ 3,
+ 255,
+ 13,
+ 255
+ ), // 边框颜色
+ outlineWidth: 10, // 边框大小，
+ height: 0.01,
+ material: that.DC.Namespace.Cesium.Color.fromBytes(
+ 108,
+ 245,
+ 113,
+ 158
+ )
+ })
+ }
+ } else {
+ if (select.overlay != undefined) {
+ select.overlay.setStyle({
+ material: select.color,
+ outline: false
+ })
+
+ select.overlay = undefined
+ select.color = undefined
+ }
+ }
+ })
+
+ that.viewer.on(that.DC.MouseEventType.CLICK, (e) => {
+ if (that.closeMapClick) {
+ return
+ }
+ if (e.overlay != undefined && e.layer.id == 'areaLayer') {
+ var rid =
+ e.overlay.attr['楼栋号'] == '8栋'
+ ? '9栋'
+ : e.overlay.attr['楼栋号'] == '9栋'
+ ? '8栋'
+ : e.overlay.attr['楼栋号']
+ this.$store.commit('CLEAR_ALL', null)
+ getDetail({ mechanismname: '香琴湾' + rid }).then((res) => {
+ that.viewer.scene.globe.depthTestAgainstTerrain = false
+ var result = res.data.data
+
+ var imgArr = result.tpurl.split(',')
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', result.codeurl)
+ this.$store.commit('SET_POINTPOSITION', [
+ Number(e.wgs84Position.lng),
+ Number(e.wgs84Position.lat),
+ Number(e.wgs84Position.alt),
+ Number(0),
+ Number(0),
+ Number(0)
+ ])
+ this.$store.commit('SET_STATENAME', result.mechanismname)
+ this.$store.commit('SET_SITENAME', result.address)
+ this.$store.commit('SET_TELEPHONE', result.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', result.introduce)
+ this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+ if (result.videourl && result.videourl != '') {
+ this.$store.commit('SET_MONITORURL', result.videourl)
+ }
+ if (result.jx != undefined && result.jx != '') {
+ var tabOne = res.data.data[0].jx.split(',')
+ this.$store.commit('SET_TEACHLIST', tabOne)
+ } else {
+ this.$store.commit('SET_TEACHLIST', [])
+ }
+
+ if (result.sh != undefined && result.sh != '') {
+ var tabTwo = res.data.data[0].sh.split(',')
+ this.$store.commit('SET_LIVELIST', tabTwo)
+ } else {
+ this.$store.commit('SET_LIVELIST', [])
+ }
+
+ // 定制化窗体
+ // eslint-disable-next-line no-unused-vars
+ var popup = new that.DC.DivForms(that.viewer, {
+ domId: 'divFormsDomBox',
+ position: [
+ that.DC.Transform.transformWGS84ToCartesian(
+ new that.DC.Position(
+ Number(e.wgs84Position.lng),
+ Number(e.wgs84Position.lat),
+ Number(e.wgs84Position.alt)
+ )
+ )
+ ]
+ })
+
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', true)
+ })
+
+ this.viewer.flyToPosition(
+ new this.DC.Position(
+ Number(e.wgs84Position.lng),
+ Number(e.wgs84Position.lat),
+ 300,
+ Number(0),
+ Number(-90),
+ Number(0)
+ ),
+ () => { },
+ 0
+ )
+ }
+ })
+
+ document.querySelector('.dc-zoom-controller').children[1].onclick =
+ function () {
+ if (that.dimensionValue == '真三维') {
+ that.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ that.mapCenter[0],
+ that.mapCenter[1],
+ 220.0
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(-9),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-34.54),
+ roll: 0.0
+ }
+ })
+ } else {
+ that.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ that.mapCenter[0],
+ that.mapCenter[1],
+ 400.0
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+ }
+
+ document.querySelector('.dc-zoom-controller').children[2].onclick =
+ function () {
+ if (
+ that.dimensionValue != undefined &&
+ that.dimensionValue != '真三维'
+ ) {
+ const height = Math.ceil(
+ that.viewer.camera.positionCartographic.height
+ )
+
+ if (height <= 250) {
+ that.viewer.camera.setView({
+ destination:
+ that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 280
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+
+ if (height > 250 && height <= 310) {
+ that.viewer.camera.setView({
+ destination:
+ that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 340
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+
+ if (height > 310 && height < 370) {
+ that.viewer.camera.setView({
+ destination:
+ that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 400
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+ }
+ }
+
+ document.querySelector('.dc-zoom-controller').children[0].onclick =
+ function () {
+ if (
+ that.dimensionValue != undefined &&
+ that.dimensionValue != '真三维'
+ ) {
+ const height = Math.ceil(
+ that.viewer.camera.positionCartographic.height
+ )
+
+ if (height > 370) {
+ that.viewer.camera.setView({
+ destination:
+ that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 340
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+
+ return
+ }
+
+ if (height > 310) {
+ that.viewer.camera.setView({
+ destination:
+ that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 280
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+
+ return
+ }
+
+ if (height > 250) {
+ that.viewer.camera.setView({
+ destination:
+ that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 220
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+ }
+ }
+
+ that.viewer.on(that.DC.SceneEventType.CAMERA_CHANGED, () => {
+ if (
+ that.dimensionValue != undefined &&
+ that.dimensionValue != '真三维'
+ ) {
+ const height = Math.ceil(
+ that.viewer.camera.positionCartographic.height
+ )
+
+ that.viewer.camera.setView({
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+
+ if (height <= 250) {
+ that.viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 220
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+
+ if (height > 250 && height <= 310) {
+ that.viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 280
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+
+ if (height > 310 && height <= 370) {
+ that.viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 340
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+
+ if (height > 370) {
+ that.viewer.camera.setView({
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromRadians(
+ that.viewer.camera.positionCartographic.longitude,
+ that.viewer.camera.positionCartographic.latitude,
+ 400
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ }
+ }
+ })
+ }
+ }
+ }
+ },
+ methods: {
+ // openPopups(lng, lat, alt) {
+ // var popup = new that.DC.DivForms(that.viewer, {
+ // domId: "divFormsDomBox",
+ // position: [
+ // that.DC.Transform.transformWGS84ToCartesian(
+ // new that.DC.Position(Number(lng), Number(lat), Number(alt))
+ // ),
+ // ],
+ // });
+ // },
+ dimensionChange () {
+ var that = this
+ that.$store.commit('SET_TWOORTHREE', that.dimensionValue)
+ if (that.dimensionValue == '真三维') {
+ // that.wallLayer.show = false
+ that.areaLayer.show = false
+ that.viewer.imageryLayers.remove(that.newLayer)
+ that.newLayer = null
+ // that.viewer.imageryLayers.remove(that.baseLayer)
+ that.baseLayer = null
+ // that.vecLayer = that.viewer.imageryLayers.addImageryProvider(new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ // url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
+ // type: 'wmts',
+ // layer: 'vec',
+ // style: 'default',
+ // format: 'tiles',
+ // tileMatrixSetID: 'w',
+ // show: true,
+ // maximumLevel: 18
+ // }))
+
+ // that.cvaLayer = that.viewer.imageryLayers.addImageryProvider(new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ // url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
+ // type: 'wmts',
+ // layer: 'cva',
+ // style: 'default',
+ // format: 'tiles',
+ // tileMatrixSetID: 'w',
+ // show: true,
+ // maximumLevel: 18
+ // }))
+ that.silhouetteBlue.selected = []
+ that.tilesetLayer.show = true
+ // 最小
+ that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1.0
+ // 最大
+ that.viewer.scene.screenSpaceCameraController.maximumZoomDistance =
+ Number.POSITIVE_INFINITY
+ // 视角旋转
+ that.viewer.scene.screenSpaceCameraController.enableTilt = true
+ // 115.877863,28.741661
+ that.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ that.mapCenter[0],
+ that.mapCenter[1],
+ 220.0
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(-9),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-34.54),
+ roll: 0.0
+ }
+ })
+ } else {
+ that.tilesetLayer.show = false
+ // that.viewer.imageryLayers.remove(that.vecLayer)
+ // that.vecLayer = null
+ // that.viewer.imageryLayers.remove(that.cvaLayer)
+ // that.cvaLayer = null
+ that.areaLayer.show = true
+
+ // var provider = new that.DC.Namespace.Cesium.ArcGisMapServerImageryProvider({
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/PingXiang25DMapQP/MapServer'
+ // })
+
+ var provider = new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: '/wp/{z}/{x}/{y}.png',
+ fileExtension: 'png'
+ })
+
+ var baseProvider =
+ new that.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: '/base/{z}/{x}/{y}.png',
+ fileExtension: 'png'
+ })
+
+ // that.baseLayer = that.viewer.imageryLayers.addImageryProvider(baseProvider)
+ that.newLayer = that.viewer.imageryLayers.addImageryProvider(provider)
+
+ // that.wallLayer.show = true
+
+ that.viewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ that.mapCenter[0],
+ that.mapCenter[1],
+ 400.0
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
+ // 最小
+ that.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 220
+ // 最大
+ that.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 400
+ // 视角旋转
+ that.viewer.scene.screenSpaceCameraController.enableTilt = false
+ }
+ }
+ }
+}
</script>
<style lang="scss" scoped>
.dimension-cut {
- position: fixed;
- top: 100px;
- right: 10px;
- width: auto;
- // height: 40px;
- z-index: 1;
+ position: fixed;
+ top: 100px;
+ right: 10px;
+ width: auto;
+ // height: 40px;
+ z-index: 1;
}
</style>
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index f1a6e25..1553ac3 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,322 +1,315 @@
<template>
- <div>
- <div id="map_popup_content">
- <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
- <div style="width: 100%; height: 100%">
- <div class="divForms divForms-theme">
- <div class="divForms-wrap">
- <div class="area">
- <div class="arrow-lt"></div>
- <div class="b-t"></div>
- <div class="b-r"></div>
- <div class="b-b"></div>
- <div class="b-l"></div>
- <div class="arrow-rb"></div>
- <div class="label-wrap">
- <div class="title">
- {{ stateName }}
- <img
- v-show="introduceText != null && introduceText != ''"
- @click="audioPlay"
- class="audio-control"
- src="/img/navicon/audio.png"
- alt
- />
- <img
- @click="closeMapPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="label-content">
- <div class="arc-bcg">
- <img :src="popupBgUrl" alt />
- </div>
- <div
- v-show="siteName != null && siteName != ''"
- class="site"
- >
- <strong>地址：</strong>
- {{ siteName }}
- </div>
- <div
- v-show="telephone != null && telephone != ''"
- class="phone"
- >
- <strong>电话：</strong>
- {{ telephone }}
- </div>
- <div
- v-show="introduceText != null && introduceText != ''"
- class="introduce"
- >
- <p ref="DomIntroduceText">
- <strong>介绍：</strong>
- <span v-html="introduceText"></span>
- </p>
- </div>
- <div class="popup-nav">
- <ul>
- <li @click="comeHereClick">
- <i class="popup-icon come-nav deblurring"></i>
- 到这
- </li>
- <li @click="getToHereClick">
- <i class="popup-icon start-nav deblurring"></i>
- 出发
- </li>
- <li v-show="false" @click="qrCodeClick">
- <i class="popup-icon qr-code-nav deblurring"></i>
- 二维码
- </li>
- <li @click="imgsClick">
- <i class="popup-icon atlas-nav deblurring"></i>
- 图集
- </li>
- <li
- v-show="panoramaUrl != null && panoramaUrl != ''"
- @click="panoramaClick"
- >
- <i class="popup-icon live-action-nav deblurring"></i>
- 实景
- </li>
- <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
- <li v-show="false" @click="monitorClick">
- <i class="popup-icon monitor-nav deblurring"></i>
- 监控
- </li>
- </ul>
- </div>
- <div
- v-show="teachList.length > 0 || liveList.length > 0"
- class="arc-box"
- >
- <ul class="tab-btn">
- <li
- v-show="teachList.length > 0"
- :class="{ on: tabBtnFlag == '教学科研行政' }"
- @click="tabBtnClick('教学科研行政')"
- >
- 教学科研行政
- </li>
- <li
- v-show="liveList.length > 0"
- :class="{ on: tabBtnFlag == '生活服务' }"
- @click="tabBtnClick('生活服务')"
- >
- 生活服务
- </li>
- </ul>
- <div class="btm-content">
- <div :class="{ on: tabBtnFlag == '教学科研行政' }">
- <ul>
- <li
- v-for="(item, index) in teachList"
- :key="index"
- @click="mechanismDetailPopup(0, item)"
- >
- <i
- class="popup-icon location-icon deblurring"
- ></i>
- {{ item }}
- </li>
- </ul>
+ <div>
+ <div id="map_popup_content">
+ <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
+ <div style="width: 100%; height: 100%">
+ <div class="divForms divForms-theme">
+ <div class="divForms-wrap">
+ <div class="area">
+ <div class="arrow-lt"></div>
+ <div class="b-t"></div>
+ <div class="b-r"></div>
+ <div class="b-b"></div>
+ <div class="b-l"></div>
+ <div class="arrow-rb"></div>
+ <div class="label-wrap">
+ <div class="title">
+ {{ stateName }}
+ <img
+ v-show="introduceText != null && introduceText != ''"
+ @click="audioPlay"
+ class="audio-control"
+ src="/img/navicon/audio.png"
+ alt
+ />
+ <img
+ @click="closeMapPopupBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="label-content">
+ <div class="arc-bcg">
+ <img :src="popupBgUrl" alt />
+ </div>
+ <div
+ v-show="siteName != null && siteName != ''"
+ class="site"
+ >
+ <strong>地址：</strong>
+ {{ siteName }}
+ </div>
+ <div
+ v-show="telephone != null && telephone != ''"
+ class="phone"
+ >
+ <strong>电话：</strong>
+ {{ telephone }}
+ </div>
+ <div
+ v-show="introduceText != null && introduceText != ''"
+ class="introduce"
+ >
+ <p ref="DomIntroduceText">
+ <strong>介绍：</strong>
+ <span v-html="introduceText"></span>
+ </p>
+ </div>
+ <div class="popup-nav">
+ <ul>
+ <li @click="comeHereClick">
+ <i class="popup-icon come-nav deblurring"></i>
+ 到这
+ </li>
+ <li @click="getToHereClick">
+ <i class="popup-icon start-nav deblurring"></i>
+ 出发
+ </li>
+ <li v-show="false" @click="qrCodeClick">
+ <i class="popup-icon qr-code-nav deblurring"></i>
+ 二维码
+ </li>
+ <li @click="imgsClick">
+ <i class="popup-icon atlas-nav deblurring"></i>
+ 图集
+ </li>
+ <li
+ v-show="panoramaUrl != null && panoramaUrl != ''"
+ @click="panoramaClick"
+ >
+ <i
+ class="popup-icon live-action-nav deblurring"
+ ></i>
+ 实景
+ </li>
+ <!-- v-show="panoramaUrl != null && panoramaUrl != ''" -->
+ <li v-show="false" @click="monitorClick">
+ <i class="popup-icon monitor-nav deblurring"></i>
+ 监控
+ </li>
+ </ul>
+ </div>
+ <div
+ v-show="teachList.length > 0 || liveList.length > 0"
+ class="arc-box"
+ >
+ <ul class="tab-btn">
+ <li
+ v-show="teachList.length > 0"
+ :class="{ on: tabBtnFlag == '教学科研行政' }"
+ @click="tabBtnClick('教学科研行政')"
+ >教学科研行政</li>
+ <li
+ v-show="liveList.length > 0"
+ :class="{ on: tabBtnFlag == '生活服务' }"
+ @click="tabBtnClick('生活服务')"
+ >生活服务</li>
+ </ul>
+ <div class="btm-content">
+ <div :class="{ on: tabBtnFlag == '教学科研行政' }">
+ <ul>
+ <li
+ v-for="(item, index) in teachList"
+ :key="index"
+ @click="mechanismDetailPopup(0, item)"
+ >
+ <i
+ class="popup-icon location-icon deblurring"
+ ></i>
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ <div :class="{ on: tabBtnFlag == '生活服务' }">
+ <ul>
+ <li
+ v-for="(item, index) in liveList"
+ :key="index"
+ @click="mechanismDetailPopup(1, item)"
+ >
+ <i
+ class="popup-icon location-icon deblurring"
+ ></i>
+ {{ item }}
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="btm-box"></div>
+ </div>
+ </div>
+ </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
</div>
- <div :class="{ on: tabBtnFlag == '生活服务' }">
- <ul>
- <li
- v-for="(item, index) in liveList"
- :key="index"
- @click="mechanismDetailPopup(1, item)"
- >
- <i
- class="popup-icon location-icon deblurring"
- ></i>
- {{ item }}
- </li>
- </ul>
- </div>
- </div>
+ <div class="arrow"></div>
</div>
- <div class="btm-box"></div>
- </div>
</div>
- </div>
- <div class="b-t-l"></div>
- <div class="b-b-r"></div>
</div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
- <div
- v-if="panoramaPopup"
- class="panorama-dom"
- :class="{ 'change-full': fullscreen }"
- id="PanoramaBox"
- >
- <div style="width: 100%; height: 100%">
- <div class="panorama-container">
- <div class="panorama-wrap">
- <div
- class="content-wrap"
+ <div
+ v-if="panoramaPopup"
+ class="panorama-dom"
:class="{ 'change-full': fullscreen }"
- id="FullScreenBox"
- >
- <div class="title">
- {{ stateName }}
- <img
- @click="screen"
- class="full-srceen-btn"
- :src="fullScreenUrl"
- alt
- />
- <img
- @click="closePanoramaPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="content">
- <iframe
- allowfullscreen="true"
- :src="panoramaUrl"
- frameborder="0"
- ></iframe>
- </div>
- </div>
- </div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
-
- <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
- <div style="width: 100%; height: 100%">
- <div class="monitor-container">
- <div class="monitor-wrap">
- <div class="content-wrap">
- <div class="title">
- {{ stateName }}
- <img
- @click="closeMonitorPopupBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="content">
- <video :src="monitorUrl" controls autoplay></video>
- </div>
- </div>
- </div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
-
- <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
- <div style="width: 100%; height: 100%">
- <div class="divForms divForms-theme">
- <div class="divForms-wrap">
- <div class="area">
- <div class="arrow-lt"></div>
- <div class="b-t"></div>
- <div class="b-r"></div>
- <div class="b-b"></div>
- <div class="b-l"></div>
- <div class="arrow-rb"></div>
- <div class="label-wrap">
- <div class="title">
- 地图标记
- <img
- @click="closeAddTagBox"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="add-tag-content">
- <div>
- <el-input
- v-model="addTagName"
- placeholder="请输入标签名称"
- ></el-input>
+ id="PanoramaBox"
+ >
+ <div style="width: 100%; height: 100%">
+ <div class="panorama-container">
+ <div class="panorama-wrap">
+ <div
+ class="content-wrap"
+ :class="{ 'change-full': fullscreen }"
+ id="FullScreenBox"
+ >
+ <div class="title">
+ {{ stateName }}
+ <img
+ @click="screen"
+ class="full-srceen-btn"
+ :src="fullScreenUrl"
+ alt
+ />
+ <img
+ @click="closePanoramaPopupBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="content">
+ <iframe
+ allowfullscreen="true"
+ :src="panoramaUrl"
+ frameborder="0"
+ ></iframe>
+ </div>
+ </div>
+ </div>
+ <div class="arrow"></div>
</div>
- <div>
- <el-button type="primary" @click="createTag"
- >生成标记</el-button
- >
+ </div>
+ </div>
+
+ <div v-if="monitorPopup" class="monitor-dom" id="MonitorBox">
+ <div style="width: 100%; height: 100%">
+ <div class="monitor-container">
+ <div class="monitor-wrap">
+ <div class="content-wrap">
+ <div class="title">
+ {{ stateName }}
+ <img
+ @click="closeMonitorPopupBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="content">
+ <video :src="monitorUrl" controls autoplay></video>
+ </div>
+ </div>
+ </div>
+ <div class="arrow"></div>
</div>
- </div>
</div>
- </div>
- <div class="b-t-l"></div>
- <div class="b-b-r"></div>
</div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
- <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
- <div style="width: 100%; height: 100%">
- <div class="divForms divForms-theme">
- <div class="divForms-wrap">
- <div class="area">
- <div class="arrow-lt"></div>
- <div class="b-t"></div>
- <div class="b-r"></div>
- <div class="b-b"></div>
- <div class="b-l"></div>
- <div class="arrow-rb"></div>
- <div class="label-wrap">
- <div class="title">
- {{ nowlabelLayerData.name }} 二维码分享
- <img
- @click="closelabelLayerid"
- class="close-box"
- src="/img/navicon/close.png"
- alt
- />
- </div>
- <div class="add-tag-content" style="height: 250px">
- <!-- data:image/png;base64, -->
- <img
- :src="nowlabelLayerData.qrcode"
- alt=""
- class="labelLayeridewm"
- style="width:250px,height:250px"
- />
- </div>
+ <div v-if="addTagPopup" class="divForms-dom" id="AddTagBox">
+ <div style="width: 100%; height: 100%">
+ <div class="divForms divForms-theme">
+ <div class="divForms-wrap">
+ <div class="area">
+ <div class="arrow-lt"></div>
+ <div class="b-t"></div>
+ <div class="b-r"></div>
+ <div class="b-b"></div>
+ <div class="b-l"></div>
+ <div class="arrow-rb"></div>
+ <div class="label-wrap">
+ <div class="title">
+ 地图标记
+ <img
+ @click="closeAddTagBox"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="add-tag-content">
+ <div>
+ <el-input v-model="addTagName" placeholder="请输入标签名称"></el-input>
+ </div>
+ <div>
+ <el-button type="primary" @click="createTag">生成标记</el-button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
+ </div>
+ <div class="arrow"></div>
+ </div>
</div>
- </div>
- <div class="b-t-l"></div>
- <div class="b-b-r"></div>
</div>
- <div class="arrow"></div>
- </div>
- </div>
- </div>
- </div>
- <!-- 二维码弹框相关 -->
- <el-dialog
- title="场景二维码"
- :visible.sync="QRCodeFlag"
- :modal="false"
- :modal-append-to-body="false"
- width="44%"
- >
- <div style="margin: 0; position: relative; width: 100%; height: 352px">
- <img
- width="260"
- :src="pupupQRUrl"
- alt
- style="
+ <div v-if="labelLayerDataShow" class="divForms-dom" id="labelLayerid">
+ <div style="width: 100%; height: 100%">
+ <div class="divForms divForms-theme">
+ <div class="divForms-wrap">
+ <div class="area">
+ <div class="arrow-lt"></div>
+ <div class="b-t"></div>
+ <div class="b-r"></div>
+ <div class="b-b"></div>
+ <div class="b-l"></div>
+ <div class="arrow-rb"></div>
+ <div class="label-wrap">
+ <div class="title">
+ {{ nowlabelLayerData.name }} 二维码分享
+ <img
+ @click="closelabelLayerid"
+ class="close-box"
+ src="/img/navicon/close.png"
+ alt
+ />
+ </div>
+ <div class="add-tag-content" style="height: 250px">
+ <!-- data:image/png;base64, -->
+ <img
+ :src="nowlabelLayerData.qrcode"
+ alt
+ class="labelLayeridewm"
+ style="width: 250px; height: 250px"
+ />
+ </div>
+ </div>
+ </div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
+ </div>
+ <div class="arrow"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 二维码弹框相关 -->
+ <el-dialog
+ title="场景二维码"
+ :visible.sync="QRCodeFlag"
+ :modal="false"
+ :modal-append-to-body="false"
+ width="44%"
+ >
+ <div style="margin: 0; position: relative; width: 100%; height: 352px">
+ <img
+ width="260"
+ :src="pupupQRUrl"
+ alt
+ style="
position: absolute;
top: 0;
left: 0;
@@ -324,434 +317,432 @@
bottom: 0;
margin: auto;
"
- />
- <div
- style="
+ />
+ <div
+ style="
position: absolute;
bottom: 0;
width: 100%;
line-height: 36px;
text-align: center;
"
- >
- (右键另存为图片)
- </div>
- </div>
- </el-dialog>
+ >(右键另存为图片)</div>
+ </div>
+ </el-dialog>
- <el-image
- v-show="false"
- style="width: 100px; height: 100px"
- :src="popupImgAtlas[0]"
- :preview-src-list="popupImgAtlas"
- ref="popupImgs"
- ></el-image>
- </div>
+ <el-image
+ v-show="false"
+ style="width: 100px; height: 100px"
+ :src="popupImgAtlas[0]"
+ :preview-src-list="popupImgAtlas"
+ ref="popupImgs"
+ ></el-image>
+ </div>
</template>
<script>
-import { mapGetters } from "vuex";
-import { getMechanismDetail } from "@/api/pc/public/arc";
-import { setlabel } from "@/api/pc/label";
+import { mapGetters } from 'vuex'
+import { getMechanismDetail } from '@/api/pc/public/arc'
+import { setlabel } from '@/api/pc/label'
export default {
- name: "mapPopup",
- data() {
- return {
- DC: null,
- tabBtnFlag: "教学科研行政",
- QRCodeFlag: false,
- audioSource: "",
- audioFlag: false,
- audioCourse: false,
- audioSynth: null,
- audioMsg: null,
- fullscreen: false,
- fullScreenUrl: "/img/icon/bigScreen.png",
- addTagName: "",
- addTagLayer: null,
- };
- },
- computed: {
- ...mapGetters([
- "viewer",
- "popupBgUrl",
- "pupupQRUrl",
- // 终点
- "terminus",
- // 起点
- "startingPoint",
- // 点信息
- "pointPosition",
- // 点名称
- "stateName",
- // 地址
- "siteName",
- // 电话
- "telephone",
- // 介绍
- "introduceText",
- // 详情弹框显示关闭
- "detailsPopup",
- // 全景地址
- "panoramaUrl",
- // 全景弹框显示关闭
- "panoramaPopup",
- // 监控地址
- "monitorUrl",
- // 监控弹框显示关闭
- "monitorPopup",
-
- "popupImgAtlas",
- // 教学
- "teachList",
- // 科研
- "liveList",
- // 校区内导航的显示关闭
- "campusNavFlag",
- "addTagPopup",
- "addTagPosition",
- //自定义标签弹窗
- "labelLayerDataShow",
- "nowlabelLayerData",
- ]),
- },
- created() {
- this.DC = global.DC;
-
- this.audioSynth = window.speechSynthesis;
- this.audioMsg = new window.SpeechSynthesisUtterance();
-
- this.audioMsg.onend = function () {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- };
- },
- mounted() {},
- watch: {
- addTagPopup() {
- if (!this.addTagPopup) {
- // console.log("取消", "see");
- this.$store.commit("set_closeMapClick", false);
- }
- },
- introduceText: {
- immediate: true,
- handler(newQuestion, oldQuestion) {
- this.audioSource = newQuestion;
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
+ name: 'mapPopup',
+ data () {
+ return {
+ DC: null,
+ tabBtnFlag: '教学科研行政',
+ QRCodeFlag: false,
+ audioSource: '',
+ audioFlag: false,
+ audioCourse: false,
+ audioSynth: null,
+ audioMsg: null,
+ fullscreen: false,
+ fullScreenUrl: '/img/icon/bigScreen.png',
+ addTagName: '',
+ addTagLayer: null
}
- },
},
- teachList: {
- immediate: true,
- handler(newCode, oldCode) {
- if (newCode.length > 0) {
- this.tabBtnFlag = "教学科研行政";
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'popupBgUrl',
+ 'pupupQRUrl',
+ // 终点
+ 'terminus',
+ // 起点
+ 'startingPoint',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 电话
+ 'telephone',
+ // 介绍
+ 'introduceText',
+ // 详情弹框显示关闭
+ 'detailsPopup',
+ // 全景地址
+ 'panoramaUrl',
+ // 全景弹框显示关闭
+ 'panoramaPopup',
+ // 监控地址
+ 'monitorUrl',
+ // 监控弹框显示关闭
+ 'monitorPopup',
+
+ 'popupImgAtlas',
+ // 教学
+ 'teachList',
+ // 科研
+ 'liveList',
+ // 校区内导航的显示关闭
+ 'campusNavFlag',
+ 'addTagPopup',
+ 'addTagPosition',
+ // 自定义标签弹窗
+ 'labelLayerDataShow',
+ 'nowlabelLayerData'
+ ])
+ },
+ created () {
+ this.DC = global.DC
+
+ this.audioSynth = window.speechSynthesis
+ this.audioMsg = new window.SpeechSynthesisUtterance()
+
+ this.audioMsg.onend = function () {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
}
- },
},
- liveList: {
- immediate: true,
- handler(newCode, oldCode) {
- if (newCode.length > 0 && this.teachList.length == 0) {
- this.tabBtnFlag = "生活服务";
+ mounted () { },
+ watch: {
+ addTagPopup () {
+ if (!this.addTagPopup) {
+ // console.log("取消", "see");
+ this.$store.commit('set_closeMapClick', false)
+ }
+ },
+ introduceText: {
+ immediate: true,
+ handler (newQuestion, oldQuestion) {
+ this.audioSource = newQuestion
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ }
+ },
+ teachList: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (newCode.length > 0) {
+ this.tabBtnFlag = '教学科研行政'
+ }
+ }
+ },
+ liveList: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (newCode.length > 0 && this.teachList.length == 0) {
+ this.tabBtnFlag = '生活服务'
+ }
+ }
+ },
+ detailsPopup: {
+ immediate: true,
+ handler (newCode, oldCode) {
+ if (newCode == false) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ } else {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ }
+ }
}
- },
},
- detailsPopup: {
- immediate: true,
- handler(newCode, oldCode) {
- if (newCode == false) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- } else {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
+ methods: {
+ screen () {
+ if (this.fullscreen) {
+ this.fullScreenUrl = '/img/icon/bigScreen.png'
+ this.fullscreen = !this.fullscreen
+
+ document.getElementById('pcElHeader').style.zIndex = 9999
+ } else {
+ this.fullScreenUrl = '/img/icon/smallScreen.png'
+ this.fullscreen = !this.fullscreen
+
+ document.getElementById('pcElHeader').style.zIndex = 9
+ }
+ },
+
+ tabBtnClick (param) {
+ this.tabBtnFlag = param
+ },
+
+ comeHereClick () {
+ this.$store.commit('SET_COMENAME', this.stateName)
+ this.$store.commit('SET_TERMINUS', this.pointPosition)
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
+ },
+
+ getToHereClick () {
+ this.$store.commit('SET_GETTONAME', this.stateName)
+ this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
+ if (this.campusNavFlag == false) {
+ this.$store.commit('SET_CAMPUSNAVFLAG', true)
+ }
+ },
+
+ qrCodeClick () {
+ this.QRCodeFlag = true
+ },
+
+ imgsClick () {
+ this.$refs.popupImgs.clickHandler()
+ },
+
+ panoramaClick () {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+
+ // eslint-disable-next-line new-cap
+ var positions = this.DC.Transform.transformWGS84ToCartesian(
+ // eslint-disable-next-line new-cap
+ new this.DC.Position.fromArray(this.pointPosition)
+ )
+ this.viewer.scene.globe.depthTestAgainstTerrain = false
+ // eslint-disable-next-line no-unused-vars
+ var panorama = new this.DC.PanoramaBox(this.viewer, {
+ domId: 'PanoramaBox',
+ position: [positions]
+ })
+
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_PANORAMAPOPUP', true)
+ },
+
+ monitorClick () {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ // eslint-disable-next-line new-cap
+ var positions = this.DC.Transform.transformWGS84ToCartesian(
+ // eslint-disable-next-line new-cap
+ new this.DC.Position.fromArray(this.pointPosition)
+ )
+ this.viewer.scene.globe.depthTestAgainstTerrain = false
+ // eslint-disable-next-line no-unused-vars
+ var monitor = new this.DC.PanoramaBox(this.viewer, {
+ domId: 'MonitorBox',
+ position: [positions]
+ })
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', true)
+ },
+
+ closeMapPopupBox () {
+ if (this.audioFlag == true) {
+ this.audioSynth.cancel()
+ this.audioFlag = false
+ this.audioCourse = false
+ }
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ },
+
+ // 新增标记相关事件
+ closeAddTagBox () {
+ this.$store.commit('SET_ADDTAGPOPUP', false)
+ },
+ closelabelLayerid () {
+ this.$store.commit('openLabelLayer', {
+ show: false
+ })
+ },
+ createTag () {
+ var that = this
+
+ // console.log(this.RemoveTheBlank(this.addTagName));
+
+ if (this.RemoveTheBlank(this.addTagName) == '') {
+ this.$message('请输入标签名称')
+ return
+ }
+
+ this.$store.commit('SET_ADDTAGPOPUP', false)
+
+ // if (this.addTagLayer == null) {
+ // this.addTagLayer = new this.DC.HtmlLayer("addTagLayer");
+ // this.viewer.addLayer(this.addTagLayer);
+ // }
+
+ // 2022.3.2对接接口
+ // 新增标签
+ const data = {
+ name: this.RemoveTheBlank(this.addTagName),
+ jd: this.addTagPosition.lng,
+ wd: this.addTagPosition.lat
+ }
+ // console.log(data);
+ setlabel(data).then((res) => {
+ console.log(res)
+ if (res.data.code == 200) {
+ doit()
+ that.$message({
+ message: '新增标签成功',
+ type: 'success'
+ })
+ } else {
+ that.$message({
+ message: '新增标签失败',
+ type: 'warning'
+ })
+ }
+ that.addTagName = ''
+ })
+ const doit = () => {
+ that.$store.dispatch('addLabelLayerIcon', {
+ // list: [data],
+ add: true
+ })
+ // const divIcon = new this.DC.DivIcon(
+ // new that.DC.Position(
+ // Number(that.addTagPosition.lng),
+ // Number(that.addTagPosition.lat),
+ // 0
+ // ),
+ // `
+ // <div class="tag-entitys-box">
+ // <div class="tag-content">
+ // ${that.addTagName}
+ // </div>
+ // <div class="tag-angle-content">
+ // <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
+ // </div>
+ // </div>
+ // `
+ // );
+ // this.addTagLayer.addOverlay(divIcon);
+ }
+ },
+
+ closePanoramaPopupBox () {
+ this.$store.commit('SET_PANORAMAURL', '')
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ },
+
+ closeMonitorPopupBox () {
+ this.$store.commit('SET_MONITORURL', '')
+ this.$store.commit('SET_MONITORPOPUP', false)
+ },
+
+ audioPlay () {
+ if (this.audioFlag == false) {
+ this.audioMsg.text = this.audioSource
+ this.audioSynth.speak(this.audioMsg)
+ this.audioFlag = true
+ this.audioCourse = true
+ } else {
+ if (this.audioCourse == true) {
+ this.audioSynth.pause()
+ this.audioCourse = false
+ } else {
+ this.audioSynth.resume()
+ this.audioCourse = true
+ }
+ }
+ },
+
+ mechanismDetailPopup (num, param) {
+ getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
+ var result = res.data.data
+ this.$store.commit('CLEAR_ALL', null)
+
+ var imgArr = result.tpurl.split(',')
+
+ this.$store.commit('SET_POPUPBGURL', imgArr[0])
+ this.$store.commit('SET_POPUPQRURL', result.codeurl)
+ this.$store.commit('SET_POINTPOSITION', [
+ Number(result.jd),
+ Number(result.wd),
+ Number(result.gd),
+ Number(result.heading),
+ Number(result.pitch),
+ Number(result.roll)
+ ])
+ this.$store.commit('SET_STATENAME', result.mechanismname)
+ this.$store.commit('SET_SITENAME', result.address)
+ this.$store.commit('SET_TELEPHONE', result.telephone)
+ this.$store.commit('SET_INTRODUCETEXT', result.introduce)
+ this.$store.commit('SET_POPUPIMGATLAS', imgArr)
+
+ if (result.videourl && result.videourl != '') {
+ this.$store.commit('SET_MONITORURL', result.videourl)
+ }
+
+ this.newPopup(result)
+ this.viewer.flyToPosition(
+ new this.DC.Position(
+ Number(result.jd),
+ Number(result.wd),
+ 300,
+ Number(result.heading),
+ Number(result.pitch),
+ Number(result.roll)
+ ),
+ function () { },
+ 3
+ )
+ })
+ },
+
+ newPopup (item) {
+ const position = this.DC.Transform.transformWGS84ToCartesian(
+ new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
+ )
+ // eslint-disable-next-line no-unused-vars
+ var popup = new this.DC.DivForms(this.viewer, {
+ domId: 'divFormsDomBox',
+ position: [position]
+ })
+
+ this.$store.commit('SET_PANORAMAPOPUP', false)
+ this.$store.commit('SET_MONITORPOPUP', false)
+ this.$store.commit('SET_DETAILSPOPUP', true)
+ },
+
+ /**
+ * 删除左右两端的空格
+ */
+ RemoveTheBlank (str) {
+ return str.replace(/(^\s*)|(\s*$)/g, '')
}
- },
- },
- },
- methods: {
- screen() {
- if (this.fullscreen) {
- this.fullScreenUrl = "/img/icon/bigScreen.png";
- this.fullscreen = !this.fullscreen;
-
- document.getElementById("pcElHeader").style.zIndex = 9999;
- } else {
- this.fullScreenUrl = "/img/icon/smallScreen.png";
- this.fullscreen = !this.fullscreen;
-
- document.getElementById("pcElHeader").style.zIndex = 9;
- }
- },
-
- tabBtnClick(param) {
- this.tabBtnFlag = param;
- },
-
- comeHereClick() {
- this.$store.commit("SET_COMENAME", this.stateName);
- this.$store.commit("SET_TERMINUS", this.pointPosition);
- if (this.campusNavFlag == false) {
- this.$store.commit("SET_CAMPUSNAVFLAG", true);
- }
- },
-
- getToHereClick() {
- this.$store.commit("SET_GETTONAME", this.stateName);
- this.$store.commit("SET_STARTINGPOINT", this.pointPosition);
- if (this.campusNavFlag == false) {
- this.$store.commit("SET_CAMPUSNAVFLAG", true);
- }
- },
-
- qrCodeClick() {
- this.QRCodeFlag = true;
- },
-
- imgsClick() {
- this.$refs.popupImgs.clickHandler();
- },
-
- panoramaClick() {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
-
- // eslint-disable-next-line new-cap
- var positions = this.DC.Transform.transformWGS84ToCartesian(
- // eslint-disable-next-line new-cap
- new this.DC.Position.fromArray(this.pointPosition)
- );
- this.viewer.scene.globe.depthTestAgainstTerrain = false;
- // eslint-disable-next-line no-unused-vars
- var panorama = new this.DC.PanoramaBox(this.viewer, {
- domId: "PanoramaBox",
- position: [positions],
- });
-
- this.$store.commit("SET_DETAILSPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", false);
- this.$store.commit("SET_PANORAMAPOPUP", true);
- },
-
- monitorClick() {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
- // eslint-disable-next-line new-cap
- var positions = this.DC.Transform.transformWGS84ToCartesian(
- // eslint-disable-next-line new-cap
- new this.DC.Position.fromArray(this.pointPosition)
- );
- this.viewer.scene.globe.depthTestAgainstTerrain = false;
- // eslint-disable-next-line no-unused-vars
- var monitor = new this.DC.PanoramaBox(this.viewer, {
- domId: "MonitorBox",
- position: [positions],
- });
- this.$store.commit("SET_PANORAMAPOPUP", false);
- this.$store.commit("SET_DETAILSPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", true);
- },
-
- closeMapPopupBox() {
- if (this.audioFlag == true) {
- this.audioSynth.cancel();
- this.audioFlag = false;
- this.audioCourse = false;
- }
- this.$store.commit("SET_DETAILSPOPUP", false);
- },
-
- // 新增标记相关事件
- closeAddTagBox() {
- this.$store.commit("SET_ADDTAGPOPUP", false);
- },
- closelabelLayerid() {
- this.$store.commit("openLabelLayer", {
- show: false,
- });
- },
- createTag() {
- var that = this;
-
- // console.log(this.RemoveTheBlank(this.addTagName));
-
- if (this.RemoveTheBlank(this.addTagName) == "") {
- this.$message("请输入标签名称");
- return;
- }
-
- this.$store.commit("SET_ADDTAGPOPUP", false);
-
- // if (this.addTagLayer == null) {
- // this.addTagLayer = new this.DC.HtmlLayer("addTagLayer");
- // this.viewer.addLayer(this.addTagLayer);
- // }
-
- //2022.3.2对接接口
- // 新增标签
- let data = {
- name: this.RemoveTheBlank(this.addTagName),
- jd: this.addTagPosition.lng,
- wd: this.addTagPosition.lat,
- };
- // console.log(data);
- setlabel(data).then((res) => {
- console.log(res);
- if (res.data.code == 200) {
- doit();
- that.$message({
- message: "新增标签成功",
- type: "success",
- });
- } else {
- that.$message({
- message: "新增标签失败",
- type: "warning",
- });
- }
- that.addTagName = "";
- });
- let doit = () => {
- that.$store.dispatch("addLabelLayerIcon", {
- // list: [data],
- add: true,
- });
- // const divIcon = new this.DC.DivIcon(
- // new that.DC.Position(
- // Number(that.addTagPosition.lng),
- // Number(that.addTagPosition.lat),
- // 0
- // ),
- // `
- // <div class="tag-entitys-box">
- // <div class="tag-content">
- // ${that.addTagName}
- // </div>
- // <div class="tag-angle-content">
- // <img src="https://map.hit.edu.cn/images/tarrow_xq.png">
- // </div>
- // </div>
- // `
- // );
- // this.addTagLayer.addOverlay(divIcon);
- };
- },
-
- closePanoramaPopupBox() {
- this.$store.commit("SET_PANORAMAURL", "");
- this.$store.commit("SET_PANORAMAPOPUP", false);
- },
-
- closeMonitorPopupBox() {
- this.$store.commit("SET_MONITORURL", "");
- this.$store.commit("SET_MONITORPOPUP", false);
- },
-
- audioPlay() {
- if (this.audioFlag == false) {
- this.audioMsg.text = this.audioSource;
- this.audioSynth.speak(this.audioMsg);
- this.audioFlag = true;
- this.audioCourse = true;
- } else {
- if (this.audioCourse == true) {
- this.audioSynth.pause();
- this.audioCourse = false;
- } else {
- this.audioSynth.resume();
- this.audioCourse = true;
- }
- }
- },
-
- mechanismDetailPopup(num, param) {
- getMechanismDetail({ num: num, mechanismName: param }).then((res) => {
- var result = res.data.data;
- this.$store.commit("CLEAR_ALL", null);
-
- var imgArr = result.tpurl.split(",");
-
- this.$store.commit("SET_POPUPBGURL", imgArr[0]);
- this.$store.commit("SET_POPUPQRURL", result.codeurl);
- this.$store.commit("SET_POINTPOSITION", [
- Number(result.jd),
- Number(result.wd),
- Number(result.gd),
- Number(result.heading),
- Number(result.pitch),
- Number(result.roll),
- ]);
- this.$store.commit("SET_STATENAME", result.mechanismname);
- this.$store.commit("SET_SITENAME", result.address);
- this.$store.commit("SET_TELEPHONE", result.telephone);
- this.$store.commit("SET_INTRODUCETEXT", result.introduce);
- this.$store.commit("SET_POPUPIMGATLAS", imgArr);
-
- if (result.videourl && result.videourl != "") {
- this.$store.commit("SET_MONITORURL", result.videourl);
- }
-
- this.newPopup(result);
- this.viewer.flyToPosition(
- new this.DC.Position(
- Number(result.jd),
- Number(result.wd),
- 300,
- Number(result.heading),
- Number(result.pitch),
- Number(result.roll)
- ),
- function () {},
- 3
- );
- });
- },
-
- newPopup(item) {
- const position = this.DC.Transform.transformWGS84ToCartesian(
- new this.DC.Position(Number(item.jd), Number(item.wd), Number(item.gd))
- );
- // eslint-disable-next-line no-unused-vars
- var popup = new this.DC.DivForms(this.viewer, {
- domId: "divFormsDomBox",
- position: [position],
- });
-
- this.$store.commit("SET_PANORAMAPOPUP", false);
- this.$store.commit("SET_MONITORPOPUP", false);
- this.$store.commit("SET_DETAILSPOPUP", true);
- },
-
- /**
- * 删除左右两端的空格
- */
- RemoveTheBlank(str) {
- return str.replace(/(^\s*)|(\s*$)/g, "");
- },
- },
-};
+ }
+}
</script>
<style>
.labelLayeridewm {
- width: 250px !important;
- height: 250px !important;
+ width: 250px !important;
+ height: 250px !important;
}
</style>
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 107f639..1a4116e 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -1,27 +1,20 @@
/* eslint-disable camelcase */
<template>
- <div
- id="viewer-container"
- style="height: 100%; width: 100%"
- @click="mapClick($event)"
- >
- <video
- id="video"
- style="position: fixed; visibility: hidden"
- muted
- autoplay
- loop
- crossorigin
- controls
- >
- <source
- src="http://dc.dvgis.cn/examples/data/demo.mp4"
- type="video/mp4"
- />
- </video>
+ <div id="viewer-container" style="height: 100%; width: 100%" @click="mapClick($event)">
+ <video
+ id="video"
+ style="position: fixed; visibility: hidden"
+ muted
+ autoplay
+ loop
+ crossorigin
+ controls
+ >
+ <source src="http://dc.dvgis.cn/examples/data/demo.mp4" type="video/mp4" />
+ </video>
- <div
- style="
+ <div
+ style="
position: fixed;
left: 4px;
bottom: 4px;
@@ -34,365 +27,537 @@
background: #2196f3ed;
z-index: 11;
"
- >
- 智慧校区
+ >智慧校区</div>
+
+ <dimension :areaLayer="areaLayer" />
+
+ <left-nav ref="leftNav"></left-nav>
+
+ <mapPopup />
+
+ <campusBuildingSearch ref="campusBuildingSearch" />
+
+ <campusNav ref="campusNavRoute" v-show="campusNavFlag" />
+
+ <search-details v-if="searchPopupFlag"></search-details>
+ <org-nav-bar v-if="orgNavBarFlag"></org-nav-bar>
+ <arc-nav-bar v-if="arcNavBarFlag"></arc-nav-bar>
+
+ <div id="eagleEyeMap" class="eagle-eye-map"></div>
</div>
-
- <dimension :areaLayer="areaLayer" />
-
- <left-nav ref="leftNav"></left-nav>
-
- <mapPopup />
-
- <campusBuildingSearch ref="campusBuildingSearch" />
-
- <campusNav ref="campusNavRoute" v-show="campusNavFlag" />
-
- <search-details v-if="searchPopupFlag"></search-details>
- <org-nav-bar v-if="orgNavBarFlag"></org-nav-bar>
- <arc-nav-bar v-if="arcNavBarFlag"></arc-nav-bar>
- </div>
</template>
<script>
-import { mapGetters } from "vuex";
-import mapPopup from "./components/mapPopup.vue";
-import campusBuildingSearch from "./components/campusBuildingSearch.vue";
-import dimension from "./components/dimension.vue";
+import { mapGetters } from 'vuex'
+import mapPopup from './components/mapPopup.vue'
+import campusBuildingSearch from './components/campusBuildingSearch.vue'
+import dimension from './components/dimension.vue'
export default {
- name: "mapBox",
- components: {
- mapPopup,
- campusBuildingSearch,
- dimension,
- },
- data() {
- return {
- DC: null,
- areaLayer: null,
- };
- },
- watch: {
- searchPopupFlag: {
- immediate: true,
- handler(newVal, oldVal) {
- if (newVal == true) {
- if (this.$route.path.indexOf("/pcLayout/default/service") != -1) {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
- }
-
- if (this.$route.path.indexOf("/orgnav") != -1) {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
- this.$store.commit("SET_ORGNAVBARTITLE", "");
- this.$store.commit("SET_ORGNAVBARLIST", []);
- this.$store.commit("SET_ORGNAVBARFLAG", false);
- }
-
- if (this.orgNavBarFlag == true) {
- this.$store.commit("SET_ORGNAVBARTITLE", "");
- this.$store.commit("SET_ORGNAVBARLIST", []);
- this.$store.commit("SET_ORGNAVBARFLAG", false);
- }
-
- if (this.$route.path.indexOf("/arc") != -1) {
- this.$store.dispatch("delVisitedViews", this.$route);
- this.$router.push("/pcLayout/default");
- this.$store.commit("SET_ARCNAVBARTITLE", "");
- this.$store.commit("SET_ARCNAVBARCODE", "");
- this.$store.commit("SET_ARCNAVBARFLAG", false);
- }
-
- if (this.arcNavBarFlag == true) {
- this.$store.commit("SET_ARCNAVBARTITLE", "");
- this.$store.commit("SET_ARCNAVBARCODE", "");
- this.$store.commit("SET_ARCNAVBARFLAG", false);
- }
- }
- },
+ name: 'mapBox',
+ components: {
+ mapPopup,
+ campusBuildingSearch,
+ dimension
},
-
- orgNavBarFlag: {
- immediate: true,
- handler(newVal, oldVal) {
- if (newVal == true) {
- this.$store.commit("SET_SEARCHPOPUPFLAG", false);
+ data () {
+ return {
+ DC: null,
+ areaLayer: null
}
- },
},
+ watch: {
+ searchPopupFlag: {
+ immediate: true,
+ handler (newVal, oldVal) {
+ if (newVal == true) {
+ if (this.$route.path.indexOf('/pcLayout/default/service') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ }
- arcNavBarFlag: {
- immediate: true,
- handler(newVal, oldVal) {
- if (newVal == true) {
- this.$store.commit("SET_SEARCHPOPUPFLAG", false);
- }
- },
- },
- },
- computed: {
- ...mapGetters([
- "viewer",
- "popupBgUrl",
- "pupupQRUrl",
- // 终点
- "terminus",
- // 起点
- "startingPoint",
- // 点信息
- "pointPosition",
- // 点名称
- "stateName",
- // 地址
- "siteName",
- // 介绍
- "introduceText",
- // 全景地址
- "panoramaUrl",
- // 详情弹框显示关闭
- "detailsPopup",
- // 全景弹框显示关闭
- "panoramaPopup",
- // 校区内导航的显示关闭
- "campusNavFlag",
- "orgNavBarFlag",
- "arcNavBarFlag",
- "searchPopupFlag",
- ]),
- },
- mounted() {
- var that = this;
+ if (this.$route.path.indexOf('/orgnav') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ this.$store.commit('SET_ORGNAVBARTITLE', '')
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+ this.$store.commit('SET_ORGNAVBARFLAG', false)
+ }
- let viewer;
+ if (this.orgNavBarFlag == true) {
+ this.$store.commit('SET_ORGNAVBARTITLE', '')
+ this.$store.commit('SET_ORGNAVBARLIST', [])
+ this.$store.commit('SET_ORGNAVBARFLAG', false)
+ }
- that.DC = global.DC;
+ if (this.$route.path.indexOf('/arc') != -1) {
+ this.$store.dispatch('delVisitedViews', this.$route)
+ this.$router.push('/pcLayout/default')
+ this.$store.commit('SET_ARCNAVBARTITLE', '')
+ this.$store.commit('SET_ARCNAVBARCODE', '')
+ this.$store.commit('SET_ARCNAVBARFLAG', false)
+ }
- 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 initViewer() {
- viewer = new that.DC.Viewer("viewer-container", {
- contextOptions: {
- webgl: {
- stencil: true,
- preserveDrawingBuffer: true,
- },
+ if (this.arcNavBarFlag == true) {
+ this.$store.commit('SET_ARCNAVBARTITLE', '')
+ this.$store.commit('SET_ARCNAVBARCODE', '')
+ this.$store.commit('SET_ARCNAVBARFLAG', false)
+ }
+ }
+ }
},
- });
- that.createdLayers(viewer);
+ orgNavBarFlag: {
+ immediate: true,
+ handler (newVal, oldVal) {
+ if (newVal == true) {
+ this.$store.commit('SET_SEARCHPOPUPFLAG', false)
+ }
+ }
+ },
- that.$store.commit("SET_VIEWER", viewer);
+ arcNavBarFlag: {
+ immediate: true,
+ handler (newVal, oldVal) {
+ if (newVal == true) {
+ this.$store.commit('SET_SEARCHPOPUPFLAG', false)
+ }
+ }
+ }
+ },
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'popupBgUrl',
+ 'pupupQRUrl',
+ // 终点
+ 'terminus',
+ // 起点
+ 'startingPoint',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl',
+ // 详情弹框显示关闭
+ 'detailsPopup',
+ // 全景弹框显示关闭
+ 'panoramaPopup',
+ // 校区内导航的显示关闭
+ 'campusNavFlag',
+ 'orgNavBarFlag',
+ 'arcNavBarFlag',
+ 'searchPopupFlag'
+ ])
+ },
+ mounted () {
+ var that = this
- that.$refs.leftNav.initialize(viewer);
+ let viewer, eagleViewer
- // const key = '0f7c1d161d7352116a21aacf0e9f44c1'
- // const vec = that.DC.ImageryLayerFactory.createTdtImageryLayer({
- // key
- // })
- // const cva = that.DC.ImageryLayerFactory.createTdtImageryLayer({
- // key,
- // style: 'cva'
- // })
- // viewer.addBaseLayer([vec, cva])
+ that.DC = global.DC
- // const areaLayer = new that.DC.VectorLayer('areaLayer')
+ function distanceSurface () {
+ viewer.measure.distanceSurface()
+ }
- // viewer.addLayer(areaLayer)
+ function calcArea () {
+ viewer.measure.area()
+ }
- // axios.get('http://59.55.128.156:6080/arcgis/rest/services/xiajiangfhgc/MapServer/4/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson').then(resultData => {
- // resultData.data.features.forEach(item => {
- // item.geometry.rings[0].forEach(it => {
- // it = it.join(',')
- // })
+ function areaSurface () {
+ viewer.measure.areaSurface()
+ }
- // item.geometry.rings[0] = item.geometry.rings[0].join(';')
+ function calcAngle () {
+ viewer.measure.angle()
+ }
- // const polygon = new that.DC.Polygon(item.geometry.rings[0])
+ function calcModelAngle () {
+ viewer.measure.angle({
+ clampToModel: true
+ })
+ }
- // polygon.setStyle({
+ function calcHeight () {
+ viewer.measure.height()
+ }
- // material: that.DC.Namespace.Cesium.Color.fromBytes(255, 255, 255, 0)
+ function calcModelHeight () {
+ viewer.measure.height({
+ clampToModel: true
+ })
+ }
- // })
+ function calcHeading () {
+ viewer.measure.heading()
+ }
- // areaLayer.addOverlay(polygon)
- // })
- // })
+ function areaHeight () {
+ viewer.measure.areaHeight()
+ }
- // var select = {
- // overlay: undefined,
- // color: undefined
- // }
+ function calcTriangleHeight () {
+ viewer.measure.triangleHeight()
+ }
- // viewer.on(that.DC.MouseEventType.MOUSE_MOVE, e => {
- // if (e.overlay != undefined) {
- // if (select.overlay != undefined) {
- // if (e.overlay != select.overlay) {
- // select.overlay.setStyle({
- // material: select.color
- // })
+ function calcModelTriangleHeight () {
+ viewer.measure.triangleHeight({
+ clampToModel: true
+ })
+ }
- // select.overlay = undefined
- // select.color = undefined
- // }
- // }
+ function deactivate () {
+ viewer.measure.deactivate()
+ }
- // if (select.overlay == undefined) {
- // select.overlay = e.overlay
+ function initViewer () {
+ viewer = new that.DC.Viewer('viewer-container', {
+ contextOptions: {
+ webgl: {
+ stencil: true,
+ preserveDrawingBuffer: true
+ }
+ }
+ })
- // select.color = e.overlay._style.material
- // select.overlay.setStyle({
+ eagleViewer = new that.DC.Viewer('eagleEyeMap', {
+ animation: false,
+ baseLayerPicker: false,
+ imageryProvider: false,
+ fullscreenButton: false,
+ geocoder: false,
+ homeButton: false,
+ infoBox: false,
+ sceneModePicker: false,
+ selectionIndicator: false,
+ timeline: false,
+ navigationHelpButton: false,
+ navigationInstructionsInitiallyVisible: false,
+ creditContainer: undefined
+ // sceneMode: that.DC.Namespace.Cesium.SceneMode.SCENE2D
+ })
- // material: that.DC.Namespace.Cesium.Color.fromBytes(32, 108, 247, 158)
+ eagleViewer.camera.setView({
+ // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
+ // fromDegrees()方法，将经纬度和高程转换为世界坐标
+ destination: that.DC.Namespace.Cesium.Cartesian3.fromDegrees(
+ 115.871863, 28.743861, 1400.0
+ ),
+ orientation: {
+ // 指向
+ heading: that.DC.Namespace.Cesium.Math.toRadians(0, 0),
+ // 视角
+ pitch: that.DC.Namespace.Cesium.Math.toRadians(-90),
+ roll: 0.0
+ }
+ })
- // })
- // }
- // } else {
- // if (select.overlay != undefined) {
- // select.overlay.setStyle({
- // material: select.color
- // })
+ var sceneR = eagleViewer.scene
- // select.overlay = undefined
- // select.color = undefined
- // }
- // }
- // })
+ var handlerR = new that.DC.Namespace.Cesium.ScreenSpaceEventHandler(sceneR.canvas)
- // viewer.on(that.DC.MouseEventType.CLICK, e => {
- // if (e.overlay != undefined) {
- // console.log(e.overlay.attr)
- // }
- // })
+ var isLeftTrigger = false
- // viewer.addBaseLayer(baselayer, {
- // iconUrl: 'examples/images/icon/img.png',
- // name: '影像'
- // })
+ var isRightTrigger = false
- // viewer.addBaseLayer(wmtslayer, {
- // iconUrl: 'examples/images/icon/img.png',
- // name: '影像'
- // })
+ viewer.on(that.DC.MouseEventType.MOUSE_MOVE, () => {
+ isLeftTrigger = true
+ isRightTrigger = false
+ })
- // // eslint-disable-next-line camelcase
- // const baselayer_shaded = that.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: '电子'
- // })
+ handlerR.setInputAction(function (movement) {
+ isLeftTrigger = false
+ isRightTrigger = true
+ }, that.DC.Namespace.Cesium.ScreenSpaceEventType.MOUSE_MOVE)
- // // eslint-disable-next-line camelcase
- // const baselayer_street = that.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: '地形'
- // })
+ var syncviewer = function () {
+ if (isLeftTrigger) {
+ const position = that.DC.Transform.transformCartesianToWGS84(viewer.camera.position)
- // // eslint-disable-next-line camelcase
- // const baselayer_ter = that.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: '地形'
- // })
+ eagleViewer.camera.flyTo({
- viewer.use(new that.DC.Measure());
+ destination: that.DC.Transform.transformWGS84ToCartesian(new that.DC.Position(position.lng, position.lat, position.alt + 1000)),
- // viewer.flyToPosition(
- // new that.DC.Position(117.08489820, 31.65413916, 1500, 0, -90, 45)
- // )
+ orientation: {
- viewer.compass.enable = true;
- viewer.zoomController.enable = true;
- viewer.locationBar.enable = true;
- viewer.hawkeyeMap.enable = true;
- viewer.hawkeyeMap.addBaseLayer(
- that.DC.ImageryLayerFactory.createAmapImageryLayer({
- crs: "WGS84",
- })
- );
- // viewer.distanceLegend.enable = true
+ heading: viewer.camera.heading,
+
+ pitch: viewer.camera.pitch,
+
+ roll: viewer.camera.roll
+
+ },
+
+ duration: 0.0
+
+ })
+ }
+ }
+
+ viewer.camera.changed.addEventListener(syncviewer)
+
+ viewer.scene.preRender.addEventListener(syncviewer)
+
+ var synceagleViewer = function () {
+ if (isRightTrigger) {
+ console.log(eagleViewer.camera.heading)
+ viewer.camera.flyTo({
+
+ destination: eagleViewer.camera.position,
+
+ orientation: {
+
+ heading: eagleViewer.camera.heading,
+
+ pitch: eagleViewer.camera.pitch,
+
+ roll: eagleViewer.camera.roll
+
+ },
+
+ duration: 0.0
+
+ })
+ }
+ }
+
+ eagleViewer.camera.changed.addEventListener(synceagleViewer)
+
+ eagleViewer.scene.preRender.addEventListener(synceagleViewer)
+
+ // viewer.camera.percentageChanged = 0.01
+ // eagleViewer.camera.percentageChanged = 0.01
+
+ // viewer.camera.changed.addEventListener((e) => {
+ // eagleViewer.camera.flyTo({
+ // destination: viewer.camera.position,
+ // orientation: {
+ // heading: viewer.camera.heading + 5000,
+ // pitch: viewer.camera.pitch,
+ // roll: viewer.camera.roll
+ // },
+ // duration: 0.0
+ // })
+ // })
+
+ // eagleViewer.camera.changed.addEventListener((e) => {
+ // viewer.camera.flyTo({
+ // destination: eagleViewer.camera.position,
+ // orientation: {
+ // heading: eagleViewer.camera.heading - 5000,
+ // pitch: eagleViewer.camera.pitch,
+ // roll: eagleViewer.camera.roll
+ // },
+ // duration: 0.0
+ // })
+ // })
+
+ eagleViewer.imageryLayers.addImageryProvider(
+ new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: ' http://t1.tianditu.gov.cn/vec_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
+ type: 'wmts',
+ layer: 'vec',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'w',
+ show: true,
+ maximumLevel: 18
+ })
+ )
+
+ eagleViewer.imageryLayers.addImageryProvider(
+ new that.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: ' http://t1.tianditu.gov.cn/cva_w/wmts?tk=9ae78c51a0a28f06444d541148496e36',
+ type: 'wmts',
+ layer: 'cva',
+ style: 'default',
+ format: 'tiles',
+ tileMatrixSetID: 'w',
+ show: true,
+ maximumLevel: 18
+ })
+ )
+
+ that.createdLayers(viewer)
+
+ that.$store.commit('SET_VIEWER', viewer)
+
+ that.$refs.leftNav.initialize(viewer)
+
+ // const key = '0f7c1d161d7352116a21aacf0e9f44c1'
+ // const vec = that.DC.ImageryLayerFactory.createTdtImageryLayer({
+ // key
+ // })
+ // const cva = that.DC.ImageryLayerFactory.createTdtImageryLayer({
+ // key,
+ // style: 'cva'
+ // })
+ // viewer.addBaseLayer([vec, cva])
+
+ // const areaLayer = new that.DC.VectorLayer('areaLayer')
+
+ // viewer.addLayer(areaLayer)
+
+ // axios.get('http://59.55.128.156:6080/arcgis/rest/services/xiajiangfhgc/MapServer/4/query?where=1%3D1&text=&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&returnTrueCurves=false&resultOffset=&resultRecordCount=&f=pjson').then(resultData => {
+ // resultData.data.features.forEach(item => {
+ // item.geometry.rings[0].forEach(it => {
+ // it = it.join(',')
+ // })
+
+ // item.geometry.rings[0] = item.geometry.rings[0].join(';')
+
+ // const polygon = new that.DC.Polygon(item.geometry.rings[0])
+
+ // polygon.setStyle({
+
+ // material: that.DC.Namespace.Cesium.Color.fromBytes(255, 255, 255, 0)
+
+ // })
+
+ // areaLayer.addOverlay(polygon)
+ // })
+ // })
+
+ // var select = {
+ // overlay: undefined,
+ // color: undefined
+ // }
+
+ // viewer.on(that.DC.MouseEventType.MOUSE_MOVE, e => {
+ // if (e.overlay != undefined) {
+ // if (select.overlay != undefined) {
+ // if (e.overlay != select.overlay) {
+ // select.overlay.setStyle({
+ // material: select.color
+ // })
+
+ // select.overlay = undefined
+ // select.color = undefined
+ // }
+ // }
+
+ // if (select.overlay == undefined) {
+ // select.overlay = e.overlay
+
+ // select.color = e.overlay._style.material
+ // select.overlay.setStyle({
+
+ // material: that.DC.Namespace.Cesium.Color.fromBytes(32, 108, 247, 158)
+
+ // })
+ // }
+ // } else {
+ // if (select.overlay != undefined) {
+ // select.overlay.setStyle({
+ // material: select.color
+ // })
+
+ // select.overlay = undefined
+ // select.color = undefined
+ // }
+ // }
+ // })
+
+ // viewer.on(that.DC.MouseEventType.CLICK, e => {
+ // if (e.overlay != undefined) {
+ // console.log(e.overlay.attr)
+ // }
+ // })
+
+ // viewer.addBaseLayer(baselayer, {
+ // iconUrl: 'examples/images/icon/img.png',
+ // name: '影像'
+ // })
+
+ // viewer.addBaseLayer(wmtslayer, {
+ // iconUrl: 'examples/images/icon/img.png',
+ // name: '影像'
+ // })
+
+ // // eslint-disable-next-line camelcase
+ // const baselayer_shaded = that.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 = that.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 = that.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: '地形'
+ // })
+
+ viewer.use(new that.DC.Measure())
+
+ // viewer.flyToPosition(
+ // new that.DC.Position(117.08489820, 31.65413916, 1500, 0, -90, 45)
+ // )
+
+ viewer.compass.enable = true
+ viewer.zoomController.enable = true
+ viewer.locationBar.enable = true
+
+ // DC的鹰眼地图
+ // viewer.hawkeyeMap.enable = true
+ // viewer.hawkeyeMap.addBaseLayer(
+ // that.DC.ImageryLayerFactory.createAmapImageryLayer({
+ // crs: 'WGS84'
+ // })
+ // )
+ // viewer.distanceLegend.enable = true
+ }
+
+ that.DC.ready(initViewer)
+ },
+ methods: {
+ mapClick (e) {
+ this.$refs.campusNavRoute.shortcutShow(e)
+ this.$refs.campusBuildingSearch.shortcutShow(e)
+ },
+
+ createdLayers (viewer) {
+ const layerGroup = new this.DC.LayerGroup('modelBox')
+ viewer.addLayerGroup(layerGroup)
+
+ this.areaLayer = new this.DC.VectorLayer('areaLayer')
+ layerGroup.addLayer(this.areaLayer)
+ }
}
-
- that.DC.ready(initViewer);
- },
- methods: {
- mapClick(e) {
- this.$refs.campusNavRoute.shortcutShow(e);
- this.$refs.campusBuildingSearch.shortcutShow(e);
- },
-
- createdLayers(viewer) {
- const layerGroup = new this.DC.LayerGroup("modelBox");
- viewer.addLayerGroup(layerGroup);
-
- this.areaLayer = new this.DC.VectorLayer("areaLayer");
- layerGroup.addLayer(this.areaLayer);
- },
- },
-};
+}
</script>
-<style lang="scss" scope></style>
+<style lang="scss" scope>
+.eagle-eye-map {
+ position: fixed;
+ right: 10px;
+ bottom: 10px;
+ border: 5px solid orange;
+ border-radius: 50%;
+ width: 200px;
+ height: 200px;
+ z-index: 99;
+ overflow: hidden;
+}
+</style>
--
Gitblit v1.9.3