选择航线，地图展示该航线的机巢位置及对应的航点

shuishen

2025-05-07 0da0753a75690626c8239ff0a03e0ad5042cf72e

选择航线，地图展示该航线的机巢位置及对应的航点

 src/assets/map_images/EndPointicon.png

 src/assets/map_images/Startingpointicon.png

 src/components/map-container/mapContainer.vue

@@ -24,10 +24,14 @@
import { nextTick, onMounted, onUnmounted } from 'vue'
import { read } from 'xlsx'

import startPng from '@/assets/map_images/Startingpointicon.png'
import endPng from '@/assets/map_images/EndPointicon.png'

window.$viewer = null
window.$Cesium = null
let pointLayer = null
let polylineLayer = null
let pointHtmlLayer = null

const { VITE_APP_BASE } = import.meta.env
// import * as Cesium from 'cesium'
@@ -82,6 +86,8 @@
    window.$viewer?.addLayer(pointLayer)
    polylineLayer = new DC.VectorLayer('polylineLayer')
    window.$viewer?.addLayer(polylineLayer)
    pointHtmlLayer = new DC.HtmlLayer('pointHtmlLayer')
    window.$viewer?.addLayer(pointHtmlLayer)

    isViewerReady.value = true
}
@@ -125,6 +131,7 @@
 */
function addPolyline (data) {
    if (polylineLayer) polylineLayer.clear()
    if (pointHtmlLayer) pointHtmlLayer.clear()

    if (data.length === 0) return

@@ -145,6 +152,38 @@
    })
    polylineLayer.addOverlay(polyline)


    data.forEach((item, index) => {
        const [lng, lat] = item
        let position = new DC.Position(lng, lat)

        console.log(lng, lat)
        let billboard = null

        if (index === 0) {
            billboard = new DC.Billboard(position, startPng)
        }

        if (index === data.length - 1) {
            billboard = new DC.Billboard(position, endPng)
        }


        billboard && (billboard.size = [20, 20])
        billboard && (billboard.setStyle({
            "pixelOffset": { "x": 0, "y": -8 }
        }))
        billboard && polylineLayer.addOverlay(billboard)

        if (index !== 0 && index !== data.length - 1) {
            let divIcon = new DC.DivIcon(
                position,
                `<div class="point-icon-box">${index}</div>`
            )
            pointHtmlLayer.addOverlay(divIcon)
        }
    })

    const line = turf.lineString(positionStr.split(';').map(i => i.split(',')))
    const bbox = turf.bbox(line)
    const bboxPolygon = turf.bboxPolygon(bbox)

 src/styles/common.scss

@@ -13,8 +13,7 @@
.avue-sidebar,
.avue-top,
.avue-logo,
.avue-layout
.login-logo,
.avue-layout .login-logo,
.avue-main {
  transition: all .3s;
}
@@ -32,7 +31,9 @@
      height: $top_height;
      display: flex;

      .avue-menu, .el-menu-item, .el-sub-menu__title {
      .avue-menu,
      .el-menu-item,
      .el-sub-menu__title {
        height: $top_height;
        line-height: $top_height;
      }
@@ -57,6 +58,7 @@
}

.avue--collapse {

  .avue-sidebar,
  .avue-logo {
    width: $sidebar_collapse;
@@ -130,3 +132,23 @@
@import './media.scss';
//滚动条样式
@include scrollBar;


// 地图区域html标签样式调整
.div-icon {
  padding: 0px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 50% !important;

  .point-icon-box {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: rgb(255, 186, 0);
    border-radius: 50%;
  }
}

 src/views/tickets/orderLog.vue

@@ -923,7 +923,7 @@

      this.detailVisible = true

      this.initMapLine()
      this.initMapLine(data.device_map_infos)
    },
    async handleCheckDetail (row) {
      const response = await orderLogDetails(row.id)
@@ -936,7 +936,7 @@
      // 更新机巢列表
      this.device_sns = data.device_list
      this.detailVisibleCopy = true
      this.initMapLine()
      this.initMapLine(data.device_map_infos)
    },
    //导出
    async exportData () {
@@ -1010,7 +1010,7 @@
      this.initMapLine()
    },

    initMapLine () {
    initMapLine (infos = {}) {
      let currentLine = this.wayLineList.find(item => item.wayline_id == this.form.file_id)

      if (!currentLine) return
@@ -1038,6 +1038,11 @@
          return item.Point.coordinates.split(',')
        })

        if (JSON.stringify(infos) != '{}') positions.unshift([
          infos[0].longitude,
          infos[0].latitude,
        ])

        this.$nextTick(() => {
          if (this.$refs.MapContainer && this.$refs.MapContainer.initAddEntity) {
            this.$refs.MapContainer.initAddEntity('polyline', positions)