|
|
|
|
@ -1,16 +1,22 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div @dragenter.prevent="onDragEnter" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop="drop" id="map"
|
|
|
|
|
:style="{ width: '70vw', height: '70vh' }"></div>
|
|
|
|
|
<j-card :style="{ width: '100%', height: 'calc(100vh - 120px)', }">
|
|
|
|
|
<div @dragenter.prevent="onDragEnter" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop="drop"
|
|
|
|
|
id="map" :style="{ width: '100%', height: 'calc(100vh - 120px)' }">
|
|
|
|
|
</div>
|
|
|
|
|
</j-card>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts" name="Role">
|
|
|
|
|
import "leaflet/dist/leaflet.css";
|
|
|
|
|
import { LatLngBoundsExpression, Layer, LayerGroup, Map } from 'leaflet';
|
|
|
|
|
import { addMonitor, editMonitor, deleteMonitor } from '@/api/monitor';
|
|
|
|
|
import { monitorType } from '../type'
|
|
|
|
|
import * as L from 'leaflet'
|
|
|
|
|
import { filterTreeItem } from '@/utils/comm'
|
|
|
|
|
import { filterTreeItem, onlyMessage } from '@/utils/comm'
|
|
|
|
|
import bg from '/images/bind/bdt.png'
|
|
|
|
|
import { deviceIcons,stateIcons } from '@/assets/diviceIcon'
|
|
|
|
|
import { deviceIcons, stateIcons } from '@/assets/diviceIcon'
|
|
|
|
|
import { pad } from "lodash-es";
|
|
|
|
|
interface MarkerType extends Layer {
|
|
|
|
|
markerId?: string | number
|
|
|
|
|
}
|
|
|
|
|
@ -49,15 +55,38 @@ const createMarkers = (info: monitorType): MarkerType => {
|
|
|
|
|
}
|
|
|
|
|
//初始化画板
|
|
|
|
|
const loadMap = () => {
|
|
|
|
|
const imageBounds: LatLngBoundsExpression = [[0, 0], [1000, 1980]];
|
|
|
|
|
const imageBounds: LatLngBoundsExpression = [[0, 0], [1080, 1980]];
|
|
|
|
|
if (map.value) {
|
|
|
|
|
|
|
|
|
|
//114.34,30.58
|
|
|
|
|
} else {
|
|
|
|
|
map.value = L.map('map', {
|
|
|
|
|
//, {
|
|
|
|
|
//crs: L.CRS.Simple,
|
|
|
|
|
// minZoom: -1,
|
|
|
|
|
// maxZoom: 16,
|
|
|
|
|
// center: [1, 1],
|
|
|
|
|
// zoom: -1,
|
|
|
|
|
// //maxBounds: imageBounds,
|
|
|
|
|
// attributionControl: false,//默认情况下，是否将 attribution 版权控件添加到地图中。
|
|
|
|
|
// zoomControl: false,//默认情况下，是否将 zoom 缩放控件添加到地图中。
|
|
|
|
|
//})
|
|
|
|
|
map.value = L.map('map')
|
|
|
|
|
map.value.setView([30.58, 114.34,], 10);
|
|
|
|
|
const stamenLayer = L.tileLayer('/static/map/{z}/{x}/{y}/tile.png', {
|
|
|
|
|
attribution: '垃圾程序员', // 图层属性信息※
|
|
|
|
|
minZoom: 10, // 最小缩放级别※
|
|
|
|
|
maxZoom: 15 // 最大缩放级别※
|
|
|
|
|
}).addTo(map.value);
|
|
|
|
|
//map.value.setMaxBounds(imageBounds);
|
|
|
|
|
markers.value = L.layerGroup()
|
|
|
|
|
map.value.addLayer(markers.value);
|
|
|
|
|
map.value.on('dblclick', () => {
|
|
|
|
|
map.value?.setZoom(-1)
|
|
|
|
|
})
|
|
|
|
|
/* map.value = L.map('map', {
|
|
|
|
|
crs: L.CRS.Simple,
|
|
|
|
|
minZoom: -1,
|
|
|
|
|
maxZoom: 16,
|
|
|
|
|
center: [0, 1],
|
|
|
|
|
center: [1, 1],
|
|
|
|
|
zoom: -1,
|
|
|
|
|
maxBounds: imageBounds,
|
|
|
|
|
attributionControl: false,//默认情况下，是否将 attribution 版权控件添加到地图中。
|
|
|
|
|
@ -70,24 +99,25 @@ const loadMap = () => {
|
|
|
|
|
map.value.addLayer(markers.value);
|
|
|
|
|
map.value.on('dblclick', () => {
|
|
|
|
|
map.value?.setZoom(-1)
|
|
|
|
|
})
|
|
|
|
|
}) */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
const drop = (event: DragEvent) => {
|
|
|
|
|
const drop = async (event: DragEvent) => {
|
|
|
|
|
//event.preventDefault()
|
|
|
|
|
const mouseEventLatLng = map.value?.mouseEventToLatLng(event);
|
|
|
|
|
if (mouseEventLatLng) {
|
|
|
|
|
const { lat, lng } = mouseEventLatLng;
|
|
|
|
|
//const dragEvent = event as DragEvent;
|
|
|
|
|
let monitorData = JSON.parse(event.dataTransfer?.getData('monitorData') || '');
|
|
|
|
|
console.log("🚀 monitorData:", monitorData, lat, lng)
|
|
|
|
|
//存在则修改位置
|
|
|
|
|
if (monitorData.positionX) {
|
|
|
|
|
|
|
|
|
|
//不存在则创建marker
|
|
|
|
|
} else {
|
|
|
|
|
const res = await editMonitor({ ...monitorData, positionX: lng, positionY: lat });
|
|
|
|
|
if (res.result) {
|
|
|
|
|
onlyMessage('保存成功');
|
|
|
|
|
if (!monitorData.positionX) {
|
|
|
|
|
markers.value?.addLayer(createMarkers({ ...monitorData, positionX: lng, positionY: lat }))
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -101,9 +131,10 @@ const onDragOver = (event: MouseEvent) => {
|
|
|
|
|
const onDragLeave = (event: MouseEvent) => {
|
|
|
|
|
console.log('Drag leave');
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
loadMap()
|
|
|
|
|
mapMonitorList.value = filterTreeItem(props.listData, 'children', (i) => i.level == 2 && i.positionX)
|
|
|
|
|
mapMonitorList.value = filterTreeItem(props.listData, 'children', (i) => i.positionX)
|
|
|
|
|
mapMonitorList.value.forEach((i: monitorType) => {
|
|
|
|
|
markers.value?.addLayer(createMarkers(i))
|
|
|
|
|
})
|
|
|
|
|
@ -113,7 +144,11 @@ onMounted(() => {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.leaflet-container{
|
|
|
|
|
.leaflet-container {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.ant-card-body) {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
zhangliang
7 months ago