From f29baf0de835039296cc0d675d96447d7f3ded13 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Fri, 26 Sep 2025 17:09:16 +0800
Subject: [PATCH] =?UTF-8?q?=E8=9C=82=E9=B8=9F=E4=BA=913D=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/deviceManage/map/index.vue | 186 ++++++++++++++++++---------
 1 file changed, 127 insertions(+), 59 deletions(-)

diff --git a/src/views/deviceManage/map/index.vue b/src/views/deviceManage/map/index.vue
index ba4e2e1..8ca8e7a 100644
--- a/src/views/deviceManage/map/index.vue
+++ b/src/views/deviceManage/map/index.vue
@@ -3,6 +3,7 @@
     <div id="fengmap" />
     <div class="toolBarDiv" />
     <div class="rightMask" />
+    <div id="info" class="info" />
     <!-- <div v-if="debugInfo" class="debug-info">
       <pre>{{ debugInfo }}</pre>
     </div> -->
@@ -27,14 +28,8 @@
 
 <script>
 import fengmap from '@/assets/fengmap/fengmap.map.min'
-import {
-  FMControlPosition,
-  FMCompass,
-  FMZoomBar,
-  FMToolbar,
-  FMScaleBar
-} from '@/assets/fengmap/fengmap.plugin.ui.min.js'
-import '@/assets/fengmap/fengmap.analyser.min'
+import { FMControlPosition, FMCompass, FMZoomBar, FMToolbar, FMScaleBar } from '@/assets/fengmap/fengmap.plugin.ui.min.js'
+import { FMSearchRequest, FMSearchAnalyser } from '@/assets/fengmap/fengmap.analyser.min'
 import '@/assets/fengmap/fengmap.effect.min'
 
 export default {
@@ -50,7 +45,11 @@ export default {
       level: null,
       levels: null,
       floorObj: {},
-      activeFloor: null,
+      analyser: null,
+      imageMarkers: null,
+      marker: null,
+      floorInfo: [],
+
       debugInfo: null,
       markerColors: ['#409EFF', '#67C23A', '#E6A23C'] // 三个点的颜色
     }
@@ -74,7 +73,7 @@ export default {
           mapID: '1572162706543931393',
           // themeID: '1572162706543931393',
           // level: 3,
-          mapZoom: 19
+          mapZoom: 20.2
           // defaultViewMode: fengmap.FMViewMode.MODE_3D,
           // defaultControlsPose: 0,
           // defaultTiltAngle: 60,
@@ -159,6 +158,11 @@ export default {
           }
           const scaleBar = new FMScaleBar(scrollScaleBarCtlOpt)
           scaleBar.addTo(this.map)
+
+          this.analyser = new FMSearchAnalyser({ map: this.map }, () => {
+            // UI.initList()
+          })
+
           console.log('当前楼层', this.map.getLevel())
           console.log('所有楼层', this.map.getLevels())
 
@@ -167,19 +171,48 @@ export default {
           this.levels = this.map.getLevels()
 
           // console.log('所有楼层', this.map.getVisibleLevels())
-          const floorInfos = this.map.getFloorInfos().reverse()
-          console.log(floorInfos)
+          this.floorInfo = this.map.getFloorInfos()
+          console.log('所有楼层信息', this.floorInfos)
 
           // 设置聚焦楼层
           // this.map.setLevel({
           //   level: item
           // })
-          // this.addFloorsDom()
+          const ops = {
+            level: [1, 2, 3, 4],
+            // typeID: 210502,
+            text: '少儿',
+            search: true // 精确查询 false 模糊查询 true
+          }
+          this.search(ops)
+
+          // 根据FID查询
+          const floor = this.map.getFloor(this.level)
+          const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === '1026050201310')
+          console.log('model', model.getData())
+          model.setColor('red')
+          model.flash('red')
         }, { passive: true })
 
         this.map.on('click', (e) => {
-          console.log('地图点击事件:', e)
-          this.debugInfo = `点击坐标: x=${e.x}, y=${e.y}`
+          this.marker && this.marker.remove()
+          this.marker = null
+          const clickMode = e.targets.find(it => it.type === fengmap.FMType.MODEL)
+          let floor = this.floorInfo.find(it => it.level === e.level)
+
+          // 更新界面的点击信息
+          this.updateClickUI(e, clickMode, floor)
+
+          // 添加点击mark
+          this.marker = new fengmap.FMImageMarker({
+            url: 'https://developer.fengmap.com/fmAPI/images/red.png',
+            x: e.coords.x,
+            y: e.coords.y,
+            anchor: fengmap.FMMarkerAnchor.BOTTOM
+          })
+          const level = this.map.getLevel()
+          floor = this.map.getFloor(level)
+          this.marker.addTo(floor)
         }, { passive: true })
 
         this.map.on('mapInitError', (err) => {
@@ -191,54 +224,77 @@ export default {
         this.debugInfo = `初始化失败: ${error.message}`
       }
     },
+    updateClickUI(event, clickMode, floor) {
+      // 拾取模型对象
+      const target = event.targets[0]
+      console.log('event:', event)
+      console.log('拾取模型对象:', target)
+      console.log('name:', target?.name)
+      console.log('floor:', floor)
+      // 拾取模型类型
+      const mType = target?.type || 'NONE'
+      console.log('拾取模型类型:', mType)
+      // 封装拾取信息（新增 clickMode 和 floor 的展示）
+      let infoHtml = '<div class="layui-card-body">'
+      // infoHtml += `<p><label>事件触发：</label>${event.type}</p>`
+      // infoHtml += `<p><label>拾取对象类：</label>${mType}</p>`
+      // infoHtml += `<p><label>点击模式（目标）：</label>${clickMode?.type || clickMode}</p>` // 展示点击目标类型
+      infoHtml += `<p><label>当前楼层：</label>${floor?.name || floor}</p>` // 展示楼层名称/信息
+      infoHtml += `<p><label>当前区域：</label>${target?.name || '[位置]' + floor?.name}</p>` // 展示楼层名称/信息
+      infoHtml += `<p><label>level：</label>${event?.level || ''}</p>`
+      infoHtml += `<p><label>FID：</label>${target?.FID || ''}</p>`
+      infoHtml += `<p><label>点击位置坐标：</label>x：${event.coords.x || ''}<br/>y：${event.coords.y || ''}</p>`
+      infoHtml += `<p><label>元素中心点坐标：</label>x：${target?.x || ''}<br/>y：${target?.y || ''}</p>`
+      infoHtml += `</div>`
+      const infoDiv = document.getElementById('info')
+      infoDiv.innerHTML = infoHtml
+    },
 
-    addFloorsDom() {
-      // 获取所有楼层信息
-      const floorInfos = this.map.getFloorInfos().reverse()
-      console.log(floorInfos)
-
-      floorInfos.forEach(item => {
-        this.floorObj[item.level] = item.name
-      })
-      const dom = document.getElementsByClassName('fm-floor-list')[0]
-
-      this.levels.reverse().forEach((item) => {
-        const labelEle = document.createElement('label')
-        const textEle = document.createTextNode(this.floorObj[item])
-
-        // 增加楼层Dom点击事件
-        labelEle.onclick = function setLevelClick() {
-          console.log(item, this.floorObj)
-          this.level = item
-          // 设置聚焦楼层
-          this.map.setLevel({
-            level: item
-          })
-          // 更改样式
-          if (this.activeFloor) {
-            const activeDom = document.getElementById(this.activeFloor)
-            activeDom.classList.remove('fm-floor-name-active')
-            activeDom.classList.add('fm-floor-name-normal')
-          }
-          const dom = document.getElementById(this.floorObj[item])
-          dom.classList.remove('fm-floor-name-normal')
-          dom.classList.add('fm-floor-name-active')
-          this.activeFloor = this.floorObj[item]
+    search(ops) {
+      console.log('搜索参数:', ops)
+      const searchRequest = new FMSearchRequest()
+      console.log('searchRequest', searchRequest)
+      searchRequest.levels = ops.level
+      console.log('fengmap.FMType.MODEL', fengmap.FMType.MODEL)
+      searchRequest.type = fengmap.FMType.MODEL
+      // searchRequest.addCondition({ 'typeID': ops.typeID })
+      if (ops.text && ops.text !== '') {
+        searchRequest.addCondition({ 'keyword': { 'text': ops.text, fuzzy: ops.search }})
+      }
+      console.log('searchRequest', searchRequest)
+      this.analyser.query(searchRequest, (result) => {
+        const newResult = result.filter((item) => item.name !== undefined)
+        let data = []
+        if (ops.level.length > 1) {
+          data = newResult
+        } else {
+          data = newResult.filter((item) => item.level === ops.level[0])
         }
-
-        labelEle.id = this.floorObj[item]
-        labelEle.classList.add('fm-floor-name')
-        labelEle.classList.add('fm-floor-name-normal')
-        labelEle.appendChild(textEle)
-        dom.appendChild(labelEle)
-
-        const hrEle = document.createElement('hr')
-        hrEle.classList.add('fm-floor-line')
-        dom.appendChild(hrEle)
+        this.addImgMarker(data, ops)
       })
-      dom.removeChild(dom.childNodes[dom.childNodes.length - 1])
     },
-
+    addImgMarker(data, obj) {
+      if (this.imageMarkers) {
+        this.imageMarkers.forEach(item => { item.remove() })
+        this.imageMarkers = null
+      }
+      console.log('搜索结果:', data)
+      this.imageMarkers = data.map(feature => {
+        const marker = new fengmap.FMImageMarker({
+          url: 'https://developer.fengmap.com/fmAPI/images/red.png',
+          x: feature.center.x,
+          y: feature.center.y,
+          anchor: fengmap.FMMarkerAnchor.BOTTOM
+        })
+        const floor = this.map.getFloor(feature.level)
+        const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === feature.FID)
+        console.log('model', model.getData())
+        model.setColor('red')
+        marker.addTo(floor)
+        return marker
+      })
+    },
+    // -----------------------------------------------------------------
     getMarkerColor(index) {
       return this.markerColors[index]
     },
@@ -398,6 +454,18 @@ export default {
   z-index: 99999999;
 }
 
+.info{
+  position: absolute;
+  top: 0;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  width: 400px;
+  // height: 200px;
+  padding: 10px;
+  z-index: 999999999999;
+}
+
 /*.control-panel {
   position: fixed;
   top: 20px;