From c4aaf9b67de6da80d9c4eda55379a057f60e1f47 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 12 Nov 2024 13:32:03 +0800
Subject: [PATCH] 地图全景点加载处理
---
src/pages/layout/components/scomponents/layersControl.vue | 61 ++++++++++++++++++--
src/pages/layout/components/scomponents/popup/panorama.vue | 68 ++++++++++++++++++++++
src/api/panorama/index.js | 20 ++++++
src/styles/base/dc-base.scss | 11 +++
vite.config.js | 7 ++
public/img/mapicon/qj.png | 0
6 files changed, 159 insertions(+), 8 deletions(-)
diff --git a/public/img/mapicon/qj.png b/public/img/mapicon/qj.png
new file mode 100644
index 0000000..827ee90
--- /dev/null
+++ b/public/img/mapicon/qj.png
Binary files differ
diff --git a/src/api/panorama/index.js b/src/api/panorama/index.js
new file mode 100644
index 0000000..ea6eea6
--- /dev/null
+++ b/src/api/panorama/index.js
@@ -0,0 +1,20 @@
+/*
+ * @Author: shuishen 1109946754@qq.com
+ * @Date: 2024-11-12 11:34:22
+ * @LastEditors: shuishen 1109946754@qq.com
+ * @LastEditTime: 2024-11-12 11:34:55
+ * @FilePath: \bigScreen\src\api\panorama\dict.js
+ * @Description:
+ *
+ * Copyright (c) 2024 by shuishen, All Rights Reserved.
+ */
+import request from 'utils/http'
+
+export const getPanoramaList = (params) => {
+ const url = `/yw/panoramic/page`
+ return request({
+ url,
+ method: 'get',
+ params,
+ })
+}
\ No newline at end of file
diff --git a/src/pages/layout/components/scomponents/layersControl.vue b/src/pages/layout/components/scomponents/layersControl.vue
index 3063512..96eea44 100644
--- a/src/pages/layout/components/scomponents/layersControl.vue
+++ b/src/pages/layout/components/scomponents/layersControl.vue
@@ -2,8 +2,8 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2024-10-31 10:47:29
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-11-11 18:27:15
- * @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue
+ * @LastEditTime: 2024-11-12 13:29:29
+ * @FilePath: \bigScreen\src\pages\layout\components\scomponents\layersControl.vue
* @Description:
*
* Copyright (c) 2024 by shuishen, All Rights Reserved.
@@ -43,12 +43,17 @@
</div>
</template>
</public-box>
+
+ <panorama v-show="panoramaShow" :title="panoramaTitle" :url="panoramaUrl" @closePanoramaPopup="closePanoramaPopup">
+ </panorama>
</template>
<script setup>
+import panorama from './popup/panorama.vue'
import { getPage } from '@/api/indParkInfo'
import { getList } from "@/api/space/space"
import { getList as getRiskList } from "@/api/riskSource/riskSource"
+import { getPanoramaList } from "@/api/panorama/"
import yqfw from "@/assets/json/yqfw"
import gsgw from "@/assets/json/gsgw"
import rqgw from "@/assets/json/rqgw"
@@ -64,6 +69,14 @@
const treeProps = {
indent: 16,
showLabelLine: true,
+}
+
+// 全景相关
+const panoramaShow = ref(false)
+const panoramaTitle = ref('')
+const panoramaUrl = ref('')
+const closePanoramaPopup = () => {
+ panoramaShow.value = false
}
const data = [
@@ -267,6 +280,36 @@
]
},
+
+ {
+ id: '7',
+ label: '地图全景点位分布',
+ type: 'layer',
+ subType: 'labelPoint',
+ method: getPanoramaList,
+ params: {
+ size: 1000
+ },
+ backgroundIcon: VITE_APP_BASE + 'img/mapicon/qj.png',
+ showPanel: false,
+ layerName: 'dtqjdwfb',
+ incident: (e) => {
+ const { attrParams } = e.overlay
+ panoramaTitle.value = attrParams.name
+
+ if (
+ attrParams.url.indexOf("http://vr.jxpskj.com:180") != -1
+ ) {
+ attrParams.url = attrParams.url.replace(
+ "http://vr.jxpskj.com:180",
+ "/panorama/url"
+ )
+ }
+
+ panoramaUrl.value = attrParams.url
+ panoramaShow.value = true
+ }
+ },
]
const defaultProps = {
@@ -315,8 +358,6 @@
const handleCheckChange = (data) => {
let options = treeRef.value?.getCheckedNodes()
- console.log(options, 12111212)
-
collectedNodes.value = []
collectNodesWithFlag(data)
@@ -340,7 +381,7 @@
window.$viewer.flyTo(addTileLayers[item.layerName][0])
} else if (item.subType == 'labelPoint') {
if (!addTileLayers[item.layerName]) {
- addTileLayers[item.layerName] = new DC.HtmlLayer(addTileLayers[item.layerName])
+ addTileLayers[item.layerName] = new DC.HtmlLayer(item.layerName)
window.$viewer.addLayer(addTileLayers[item.layerName])
item.method(item.params).then(res => {
@@ -370,6 +411,14 @@
${iconEl}
</div>`
)
+
+ divIcon.attrParams = i
+
+ let incident = () => { }
+
+ if (item.incident) incident = item.incident
+
+ divIcon.on(DC.MouseEventType.CLICK, incident)
addTileLayers[item.layerName].addOverlay(divIcon)
})
@@ -403,7 +452,7 @@
addTileLayers[item.layerName] = new DC.VectorLayer(item.layerName)
window.$viewer.addLayer(addTileLayers[item.layerName])
- function computeCircle(radius) {
+ function computeCircle (radius) {
var positions = []
for (var i = 0; i < 1080; i++) {
var radians = DC.Math.toRadians(i)
diff --git a/src/pages/layout/components/scomponents/popup/panorama.vue b/src/pages/layout/components/scomponents/popup/panorama.vue
new file mode 100644
index 0000000..8c1f28d
--- /dev/null
+++ b/src/pages/layout/components/scomponents/popup/panorama.vue
@@ -0,0 +1,68 @@
+<template>
+ <div class="panorama-container">
+ <div class="title">
+ <div>{{ title }}</div>
+ <div class="close" @click="$emit('closePanoramaPopup')">
+ <i class="fa fa-close"></i>
+ </div>
+ </div>
+ <div class="content">
+ <iframe class="w100 h100" :src="url" frameborder="0"></iframe>
+ </div>
+ </div>
+</template>
+
+<script setup>
+const {
+ title,
+ url
+} = defineProps({
+ title: {
+ default: ''
+ },
+ url: {
+ default: ''
+ }
+})
+
+</script>
+
+<style lang="scss" scoped>
+.panorama-container {
+ display: flex;
+ flex-direction: column;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 999;
+ background: #00d2ff;
+ /* fallback for old browsers */
+ background: -webkit-linear-gradient(to right, #3a7bd5, #00d2ff);
+ /* Chrome 10-25, Safari 5.1-6 */
+ background: linear-gradient(to right, #3a7bd5, #00d2ff);
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ pointer-events: auto;
+
+ .title {
+ padding: 0 10px;
+ display: flex;
+ justify-content: space-between;
+ height: 44px;
+ line-height: 44px;
+ color: #fff;
+
+ .close {
+ cursor: pointer;
+ }
+ }
+
+ .content {
+ padding: 0 10px 10px;
+ width: 100%;
+ height: 0;
+ flex: 1;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/styles/base/dc-base.scss b/src/styles/base/dc-base.scss
index 68be596..a4fc09a 100644
--- a/src/styles/base/dc-base.scss
+++ b/src/styles/base/dc-base.scss
@@ -53,12 +53,19 @@
}
.map-icon {
+ margin: auto;
display: flex;
+ align-items: center;
justify-content: center;
+ width: 36px;
+ height: 36px;
+ background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 30%, rgb(255, 179, 0, 0.7) 100%);
+ border-radius: 50%;
+ box-shadow: 0px 0px 6px rgb(255, 179, 0, 0.8);
img {
- width: 40px;
- height: 40px;
+ width: 24px;
+ height: 24px;
}
}
}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index fb9ba34..fb47a1e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -85,6 +85,13 @@
// overlay:false
// },
proxy: {
+ '/panorama/url': {
+ // target: 'http://localhost',
+ target: 'http://vr.jxpskj.com:180',
+ changeOrigin: true,
+ rewrite: path => path.replace(/^\/panorama\/url/, ''),
+ },
+
'/zhyq/mx': {
// target: 'http://localhost',
target: 'https://wrj.shuixiongit.com/zhyq/mx',
--
Gitblit v1.9.3