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