Libt
/
multiple-police-situations
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update offLineMap.vue

This commit is contained in:
TimSpan 2024-10-16 15:28:51 +08:00
parent aca5e39d18
commit e0b8261193
1 changed files with 60 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/views/page/offLineMap.vue
View File

@ -370,8 +370,6 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
// import L, {Marker} from 'leaflet'
// import * as Leaf from 'leaflet'
import L from 'leaflet' import L from 'leaflet'
import 'leaflet/dist/leaflet.css' import 'leaflet/dist/leaflet.css'
import 'leaflet.markercluster' import 'leaflet.markercluster'
@ -834,29 +832,37 @@ const getdayline = () => {
// 将 marker 添加到地图 // 将 marker 添加到地图
marker.addTo(state.map) marker.addTo(state.map)
} else { } else {
const marker = L.marker([lat, lng], {
icon: L.divIcon({
className: 'indexMarkerImg',
html: `<div class="indexMarkerImg">
<img style="width:30px;height:60px;left:9px;top:7px" src="${no}">
<div class="markerClass">
<div></div>
<div></div>
<div></div>
</div>
</div>`,
iconAnchor: [15, 30] // 根据需要调整锚点
}),
title: ''
})
// const marker = new AMap.Marker({ // 点击事件，显示自定义信息窗体
// position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude), marker.on('click', () => {
// offset: new AMap.Pixel(-20, -10), if (deviceInfoWindow.value) {
// content: `<div class="indexMarkerImg"> deviceInfoWindow.value.remove()
// <img style="width:30px;height:30px;left:9px;top:7px" src='${no}'> }
// <div class="markerClass"> deviceInfoWindow.value = L.popup({
// <div></div> closeButton: false
// <div></div> })
// <div></div> .setLatLng([lat, lng])
// </div> .setContent(createSubstanceInfowindow1(x, '1'))
// </div>`, .openOn(state.map)
// title: '' })
// })
// marker.on('click', function () { // 将 marker 添加到地图
// deviceInfoWindow.value = new AMap.InfoWindow({ marker.addTo(state.map)
// isCustom: true, //使用自定义窗体
// content: createSubstanceInfowindow1(x, '1'),
// offset: new AMap.Pixel(5, -13)
// })
// deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude])
// })
// state.map.add(marker)
} }
}) })
} }
@ -915,10 +921,8 @@ const gettotal = () => {
} }
}) })
} }
//
const selectA = (selectedKeys: any, e: any) => { const selectA = (selectedKeys: any, e: any) => {
// if (selectedKeys[0].length >= 13) {
try { try {
console.log('selectedKeys', selectedKeys, e) console.log('selectedKeys', selectedKeys, e)
let targetLatLngt = [e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude, e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude] let targetLatLngt = [e.selectedNodes[0].latitude == null ? 0 : e.selectedNodes[0].latitude, e.selectedNodes[0].longitude == null ? 0 : e.selectedNodes[0].longitude]
@ -942,9 +946,6 @@ const selectA = (selectedKeys: any, e: any) => {
} catch (error) { } catch (error) {
console.log('🚀 ~ selectA ~ error:', error) console.log('🚀 ~ selectA ~ error:', error)
} }
// state.map.setZoomAndCenter(205, targetLangLat)
// }
} }
const createSubstanceInfowindow = (obj: any, type: any) => { const createSubstanceInfowindow = (obj: any, type: any) => {
@ -1258,28 +1259,39 @@ const getRealTimeAlarmSituation = () => {
if (res.code == 0) { if (res.code == 0) {
listData.value = res.data.reverse() listData.value = res.data.reverse()
res.data.map((x: any) => { res.data.map((x: any) => {
const marker = new AMap.Marker({ const lat = x.latitude ?? 0
position: new AMap.LngLat(x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude), const lng = x.longitude ?? 0
offset: new AMap.Pixel(-10, -10), const marker = L.marker([lat, lng], {
content: `<div class="indexMarkerImg"> icon: L.divIcon({
<img style="width:30px;height:60px;left:9px;top:7px" src='${image4}'> className: 'indexMarkerImg',
html: `<div class="indexMarkerImg">
<img style="width:30px;height:60px;left:9px;top:7px" src="${image4}">
<div class="markerClass"> <div class="markerClass">
<div></div> <div></div>
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
</div>`, </div>`,
iconAnchor: [15, 30] // 根据需要调整锚点
}),
title: '' title: ''
}) })
marker.on('click', function () {
deviceInfoWindow.value = new AMap.InfoWindow({ // 点击事件，显示自定义信息窗体
isCustom: true, //使用自定义窗体 marker.on('click', () => {
content: createSubstanceInfowindow1(x, '1'), if (deviceInfoWindow.value) {
offset: new AMap.Pixel(5, -13) deviceInfoWindow.value.remove()
}
deviceInfoWindow.value = L.popup({
closeButton: false
}) })
deviceInfoWindow.value.open(state.map, [x.longitude == null ? 0 : x.longitude, x.latitude == null ? 0 : x.latitude]) .setLatLng([lat, lng])
.setContent(createSubstanceInfowindow1(x, '1'))
.openOn(state.map)
}) })
state.map.add(marker)
// 将 marker 添加到地图
marker.addTo(state.map)
}) })
} }
}) })