4 changed files with 317 additions and 35 deletions
-
36src/api/map/index.js
-
37src/views/deviceManage/floor/index.vue
-
129src/views/deviceManage/map3d/index.vue
-
150src/views/deviceManage/map3d/map.vue
@ -0,0 +1,36 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
import qs from 'qs' |
||||
|
|
||||
|
export function add(data) { |
||||
|
return request({ |
||||
|
url: 'api/fengmap/editMap', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export function edit(data) { |
||||
|
return request({ |
||||
|
url: 'api/fengmap/editMap', |
||||
|
method: 'post', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// export function del(ids) {
|
||||
|
// return request({
|
||||
|
// url: 'api/libraryRegion/delLibraryRegion',
|
||||
|
// method: 'post',
|
||||
|
// data: ids
|
||||
|
// })
|
||||
|
// }
|
||||
|
|
||||
|
// 根据id查询地图详情
|
||||
|
export function FetchMapDetails(params) { |
||||
|
return request({ |
||||
|
url: 'api/fengmap/getMapDetails' + '?' + qs.stringify(params, { indices: false }), |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { add, edit, FetchMapDetails } |
||||
@ -0,0 +1,150 @@ |
|||||
|
<template> |
||||
|
<div style="position: relative; width: 100%; height: 720px; "> |
||||
|
<div id="fengmap" /> |
||||
|
<div class="rightMask" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import fengmap from '@/assets/fengmap/fengmap.map.min' |
||||
|
import { FMControlPosition, FMToolbar, FMScaleBar } from '@/assets/fengmap/fengmap.plugin.ui.min.js' |
||||
|
|
||||
|
export default { |
||||
|
name: 'FengMap', |
||||
|
props: { |
||||
|
mapData: { |
||||
|
type: Object, |
||||
|
require: true, |
||||
|
default: function() { |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
map: null, |
||||
|
level: null, |
||||
|
levels: null, |
||||
|
marker: null, |
||||
|
scrollFloorControl: null, |
||||
|
scaleBar: null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
mapData: { |
||||
|
handler(newVal, oldVal) { |
||||
|
if (!newVal) { |
||||
|
console.log('newVal-null') |
||||
|
return |
||||
|
} |
||||
|
}, |
||||
|
deep: true |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('mapData', this.mapData) |
||||
|
}, |
||||
|
methods: { |
||||
|
dispose() { |
||||
|
this.scrollFloorControl.remove() |
||||
|
this.map.dispose() |
||||
|
this.map = null |
||||
|
}, |
||||
|
initMap() { |
||||
|
window.vueInstance = null |
||||
|
try { |
||||
|
console.log('开始初始化地图') |
||||
|
const options = { |
||||
|
container: document.getElementById('fengmap'), |
||||
|
appName: this.mapData && this.mapData.appName, |
||||
|
key: this.mapData && this.mapData.mapKey, |
||||
|
mapID: this.mapData && this.mapData.appId, |
||||
|
// mapURL: '/fengmap/data/', |
||||
|
// themeID: '1574346301450625025', |
||||
|
// themeURL: '/fengmap/data/theme/', |
||||
|
mapZoom: 19.5, |
||||
|
backgroundColor: '#fff' |
||||
|
} |
||||
|
console.log('地图配置:', options) |
||||
|
|
||||
|
this.map = new fengmap.FMMap(options) |
||||
|
console.log('地图实例已创建') |
||||
|
|
||||
|
// this.map.on('loadingProcess', (event) => { |
||||
|
// console.log('加载进度:', event.progress) |
||||
|
// this.debugInfo = `加载进度: ${event.progress}%` |
||||
|
// }) |
||||
|
|
||||
|
this.map.on('loaded', () => { |
||||
|
console.log('地图加载完成') |
||||
|
this.map.setViewMode(fengmap.FMViewMode.MODE_3D) |
||||
|
|
||||
|
// 楼层控件 |
||||
|
const scrollFloorCtlOpt = { |
||||
|
position: FMControlPosition.RIGHT_TOP, |
||||
|
floorButtonCount: 5, |
||||
|
offset: { |
||||
|
x: -20, |
||||
|
y: 150 |
||||
|
}, |
||||
|
viewModeControl: true, |
||||
|
floorModeControl: true, |
||||
|
needAllLayerBtn: true |
||||
|
} |
||||
|
this.scrollFloorControl = new FMToolbar(scrollFloorCtlOpt) |
||||
|
this.scrollFloorControl.addTo(this.map) |
||||
|
|
||||
|
// 比例尺控件 |
||||
|
const scrollScaleBarCtlOpt = { |
||||
|
fontSize: 18, |
||||
|
height: 30, |
||||
|
position: FMControlPosition.LEFT_BOTTOM, |
||||
|
offset: { |
||||
|
x: 20, |
||||
|
y: -20 |
||||
|
} |
||||
|
} |
||||
|
this.scaleBar = new FMScaleBar(scrollScaleBarCtlOpt) |
||||
|
this.scaleBar.addTo(this.map) |
||||
|
|
||||
|
window.vueInstance = this |
||||
|
console.log('Vue实例已全局挂载：', window.vueInstance) |
||||
|
}, { passive: true }) |
||||
|
|
||||
|
this.map.on('click', (e) => { |
||||
|
this.marker && this.marker.remove() |
||||
|
this.marker = null |
||||
|
}, { passive: true }) |
||||
|
|
||||
|
this.map.on('mapInitError', (err) => { |
||||
|
console.error('地图初始化错误:', err) |
||||
|
this.debugInfo = `地图初始化错误: ${err.message}` |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.error('初始化地图失败:', error) |
||||
|
this.debugInfo = `初始化失败: ${error.message}` |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
@import "~@/assets/fengmap/toolBarStyle.css"; |
||||
|
#fengmap { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: #f5f5f5; |
||||
|
} |
||||
|
.rightMask{ |
||||
|
width: 162px; |
||||
|
height: 42px; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
background: #fff; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue