<template>
|
<div class="page-container">
|
<div class="map" id="map"></div>
|
<div class="location-btn" @click="setMapLocation" v-show="locationShow">
|
<van-image width="20" height="20" :src="locationIcon" />
|
<div class="label">定位</div>
|
</div>
|
<div class="nav-btn" @click="openNavigation" v-show="navigationTarget">
|
<van-image width="20" height="20" :src="mapnavIcon" />
|
<div class="label">导航</div>
|
</div>
|
<van-action-sheet
|
v-model:show="navigationSheetShow"
|
:actions="navigationActions"
|
cancel-text="取消"
|
@select="handleNavigationSelect"
|
/>
|
|
|
|
</div>
|
</template>
|
|
<script setup>
|
import { searchGeocoder } from '@/utils/util'
|
import { showToast } from 'vant'
|
import mapnavIcon from '@/appDataSource/appwork/mapnav.svg'
|
import incidentPoint from '@/appDataSource/appwork/positioning1.svg'
|
import userLocationIcon from '@/appDataSource/leafletMapIcon/user-location.svg'
|
import locationIcon from '@/appDataSource/leafletMapIcon/location-icon.svg'
|
import { useStore } from 'vuex'
|
import { basemapLayer0, basemapLayer1, basemapLayer2, basemapLayer3 } from '@/const/leafletConst'
|
|
import L from 'leaflet'
|
import 'leaflet/dist/leaflet.css'
|
import sl from '@/appDataSource/leafletMapIcon/sl.svg'
|
import yx from '@/appDataSource/leafletMapIcon/yx.svg'
|
import EventBus from '@/utils/eventBus'
|
|
import { wgs84ToGcj02 } from '@/utils/coordinateTransformation'
|
const emit = defineEmits(['location-selected'])
|
import _ from 'lodash'
|
const { locationShow, createWorkShow, workNavigationShow, mapCurrentDetail, clearMarker } =
|
defineProps({
|
locationShow: {
|
type: Boolean,
|
default: false,
|
},
|
createWorkShow: {
|
type: Boolean,
|
default: false,
|
},
|
workNavigationShow: {
|
type: Boolean,
|
default: false,
|
},
|
mapCurrentDetail: {
|
type: Object,
|
},
|
clearMarker: {
|
type: Boolean,
|
default: false,
|
},
|
})
|
const currentAddress = ref('')
|
const AMAP_KEY = '5b8ba312d053e4bdb44911733ece7d63'
|
const navigationSheetShow = ref(false)
|
const navigationActions = [{ name: '高德地图' }, { name: '百度地图' }, { name: '腾讯地图' }]
|
const navigationTarget = computed(() => {
|
if (!workNavigationShow || !mapCurrentDetail?.longitude || !mapCurrentDetail?.latitude) return null
|
|
const lat = parseFloat(mapCurrentDetail.latitude)
|
const lng = parseFloat(mapCurrentDetail.longitude)
|
if (Number.isNaN(lat) || Number.isNaN(lng)) return null
|
|
return {
|
lat,
|
lng,
|
name: mapCurrentDetail.eventLocation || mapCurrentDetail.address || '工单位置',
|
}
|
})
|
|
const basemap0 = L.layerGroup([basemapLayer0, basemapLayer1])
|
const basemap1 = L.layerGroup([basemapLayer2, basemapLayer3])
|
|
let map = null
|
|
const layers = [
|
{
|
src: sl,
|
name: '天地图电子',
|
key: 1,
|
map: basemap0,
|
},
|
{
|
src: yx,
|
name: '天地图影像',
|
key: 2,
|
map: basemap1,
|
},
|
]
|
|
const setSelectMapLayerKey = ref(1) // 选择的地图图层
|
let markersLayer = null
|
const initMap = () => {
|
if (map) return
|
|
map = L.map('map', {
|
preferCanvas: true,
|
crs: L.CRS.EPSG4326,
|
zoomControl: false,
|
attributionControl: false,
|
doubleClickZoom: false,
|
editable: true, //绘制控件
|
}).setView([25.992338, 114.823254], 13)
|
|
markersLayer = L.layerGroup().addTo(map) // 创建一个标注层，便于管理和移除
|
if (createWorkShow) {
|
getMapLocation()
|
}
|
}
|
|
const setMapLayer = item => {
|
map.removeLayer(layers.find(i => i.key === setSelectMapLayerKey.value).map)
|
|
map.addLayer(item.map)
|
|
setSelectMapLayerKey.value = item.key
|
}
|
|
let locationFlag = false
|
let watchId = null
|
let userLocationMarker = null
|
|
// 初始化实时位置监听
|
const initLocationWatch = () => {
|
// 在WebView加载的网页中
|
// 检查浏览器是否支持 geolocation
|
if (navigator.geolocation) {
|
if (watchId) {
|
// 停止监听位置
|
navigator.geolocation.clearWatch(watchId)
|
}
|
// 开始持续获取用户的位置
|
watchId = navigator.geolocation.watchPosition(
|
function (position) {
|
// 成功获取位置信息时回调
|
const lat = position.coords.latitude // 纬度
|
const lng = position.coords.longitude // 经度
|
|
// 确保位置标记存在并更新位置
|
if (userLocationMarker) {
|
userLocationMarker.setLatLng([lat, lng])
|
} else {
|
userLocationMarker = L.marker([lat, lng], {
|
icon: L.icon({
|
iconUrl: userLocationIcon, // 图片路径
|
iconSize: [24, 24], // 图标尺寸
|
iconAnchor: [12, 12], // 锚点位置
|
}),
|
}).addTo(map)
|
}
|
|
// 如果是点击定位按钮触发的，将地图视图定位到当前位置
|
if (locationFlag) {
|
mapSetView({
|
lat,
|
lng,
|
})
|
locationFlag = false
|
}
|
},
|
function (error) {
|
// 如果获取位置失败，执行回调
|
console.error('Error occurred: ' + error.message)
|
},
|
{
|
enableHighAccuracy: true, // 尝试获取更高精度的定位
|
timeout: 10000, // 如果10秒内没有获取到位置，就中止
|
maximumAge: 0, // 始终请求新的定位，不使用缓存
|
}
|
)
|
} else {
|
console.log('该浏览器不支持地理定位功能。')
|
}
|
}
|
|
const setMapLocation = () => {
|
locationFlag = true
|
// 如果还没有开始监听位置，先初始化监听
|
if (!watchId) {
|
initLocationWatch()
|
} else {
|
// 已经在监听位置，会自动定位到当前位置
|
// 可以添加一个视觉反馈，比如位置标记闪烁效果
|
if (userLocationMarker) {
|
// 添加闪烁效果
|
userLocationMarker.getElement().classList.add('location-blink')
|
setTimeout(() => {
|
userLocationMarker.getElement().classList.remove('location-blink')
|
}, 1000)
|
}
|
}
|
}
|
|
function openNavigation() {
|
if (!navigationTarget.value) {
|
showToast('暂无可导航的位置')
|
return
|
}
|
|
navigationSheetShow.value = true
|
}
|
|
function handleNavigationSelect(action) {
|
navigationSheetShow.value = false
|
const url = getNavigationUrl(action.name, navigationTarget.value)
|
if (url) {
|
window.location.href = url
|
}
|
}
|
|
function getNavigationUrl(type, target) {
|
const [gcjLng, gcjLat] = wgs84ToGcj02(target.lng, target.lat)
|
const name = encodeURIComponent(target.name)
|
|
if (type === '高德地图') {
|
return `https://uri.amap.com/navigation?to=${gcjLng},${gcjLat},${name}&mode=car&policy=1&coordinate=gaode&callnative=1`
|
}
|
|
if (type === '百度地图') {
|
return `https://api.map.baidu.com/direction?destination=latlng:${gcjLat},${gcjLng}|name:${name}&mode=driving&coord_type=gcj02&output=html&src=ja-web`
|
}
|
|
if (type === '腾讯地图') {
|
return `https://apis.map.qq.com/uri/v1/routeplan?type=drive&tocoord=${gcjLat},${gcjLng}&to=${name}&referer=ja-web`
|
}
|
|
return ''
|
}
|
|
let lastLocationMarker = null
|
const getMapLocation = async () => {
|
const customIcon = L.icon({
|
iconUrl: mapnavIcon,
|
iconSize: [26, 26],
|
iconAnchor: [16, 32],
|
})
|
|
map.off('click')
|
map.on('click', async function (e) {
|
const { lat, lng } = e.latlng
|
const [gcjLng, gcjLat] = wgs84ToGcj02(lng, lat)
|
|
searchGeocoder(gcjLng, gcjLat, selectedAreaCode.value, (err, data) => {
|
currentAddress.value = data.formattedAddress
|
|
if (lastLocationMarker) {
|
map.removeLayer(lastLocationMarker)
|
}
|
|
lastLocationMarker = L.marker([lat, lng], {
|
icon: customIcon,
|
}).addTo(map)
|
lastLocationMarker
|
.bindPopup(
|
`<div style="font-size: 12px; ">
|
${currentAddress.value || '未知地址'}
|
</div>`,
|
{
|
maxWidth: Math.round(document.getElementById('map').clientWidth * 0.7),
|
offset: L.point(-3, -customIcon.options.iconSize[1]),
|
}
|
)
|
.openPopup()
|
emit('location-selected', {
|
latitude: lat,
|
longitude: lng,
|
address: currentAddress.value,
|
})
|
})
|
})
|
}
|
watch(
|
() => clearMarker,
|
isClear => {
|
if (isClear && createWorkShow) {
|
if (lastLocationMarker) {
|
map.removeLayer(lastLocationMarker)
|
lastLocationMarker = null
|
}
|
|
currentAddress.value = ''
|
}
|
},
|
{ immediate: false }
|
)
|
const mapSetView = data => {
|
const { lat, lng, zoom = 16 } = data
|
|
if (!map) return
|
|
map.setView([lat, lng], zoom, {
|
animate: false, // 使用动画过渡
|
})
|
}
|
|
// 天气
|
const store = useStore()
|
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
|
|
// 存储事件点标记实例，用于后续更新或移除
|
let incidentMarker = null
|
|
function formatCoordinate(value) {
|
const numberValue = Number(value)
|
return Number.isNaN(numberValue) ? value : numberValue.toFixed(6)
|
}
|
|
// 添加事件点标记
|
function addIncidentMarker(data) {
|
// 检查地图和标记层是否已初始化
|
if (!map || !markersLayer) {
|
setTimeout(() => addIncidentMarker(data), 100)
|
return
|
}
|
|
// 如果已有标记，先移除
|
if (incidentMarker) {
|
markersLayer.removeLayer(incidentMarker)
|
}
|
|
// 解析经纬度
|
const lat = parseFloat(data.latitude)
|
const lng = parseFloat(data.longitude)
|
|
if (isNaN(lat) || isNaN(lng)) {
|
console.error('经纬度格式错误')
|
return
|
}
|
|
const incidentIcon = L.icon({
|
iconUrl: incidentPoint, // 使用引入的事件点图标
|
iconSize: [24, 28], // 图标尺寸
|
iconAnchor: [15, 15], // 图标锚点（中心点）
|
})
|
|
// 创建标记并添加到标记层
|
incidentMarker = L.marker([lat, lng], {
|
icon: incidentIcon,
|
zIndexOffset: 1000, // 确保该标记显示在其他标记上方
|
}).addTo(markersLayer)
|
|
// 存储关联数据
|
incidentMarker.options.customData = data
|
incidentMarker.bindTooltip(
|
`<div class="coordinate-label">
|
<div>经度：${formatCoordinate(lng)}</div>
|
<div>纬度：${formatCoordinate(lat)}</div>
|
</div>`,
|
{
|
permanent: true,
|
direction: 'top',
|
offset: L.point(0, -16),
|
opacity: 1,
|
className: 'incident-coordinate-tooltip',
|
}
|
)
|
|
// 定位到该标记点
|
mapSetView({
|
lat,
|
lng,
|
zoom: 17,
|
})
|
}
|
const mapCurrentDetailData = ref({})
|
watch(
|
() => mapCurrentDetail,
|
newVal => {
|
const newDataMap=newVal
|
// 只有 workNavigationShow 为 true 且有经纬度时才添加标记
|
if (workNavigationShow && newDataMap?.longitude && newDataMap?.latitude) {
|
addIncidentMarker(newDataMap)
|
mapCurrentDetailData.value = newDataMap
|
} else if (!workNavigationShow && incidentMarker) {
|
// 当 workNavigationShow 变为 false 时，移除已添加的标记
|
markersLayer.removeLayer(incidentMarker)
|
incidentMarker = null
|
}
|
},
|
{ immediate: true, deep: true }
|
)
|
|
|
onMounted(async () => {
|
|
await nextTick()
|
initMap()
|
map.addLayer(layers[0].map)
|
|
// 初始化实时位置监听
|
initLocationWatch()
|
|
EventBus.on('mapSetView', mapSetView)
|
})
|
|
onUnmounted(() => {
|
// 清理位置监听
|
if (watchId) {
|
navigator.geolocation.clearWatch(watchId)
|
watchId = null
|
}
|
// 移除位置标记
|
if (userLocationMarker) {
|
map.removeLayer(userLocationMarker)
|
userLocationMarker = null
|
}
|
|
EventBus.off('mapSetView', mapSetView)
|
if (map) {
|
map.remove()
|
map = null
|
}
|
if (markersLayer) {
|
markersLayer.clearLayers()
|
markersLayer = null
|
}
|
incidentMarker = null
|
mapCurrentDetailData.value = {}
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.page-container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
.map {
|
width: 100%;
|
height: 100%;
|
}
|
.location-btn,
|
.nav-btn{
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
position: absolute;
|
right: 8px;
|
width: 40px;
|
height: 40px;
|
background: #ffffff;
|
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
|
border-radius: 6px 6px 6px 6px;
|
z-index: 996;
|
|
.label {
|
font-size: 10px;
|
}
|
}
|
.location-btn {
|
bottom: 76px;
|
}
|
.nav-btn {
|
bottom: 28px;
|
}
|
}
|
|
// 位置标记闪烁效果
|
.location-blink {
|
animation: blink 1s ease-in-out;
|
}
|
|
:deep(.incident-coordinate-tooltip) {
|
padding: 0;
|
border: 0;
|
background: transparent;
|
box-shadow: none;
|
|
&::before {
|
display: none;
|
}
|
}
|
|
:deep(.coordinate-label) {
|
padding: 4px 7px;
|
background: rgba(255, 255, 255, 0.95);
|
border: 1px solid rgba(76, 133, 255, 0.35);
|
border-radius: 4px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
|
font-size: 11px;
|
line-height: 16px;
|
color: #222324;
|
white-space: nowrap;
|
}
|
|
@keyframes blink {
|
0% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
50% {
|
transform: scale(1.2);
|
opacity: 0.8;
|
}
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
</style>
|
