地图全景点加载处理

shuishen

2024-11-12 c4aaf9b67de6da80d9c4eda55379a057f60e1f47

地图全景点加载处理

 public/img/mapicon/qj.png

 src/api/panorama/index.js

New file
@@ -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,
  })
}

 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)

 src/pages/layout/components/scomponents/popup/panorama.vue

New file
@@ -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>

 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;
    }
  }
}

 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',