xuhuajiao
/
localization-management-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

蜂鸟云3D地图

master
xuhuajiao 1 month ago
parent
7d567a58c4
commit
f29baf0de8
1 changed files with 127 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 186
      src/views/deviceManage/map/index.vue

186
src/views/deviceManage/map/index.vue
View File

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

Write Preview
Loading…
Cancel
Save