From b5f8881176bcb44928758e25d7d7a6fc140840c5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 17 Dec 2021 15:06:23 +0800
Subject: [PATCH] 弹框完善
---
src/pcviews/service/index.vue | 11
src/components/orgNavBar/index.vue | 30 +
src/store/modules/popupParams.js | 28 +
package-lock.json | 3
src/styles/divforms/divForms.scss | 2
src/components/arcNavBar/index.vue | 32 +
src/components/map/index.vue | 259 ++-------------
src/styles/divforms/popup.scss | 24 +
src/styles/common.scss | 1
src/divForms/divForms.js | 102 +-----
src/main.js | 11
src/components/map/component/mapPopup.vue | 266 ++++++++++++++++
src/components/leftNav/index.vue | 4
package.json | 1
src/store/getters.js | 7
src/divForms/panoramaBox.js | 84 +++++
src/styles/divforms/panoramaBox.scss | 40 ++
public/img/icon/xyjz.png | 0
18 files changed, 573 insertions(+), 332 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 62fb40c..ed2e230 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7935,8 +7935,7 @@
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.21.tgz?cache=0&sync_timestamp=1613835817439&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash%2Fdownload%2Flodash-4.17.21.tgz",
- "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
- "dev": true
+ "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw="
},
"lodash.debounce": {
"version": "4.0.8",
diff --git a/package.json b/package.json
index e9a8d91..2df4003 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
"core-js": "^3.6.5",
"echarts": "^5.2.1",
"element-ui": "^2.15.6",
+ "lodash": "^4.17.21",
"vue": "^2.6.11",
"vue-axios": "^3.3.7",
"vue-router": "^3.5.2",
diff --git a/public/img/icon/xyjz.png b/public/img/icon/xyjz.png
index c53b483..71f1ade 100644
--- a/public/img/icon/xyjz.png
+++ b/public/img/icon/xyjz.png
Binary files differ
diff --git a/src/components/arcNavBar/index.vue b/src/components/arcNavBar/index.vue
index 8aa667e..dfc747a 100644
--- a/src/components/arcNavBar/index.vue
+++ b/src/components/arcNavBar/index.vue
@@ -7,7 +7,7 @@
:class="{'move': moveFlag}">
<div class="title">
<img class="icon"
- src="/img/icon/jg.png"
+ src="/img/icon/xyjz.png"
alt="">
<span>
{{title}}
@@ -46,6 +46,9 @@
<script>
import { mapGetters } from 'vuex'
import { getList, getChildNavList, getChildNavDetail } from '@/api/pc/public/arc'
+
+var $ = window.$
+
export default {
name: 'ArcNavBar',
data () {
@@ -71,7 +74,13 @@
// 点信息
'pointPosition',
// 点名称
- 'stateName'
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl'
])
},
created () {
@@ -164,10 +173,15 @@
mapPopup (param) {
getChildNavDetail({ id: param.id }).then(res => {
var result = res.data.data[0].list
+ this.$store.commit('CLEAR_ALL', null)
+
this.$store.commit('SET_POPUPBGURL', result.tpUrl)
this.$store.commit('SET_POPUPQRURL', result.codeUrl)
- this.$store.commit('SET_POINTPOSITION', [result.jd, result.wd, result.gd, result.heading, result.pitch, result.roll])
+ 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_INTRODUCETEXT', result.introduce)
+ this.$store.commit('SET_PANORAMAURL', result.panoramaurl)
var that = this
// item.alt, item.heading, item.pitch, item.roll
@@ -182,16 +196,16 @@
},
newPopup (item) {
const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.jd, item.wd, item.gd, item.heading, item.pitch, item.roll))
- // eslint-disable-next-line new-cap
- var popup = new this.DC.divForms(this.viewer, {
- domId: 'div1',
- title: item.mechanismName,
- className: 'divForms-dom',
- content: document.getElementById('mapChildContent'),
+ // 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_DETAILSPOPUP', true)
}
}
}
diff --git a/src/components/leftNav/index.vue b/src/components/leftNav/index.vue
index d3eb387..493e3c6 100644
--- a/src/components/leftNav/index.vue
+++ b/src/components/leftNav/index.vue
@@ -98,8 +98,8 @@
generatePosition (num) {
const list = []
for (let i = 0; i < num; i++) {
- const lng = 121.1372 + Math.random() * 0.5
- const lat = 31.0129 + Math.random() * 0.5
+ const lng = 121.44405783 + Math.random() * 0.5
+ const lat = 31.19480456 + Math.random() * 0.5
list.push(new this.DC.Position(lng, lat, 0))
}
return list
diff --git a/src/components/map/component/mapPopup.vue b/src/components/map/component/mapPopup.vue
new file mode 100644
index 0000000..0eea98a
--- /dev/null
+++ b/src/components/map/component/mapPopup.vue
@@ -0,0 +1,266 @@
+<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}}
+ </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="introduceText != null && introduceText != ''"
+ class="introduce">
+ <p>
+ <strong>介绍:</strong>
+ {{introduceText}}
+ </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 @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>
+ </ul>
+ </div>
+ <div class="arc-box">
+ <ul class="tab-btn">
+ <li class="on">教学科研行政</li>
+ <li>生活服务</li>
+ </ul>
+ <div class="btm-content">
+ <div class="on">
+ <ul>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 教学楼
+ </li>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 教学楼
+ </li>
+ </ul>
+ </div>
+ <div>
+ <ul>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 生活楼
+ </li>
+ <li>
+ <i class="popup-icon location-icon deblurring"></i>
+ 生活楼
+ </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="arrow"></div>
+ </div>
+ </div>
+ </div>
+ <div v-if="panoramaPopup"
+ class="panorama-dom"
+ id="PanoramaBox">
+ <div style="width: 100%; height: 100%;">
+ <div class="panorama-container">
+ <div class="panorama-wrap">
+ <div class="content-wrap">
+ <div class="title">
+ {{stateName}}
+ </div>
+ <div class="content">
+ <iframe :src="panoramaUrl"
+ frameborder="0"></iframe>
+ </div>
+ </div>
+ </div>
+ <div class="arrow"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 二维码弹框相关 -->
+ <el-dialog title="场景二维码"
+ :visible.sync="QRCodeFlag"
+ 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;
+ right: 0;
+ bottom: 0;
+ margin: auto">
+ <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
+ (右键另存为图片)
+ </div>
+ </div>
+ </el-dialog>
+
+ <el-image v-show="false"
+ style="width: 100px; height: 100px"
+ :src="url"
+ :preview-src-list="srcList"
+ ref="popupImgs">
+ </el-image>
+
+ <campusNav ref="campusNavRoute"
+ :comeName="comeName"
+ :getToName="getToName"
+ v-show="campusNavFlag" />
+ </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+ name: 'mapPopup',
+ data () {
+ return {
+ DC: null,
+ campusNavFlag: false,
+ comeName: '',
+ getToName: '',
+ QRCodeFlag: false,
+ url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+ srcList: [
+ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+ 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+ ]
+ }
+ },
+ computed: {
+ ...mapGetters([
+ 'viewer',
+ 'popupBgUrl',
+ 'pupupQRUrl',
+ // 终点
+ 'terminus',
+ // 起点
+ 'startingPoint',
+ // 点信息
+ 'pointPosition',
+ // 点名称
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl',
+ // 详情弹框显示关闭
+ 'detailsPopup',
+ // 全景弹框显示关闭
+ 'panoramaPopup'
+ ])
+ },
+ created () {
+ this.DC = global.DC
+
+ this.$nextTick(() => {
+ $('#map_popup_content').on('click', '.tab-btn li', function (e) {
+ $(this).addClass('on').siblings().removeClass('on')
+
+ $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
+ })
+ })
+ },
+ methods: {
+ closeCampusNav () {
+ this.campusNavFlag = false
+ this.$refs.campusNavRoute.clearLayer()
+ this.$store.commit('SET_STARTINGPOINT', null)
+ this.$store.commit('SET_TERMINUS', null)
+ this.comeName = ''
+ this.getToName = ''
+ },
+
+ comeHereClick () {
+ this.comeName = this.stateName
+ this.$store.commit('SET_TERMINUS', this.pointPosition)
+ if (this.campusNavFlag == false) this.campusNavFlag = true
+ },
+
+ getToHereClick () {
+ this.getToName = this.stateName
+ this.$store.commit('SET_STARTINGPOINT', this.pointPosition)
+ if (this.campusNavFlag == false) this.campusNavFlag = true
+ },
+
+ qrCodeClick () {
+ this.QRCodeFlag = true
+ },
+
+ imgsClick () {
+ this.$refs.popupImgs.clickHandler()
+ },
+
+ panoramaClick () {
+ // eslint-disable-next-line new-cap
+ var positions = this.DC.Transform.transformWGS84ToCartesian(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_PANORAMAPOPUP', true)
+ }
+ }
+
+}
+</script>
+
+<style>
+</style>
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 7f499cd..a6112c9 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -3,165 +3,24 @@
<div id="viewer-container"
style="height: 100%; width: 100%;">
- <div v-show='popupFlag'
- id="modelPopup"
- style="width: 366px;
- height: 240px;
- background: url(/img/bg/nav-bg.jpeg) no-repeat;
- background-size: 100% 100%;">
- <div class="header">
- <div class="logo">
- <img src="/img/navicon/map.png"
- alt="">
- </div>
- <div class="title">
- 明德楼
- </div>
- <div class="close">
- <img src="/img/navicon/close.png"
- alt="">
- </div>
- </div>
- <div class="content">
- <div class="img">
-
- </div>
- <div class="meau">
-
- </div>
- </div>
- </div>
-
- <div id="map_popup_content">
- </div>
-
- <div ref="mapContentContent"
- v-show="false"
- id="map_content_content">
- <div id="mapChildContent">
- <div class="arc-bcg">
- <img :src="popupBgUrl"
- alt="">
- </div>
- <div class="popup-nav">
- <ul>
- <li class="come-here-fun"
- :terminus="terminus">
- <i class="popup-icon come-nav deblurring"></i>
- 到这
- </li>
- <li class="get-to-fun"
- :startingPoint="startingPoint">
- <i class="popup-icon start-nav deblurring"></i>
- 出发
- </li>
- <li class="qr-code-fun">
- <i class="popup-icon qr-code-nav deblurring"></i>
- 二维码
- </li>
- <li class="imgs-fun">
- <i class="popup-icon atlas-nav deblurring"></i>
- 图集
- </li>
- <li>
- <i class="popup-icon live-action-nav deblurring"></i>
- 实景
- </li>
- </ul>
- </div>
- <div class="arc-box">
- <ul class="tab-btn">
- <li class="on">教学科研行政</li>
- <li>生活服务</li>
- </ul>
- <div class="btm-content">
- <div class="on">
- <ul>
- <li>
- <i class="popup-icon location-icon deblurring"></i>
- 教学楼
- </li>
- <li>
- <i class="popup-icon location-icon deblurring"></i>
- 教学楼
- </li>
- </ul>
- </div>
- <div>
- <ul>
- <li>
- <i class="popup-icon location-icon deblurring"></i>
- 生活楼
- </li>
- <li>
- <i class="popup-icon location-icon deblurring"></i>
- 生活楼
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div class="btm-box"></div>
- </div>
- </div>
-
- <!-- 二维码弹框相关 -->
- <el-dialog title="场景二维码"
- :visible.sync="QRCodeFlag"
- width='44%'
- :before-close="handleClose">
- <div style="margin: 0; position: relative; width: 100%; height: 352px;">
- <img width="260"
- :src="pupupQRUrl"
- alt=""
- style="position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto">
- <div style="position: absolute; bottom: 0; width: 100%; line-height: 36px; text-align: center;">
- (右键另存为图片)
- </div>
- </div>
- </el-dialog>
-
<left-nav ref="leftNav"></left-nav>
- <campusNav ref="campusNavRoute"
- :comeName="comeName"
- :getToName="getToName"
- v-show="campusNavFlag" />
-
- <el-image v-show="false"
- style="width: 100px; height: 100px"
- :src="url"
- :preview-src-list="srcList"
- ref="popupImgs">
- </el-image>
-
+ <mapPopup />
</div>
</template>
<script>
import { mapGetters } from 'vuex'
-
-var $ = window.$
+import mapPopup from './component/mapPopup.vue'
export default {
name: 'mapBox',
+ components: {
+ mapPopup
+ },
data () {
return {
- popupFlag: false,
- campusNavFlag: false,
- comeName: '',
- getToName: '',
- QRCodeFlag: false,
- url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
- srcList: [
- 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
- 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
- ]
+ DC: null
}
},
computed: {
@@ -176,51 +35,25 @@
// 点信息
'pointPosition',
// 点名称
- 'stateName'
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl',
+ // 详情弹框显示关闭
+ 'detailsPopup',
+ // 全景弹框显示关闭
+ 'panoramaPopup'
])
},
mounted () {
var that = this
- this.$nextTick(() => {
- // 动态添加dom元素，并绑定VUE事件(打开pdf)(.pdf-item为动态添加的元素，放置在父元素.pdf-body下)
- $('#map_popup_content').on('click', '.arc-bcg', function () {
- alert(1)
- })
-
- $('#map_popup_content').on('click', '.tab-btn li', function (e) {
- $(this).addClass('on').siblings().removeClass('on')
-
- $(this).parent().siblings().children(`div:eq(${$(this).index()})`).addClass('on').siblings().removeClass('on')
- })
-
- // 终点
- $('#map_popup_content').on('click', '.popup-nav .come-here-fun', function (e) {
- that.comeName = that.stateName
- that.$store.commit('SET_TERMINUS', that.pointPosition)
- if (that.campusNavFlag == false) that.campusNavFlag = true
- })
-
- // 起点
- $('#map_popup_content').on('click', '.popup-nav .get-to-fun', function (e) {
- that.getToName = that.stateName
- that.$store.commit('SET_STARTINGPOINT', that.pointPosition)
- if (that.campusNavFlag == false) that.campusNavFlag = true
- })
-
- $('#map_popup_content').on('click', '.popup-nav .qr-code-fun', function (e) {
- that.QRCodeFlag = true
- })
-
- $('#map_popup_content').on('click', '.popup-nav .imgs-fun', function (e) {
- console.log(that.$refs.popupImgs)
- that.$refs.popupImgs.clickHandler()
- })
- })
-
- var DC = global.DC
-
let viewer
+
+ that.DC = global.DC
function distanceSurface () {
viewer.measure.distanceSurface()
@@ -281,7 +114,7 @@
}
function initViewer () {
- viewer = new DC.Viewer('viewer-container', {
+ viewer = new that.DC.Viewer('viewer-container', {
contextOptions: {
webgl: {
stencil: true,
@@ -298,7 +131,7 @@
popup.hide()
- const baselayer = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ const baselayer = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
url:
'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
})
@@ -308,7 +141,7 @@
})
// eslint-disable-next-line camelcase
- const baselayer_shaded = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ const baselayer_shaded = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
url:
'http://services.arcgisonline.com/arcgis/rest/services/World_Shaded_Relief/MapServer'
})
@@ -318,7 +151,7 @@
})
// eslint-disable-next-line camelcase
- const baselayer_street = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ const baselayer_street = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
url:
'http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
})
@@ -328,7 +161,7 @@
})
// eslint-disable-next-line camelcase
- const baselayer_ter = DC.ImageryLayerFactory.createArcGisImageryLayer({
+ const baselayer_ter = that.DC.ImageryLayerFactory.createArcGisImageryLayer({
url:
'http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
})
@@ -337,52 +170,55 @@
name: '地形'
})
- const layer = new DC.TilesetLayer('layer')
+ const layer = new that.DC.TilesetLayer('layer')
viewer.addLayer(layer)
- const tileset = new DC.Tileset(
+ const tileset = new that.DC.Tileset(
'http://resource.dvgis.cn/data/3dtiles/ljz/tileset.json'
)
- const style = new DC.TilesetStyle()
+ const style = new that.DC.TilesetStyle()
style.color = {
conditions: [
+ // eslint-disable-next-line no-template-curly-in-string
['${Height} >= 300', 'rgba(45, 0, 75, 0.5)'],
+ // eslint-disable-next-line no-template-curly-in-string
['${Height} >= 200', 'rgb(102, 71, 151)'],
+ // eslint-disable-next-line no-template-curly-in-string
['${Height} >= 100', 'rgb(170, 162, 204)'],
+ // eslint-disable-next-line no-template-curly-in-string
['${Height} >= 50', 'rgb(224, 226, 238)'],
+ // eslint-disable-next-line no-template-curly-in-string
['${Height} >= 25', 'rgb(252, 230, 200)'],
+ // eslint-disable-next-line no-template-curly-in-string
['${Height} >= 10', 'rgb(248, 176, 87)'],
+ // eslint-disable-next-line no-template-curly-in-string
['${Height} >= 5', 'rgb(198, 106, 11)'],
+ // eslint-disable-next-line no-template-curly-in-string
['true', 'rgb(127, 59, 8)']
]
}
- viewer.use(new DC.Measure())
+ viewer.use(new that.DC.Measure())
tileset.setStyle(style)
layer.addOverlay(tileset)
viewer.flyTo(tileset)
- tileset.on(DC.MouseEventType.CLICK, e => {
+ tileset.on(that.DC.MouseEventType.CLICK, e => {
// that.popupFlag = true
-
- console.log(e.position)
viewer.scene.globe.depthTestAgainstTerrain = false
// 定制化窗体
- var divForms = new DC.divForms(viewer, {
- domId: 'div1',
- title: '成教楼 ',
- className: 'divForms-dom',
- content: document.getElementById('mapChildContent'),
+ // eslint-disable-next-line no-unused-vars
+ var popup = new that.DC.DivForms(that.viewer, {
+ domId: 'divFormsDomBox',
position: [
e.position
]
})
- // popup.setWrapper('<div></div>')
-
- // popup.showAt(e.position, document.getElementById('modelPopup'))
+ that.$store.commit('SET_PANORAMAPOPUP', false)
+ that.$store.commit('SET_DETAILSPOPUP', true)
})
// viewer.zoomToPosition(
@@ -395,17 +231,10 @@
viewer.distanceLegend.enable = true
}
- DC.ready(initViewer)
+ that.DC.ready(initViewer)
},
methods: {
- closeCampusNav () {
- this.campusNavFlag = false
- this.$refs.campusNavRoute.clearLayer()
- this.$store.commit('SET_STARTINGPOINT', null)
- this.$store.commit('SET_TERMINUS', null)
- this.comeName = ''
- this.getToName = ''
- }
+
}
}
</script>
diff --git a/src/components/orgNavBar/index.vue b/src/components/orgNavBar/index.vue
index 536a5e1..cc9b184 100644
--- a/src/components/orgNavBar/index.vue
+++ b/src/components/orgNavBar/index.vue
@@ -37,6 +37,9 @@
<script>
import { mapGetters } from 'vuex'
+
+var $ = window.$
+
export default {
name: 'OrgNavBar',
data () {
@@ -64,7 +67,13 @@
// 点信息
'pointPosition',
// 点名称
- 'stateName'
+ 'stateName',
+ // 地址
+ 'siteName',
+ // 介绍
+ 'introduceText',
+ // 全景地址
+ 'panoramaUrl'
])
},
methods: {
@@ -118,14 +127,15 @@
this.$parent.closeModel()
},
mapPopup (item) {
+ this.$store.commit('CLEAR_ALL', null)
+
this.$store.commit('SET_POPUPBGURL', item.bgImg)
this.$store.commit('SET_POPUPQRURL', item.QRImg)
- this.$store.commit('SET_POINTPOSITION', [item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll])
+ this.$store.commit('SET_POINTPOSITION', [Number(item.longitude), Number(item.latitude), Number(item.alt), Number(item.heading), Number(item.pitch), Number(item.roll)])
this.$store.commit('SET_STATENAME', item.navTitle)
- console.log(this.popupBgUrl)
var that = this
- // item.alt, item.heading, item.pitch, item.roll
+
this.viewer.zoomToPosition(
new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll),
function () {
@@ -135,16 +145,16 @@
},
newPopup (item) {
const position = this.DC.Transform.transformWGS84ToCartesian(new this.DC.Position(item.longitude, item.latitude, item.alt, item.heading, item.pitch, item.roll))
- // eslint-disable-next-line new-cap
- var popup = new this.DC.divForms(this.viewer, {
- domId: 'div1',
- title: item.navTitle,
- className: 'divForms-dom',
- content: document.getElementById('mapChildContent'),
+ // 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_DETAILSPOPUP', true)
}
}
}
diff --git a/src/divForms/divForms.js b/src/divForms/divForms.js
index 72327a5..27719de 100644
--- a/src/divForms/divForms.js
+++ b/src/divForms/divForms.js
@@ -10,11 +10,9 @@
import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包
-var $ = window.$
-
DC.use(DcCore) // 安装DC核心库
-class divForms {
+class DivForms {
/**
* @popup 存放 dom 相关
*
@@ -23,21 +21,11 @@
this._viewer = viewer
this._popup = popup
this._position = popup.position
- this._title = popup.title
- this._content = popup.content
this.appendPopup()
}
get viewer () {
return this._viewer
- }
-
- get title () {
- return this._title
- }
-
- get content () {
- return this._content
}
get popup () {
@@ -53,97 +41,47 @@
* @domId 存放 dom 的id, 多个数组，单个字符串
*/
- this.createVideoWindowAll(this._popup.domId, this._popup.className, this._position[0])
+ this.createVideoWindowAll(this._popup.domId)
}
// 创建元素并追加
- createVideoWindowAll (id, className, position) {
- var childs = document.getElementById('map_popup_content').getElementsByTagName('div')
+ createVideoWindowAll (id) {
+ this._viewer.scene.postRender.addEventListener(this.movePopup(id))
+ }
- if (childs.length > 0) {
- for (var i = 0; i < childs.length; i++) {
- document.getElementById('map_popup_content').removeChild(childs[i])
- }
- }
-
+ movePopup (id) {
var self = this
-
- var el = $("<div class=''></div>")
-
- var divBig = $("<div style='width: 100%; height: 100%;' class=''></div>")
-
- var divForms = $("<div class='divForms divForms-theme'></div>")
-
- var divFormsWrap = $("<div class='divForms-wrap'></div>")
-
- var area = $("<div class='area'></div>")
-
- var arrowLt = $("<div class='arrow-lt'></div>")
- var bT = $("<div class='b-t'></div>")
- var bR = $("<div class='b-r'></div>")
- var bB = $("<div class='b-b'></div>")
- var bL = $("<div class='b-l'></div>")
- var arrowRb = $("<div class='arrow-rb'></div>")
-
- var labelWrap = $("<div class='label-wrap'></div>")
- var titleDiv = $("<div class='title'></div>").text(this._title)
- var labelContent = $("<div class='label-content'></div>").append(this._content)
-
- labelWrap.append(titleDiv)
- labelWrap.append(labelContent)
-
- var bTL = $("<div class='b-t-l'></div>")
- var bBR = $("<div class='b-b-r'></div>")
-
- var arrow = $("<div class='arrow'></div>")
-
- area.append(arrowLt)
- area.append(bT)
- area.append(bR)
- area.append(bB)
- area.append(bL)
- area.append(arrowRb)
- area.append(labelWrap)
-
- divFormsWrap.append(area)
- divFormsWrap.append(bTL)
- divFormsWrap.append(bBR)
-
- divForms.append(divFormsWrap)
- divForms.append(arrow)
-
- divBig.append(divForms)
- el.append(divBig)
-
- el.attr('id', id)
-
- el.addClass(className || '')
-
- $('#map_popup_content').append(el)
-
- this._viewer.scene.postRender.addEventListener(function () {
+ return function () {
const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
self._viewer.scene,
- position
+ self._position[0]
)
self.positionPopUp(windowCoord, id)
- })
+ }
+ }
+
+ clearMove (id) {
+ this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
}
positionPopUp (windowCoord, id) {
- if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x)) {
+ if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
+ this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
+ return
+ }
+ if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
+ windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
const x = windowCoord.x
const y = windowCoord.y - document.getElementById(id).offsetHeight
// x = windowCoord.x - document.getElementById(id).offsetWidth
document.getElementById(id).style.cssText = `
visibility:visible;
- z-index:1;
transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
`
}
}
}
-export default divForms
+export default DivForms
diff --git a/src/divForms/panoramaBox.js b/src/divForms/panoramaBox.js
new file mode 100644
index 0000000..5442d94
--- /dev/null
+++ b/src/divForms/panoramaBox.js
@@ -0,0 +1,84 @@
+/*
+ * @Descripttion:
+ * @version: 0.01
+ * @Author: Morpheus
+ * @Date: 2020-10-22 11:05:09
+ * @LastEditors: Morpheus
+ * @LastEditTime: 2020-10-22 13:48:22
+ */
+
+import DC from '@dvgis/dc-sdk/dist/dc.base.min' // 基础包
+import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' // 核心包
+
+DC.use(DcCore) // 安装DC核心库
+
+class PanoramaBox {
+ /**
+ * @popup 存放 dom 相关
+ *
+ */
+ constructor (viewer, popup) {
+ this._viewer = viewer
+ this._popup = popup
+ this._position = popup.position
+ this.appendPopup()
+ }
+
+ get viewer () {
+ return this._viewer
+ }
+
+ get popup () {
+ return this._popup
+ }
+
+ get position () {
+ return this._position
+ }
+
+ appendPopup () {
+ /**
+ * @domId 存放 dom 的id, 多个数组，单个字符串
+ */
+
+ this.createVideoWindowAll(this._popup.domId)
+ }
+
+ // 创建元素并追加
+ createVideoWindowAll (id) {
+ this._viewer.scene.postRender.addEventListener(this.movePopup(id))
+ }
+
+ movePopup (id) {
+ var self = this
+ return function () {
+ const windowCoord = DC.Namespace.Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+ self._viewer.scene,
+ self._position[0]
+ )
+
+ self.positionPopUp(windowCoord, id)
+ }
+ }
+
+ positionPopUp (windowCoord, id) {
+ if (document.getElementById(id) == null || document.getElementById(id) == undefined) {
+ this._viewer.scene.postRender.removeEventListener(this.movePopup(id))
+ return
+ }
+ if (windowCoord != undefined && windowCoord.x && windowCoord.x != undefined && !Number.isNaN(windowCoord.x) &&
+ windowCoord.y && windowCoord.y != undefined && !Number.isNaN(windowCoord.y)) {
+ const x = windowCoord.x
+ const y = windowCoord.y - document.getElementById(id).offsetHeight
+ // x = windowCoord.x - document.getElementById(id).offsetWidth
+
+ document.getElementById(id).style.cssText = `
+ visibility:visible;
+ z-index:1;
+ transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0);
+ `
+ }
+ }
+}
+
+export default PanoramaBox
diff --git a/src/main.js b/src/main.js
index 27a4777..8b72037 100644
--- a/src/main.js
+++ b/src/main.js
@@ -29,21 +29,24 @@
import '@dvgis/dc-sdk/dist/dc.core.min.css'
-import divForms from '@/divForms/divForms'
+import DivForms from '@/divForms/divForms'
+import PanoramaBox from '@/divForms/panoramaBox'
// 手机弹窗
import mobileDivForms from '@/mobileDivForms/mobileDivForms'
-Vue.prototype.$echarts = echarts
+import _ from 'lodash'
+Vue.prototype._ = _
-console.log(DcCore)
+Vue.prototype.$echarts = echarts
Vue.component(CollapseTransition.name, CollapseTransition) // 主要样式
global.DC = DC // 将DC提升到全局变量，方便在工程中直接使用
global.echarts = echarts // 将DC提升到全局变量，方便在工程中直接使用
-DC.divForms = divForms
+DC.DivForms = DivForms
+DC.PanoramaBox = PanoramaBox
DC.mobileDivForms = mobileDivForms
DC.use(DcCore) // 安装DC核心库
diff --git a/src/pcviews/service/index.vue b/src/pcviews/service/index.vue
index fad2dfd..6a0c204 100644
--- a/src/pcviews/service/index.vue
+++ b/src/pcviews/service/index.vue
@@ -1,15 +1,16 @@
<template>
- <div>
- 生活服务设施
- </div>
+ <div>
+ 生活服务设施
+ </div>
</template>
<script>
export default {
-
+ created () {
+ alert(1)
+ }
}
</script>
<style>
-
</style>
diff --git a/src/store/getters.js b/src/store/getters.js
index 4eb45f2..ef4d138 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -6,6 +6,11 @@
pointPosition: state => state.popupParams.pointPosition,
terminus: state => state.popupParams.terminus,
startingPoint: state => state.popupParams.startingPoint,
- stateName: state => state.popupParams.stateName
+ stateName: state => state.popupParams.stateName,
+ siteName: state => state.popupParams.siteName,
+ introduceText: state => state.popupParams.introduceText,
+ panoramaUrl: state => state.popupParams.panoramaUrl,
+ detailsPopup: state => state.popupParams.detailsPopup,
+ panoramaPopup: state => state.popupParams.panoramaPopup
}
export default getters
diff --git a/src/store/modules/popupParams.js b/src/store/modules/popupParams.js
index 40c8846..b77ed47 100644
--- a/src/store/modules/popupParams.js
+++ b/src/store/modules/popupParams.js
@@ -5,7 +5,12 @@
terminus: null,
startingPoint: null,
pointPosition: null,
- stateName: null
+ stateName: null,
+ siteName: null,
+ introduceText: null,
+ panoramaUrl: null,
+ detailsPopup: false,
+ panoramaPopup: false
},
mutations: {
SET_POPUPBGURL (state, popupBgUrl) {
@@ -25,6 +30,27 @@
},
SET_STATENAME (state, stateName) {
state.stateName = stateName
+ },
+ SET_SITENAME (state, siteName) {
+ state.siteName = siteName
+ },
+ SET_INTRODUCETEXT (state, introduceText) {
+ state.introduceText = introduceText
+ },
+ SET_PANORAMAURL (state, panoramaUrl) {
+ state.panoramaUrl = panoramaUrl
+ },
+ SET_DETAILSPOPUP (state, detailsPopup) {
+ state.detailsPopup = detailsPopup
+ },
+ SET_PANORAMAPOPUP (state, panoramaPopup) {
+ state.panoramaPopup = panoramaPopup
+ },
+
+ CLEAR_ALL (state, param) {
+ state.siteName = param
+ state.introduceText = param
+ state.panoramaUrl = param
}
},
actions: {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index 76cc0e7..ef7ca94 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -13,6 +13,7 @@
// page
@import "./divforms/divForms.scss";
+@import "./divforms/panoramaBox.scss";
@import "./divforms/popup.scss";
// 手机样式
diff --git a/src/styles/divforms/divForms.scss b/src/styles/divforms/divForms.scss
index 6e30679..ee2f7c9 100644
--- a/src/styles/divforms/divForms.scss
+++ b/src/styles/divforms/divForms.scss
@@ -1,7 +1,7 @@
.divForms-dom {
position: fixed;
left: 0;
- z-index: 1;
+ z-index: 1 !important;
}
.divForms .arrow {
diff --git a/src/styles/divforms/panoramaBox.scss b/src/styles/divforms/panoramaBox.scss
new file mode 100644
index 0000000..699e72a
--- /dev/null
+++ b/src/styles/divforms/panoramaBox.scss
@@ -0,0 +1,40 @@
+.panorama-dom {
+ position: fixed;
+ left: 0;
+ z-index: 1 !important;
+
+ .panorama-wrap {
+ position: relative;
+ overflow: hidden;
+ padding: 30px;
+
+ .content-wrap {
+ padding: 0 20px 20px 20px;
+
+ background-image: linear-gradient(180deg, transparent 0px, #28bbf06c 0px, #28bbf06c 50%, transparent 50%), linear-gradient(0deg, transparent 0px, #28bbf06c 0px, #28bbf06c 50.1%, transparent 50%);
+ border: 1px solid #29baf1;
+ box-shadow: 0 0px 12px #29b8f1e5;
+
+ .title {
+ line-height: 36px;
+ color: #fff;
+ text-align: center;
+ }
+ }
+
+ iframe {
+ width: 460px;
+ height: 320px;
+ }
+ }
+
+ .arrow {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 45px;
+ height: 2px;
+ transform: rotate(-45deg) translate(5px, -15px);
+ background-color: #28bbf0;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/divforms/popup.scss b/src/styles/divforms/popup.scss
index 15c6fbb..7f96b17 100644
--- a/src/styles/divforms/popup.scss
+++ b/src/styles/divforms/popup.scss
@@ -121,4 +121,28 @@
background: #666;
}
}
+}
+
+.site {
+ font-size: 0.875rem;
+ line-height: 24px;
+
+ strong {
+ font-size: 0.875rem;
+ }
+}
+
+.introduce {
+
+ strong {
+ font-size: 0.875rem;
+ }
+
+ p {
+ white-space: normal !important;
+ word-wrap: break-word !important;
+ max-width: 396px;
+ font-size: 0.875rem;
+ line-height: 24px;
+ }
}
\ No newline at end of file
--
Gitblit v1.9.3