From 89380e6260a75d1d3b94de687ebcc2f50d50659d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Tue, 03 Feb 2026 15:44:33 +0800
Subject: [PATCH] feat:环境变量配置调整
---
applications/mobile-web-view/src/appComponents/LeafletMap/index.vue | 631 ++++++++++++++++++++++----------------------------------
1 files changed, 249 insertions(+), 382 deletions(-)
diff --git a/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue b/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue
index 4686a46..8e43521 100644
--- a/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue
+++ b/applications/mobile-web-view/src/appComponents/LeafletMap/index.vue
@@ -1,18 +1,6 @@
<template>
<div class="page-container">
<div class="map" id="map"></div>
-
- <div class="weather-box" v-show="weatherShow">
- <div class="icon">
- <van-image :src="WEATHER?.[weather] || ''" width="100%" height="100%"></van-image>
- </div>
-
- <div class="content">
- <span class="tq">{{ weather }} {{ temperature }}</span>
- <span class="tq">风速:{{ windVelocity }}</span>
- </div>
- </div>
-
<div class="layer-btn" @click="layerChangePopupShow = true" v-show="layerShow">
<van-image width="20" height="20" :src="layerIcon" />
<div class="label">图层</div>
@@ -22,10 +10,7 @@
<van-image width="20" height="20" :src="locationIcon" />
<div class="label">定位</div>
</div>
-
<slot name="searchBar"></slot>
- <slot name="eventNav"></slot>
-
<van-popup v-model:show="layerChangePopupShow" position="bottom" round>
<div class="popup-container">
<div class="category-content">
@@ -48,60 +33,26 @@
</div>
</div>
</div>
- <div class="category-content">
- <div class="header base-header">
- <div class="title">基础图层</div>
- </div>
- <div class="content">
- <BaseLayerManage v-if="isMapReady" :getCurMap="getCurMap" />
- <!-- <el-tree-->
- <!-- :props="defaultProps"-->
- <!-- :data="treeData"-->
- <!-- show-checkbox-->
- <!-- node-key="id"-->
- <!-- :expand-on-click-node="false"-->
- <!-- :check-on-click-node="false"-->
- <!-- :check-on-click-leaf="false"-->
- <!-- @check="handleCheckChange"-->
- <!-- />-->
- </div>
- </div>
- <div class="category-content">
- <MapLayerManage
- v-for="item in customizeLayer"
- :options="item"
- :key="item.id"
- v-if="isMapReady"
- :getCurMap="getCurMap"
- />
- </div>
</div>
</van-popup>
</div>
</template>
<script setup>
+ import * as turf from '@turf/turf'
import addressLocationIcon from '@/appDataSource/leafletMapIcon/address-location.svg'
import droneIcon from '@/appDataSource/leafletMapIcon/drone-icon.svg'
import userLocationIcon from '@/appDataSource/leafletMapIcon/user-location.svg'
import layerIcon from '@/appDataSource/leafletMapIcon/layer-icon.svg'
import locationIcon from '@/appDataSource/leafletMapIcon/location-icon.svg'
import { useStore } from 'vuex'
-import { getEventPageSimpleApi } from '@/api/home/event'
-import { getDroneSuggest, getLayerTreeApi } from '@/api/home/common'
-import DroneMarkerPopup from '@/appComponents/DroneMarkerPopup/index.vue'
-import EventMarkerPopup from '@/appComponents/EventMarkerPopup/index.vue'
-import MapLayerManage from './MapLayerManage.vue'
-import BaseLayerManage from '@/appComponents/LeafletMap/BaseLayerManage.vue'
-import { getDeviceRegion, getMapEvents } from '@/api/home/aggregation'
-import { getIimitationArea } from '@/api/map/dji'
+import { showToast } from 'vant'
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 { getEventImage } from '@/utils/stateToImageMap/event'
-import { WEATHER } from '@/const/weather'
const emit = defineEmits(['location-selected'])
const { weatherShow, layerShow, locationShow, createWorkShow } = defineProps({
weatherShow: {
@@ -125,7 +76,6 @@
const isProd = import.meta.env.VITE_APP_ENV === 'production'
import { basemapLayer0, basemapLayer1, basemapLayer2, basemapLayer3 } from '@/const/leafletConst'
-import { useAreaBoundary } from '@/hooks/useAreaBoundary'
const basemap0 = L.layerGroup([basemapLayer0, basemapLayer1])
const basemap1 = L.layerGroup([basemapLayer2, basemapLayer3])
@@ -136,13 +86,13 @@
const layers = [
{
src: sl,
- name: '天地图电子',
+ name: '矢量',
key: 1,
map: basemap0,
},
{
src: yx,
- name: '天地图影像',
+ name: '影像',
key: 2,
map: basemap1,
},
@@ -154,8 +104,7 @@
let droneMarkersLayer = null
let eventMarkersLayer = null
let addressMarkersLayer = null
-
-let boundaryInstance = useAreaBoundary({ initFly: true })
+let mapLayerSourceLayer = null // 空域信息
const initMap = () => {
if (map) return
@@ -166,8 +115,7 @@
attributionControl: false,
doubleClickZoom: false,
editable: true, //绘制控件
- }).setView([25.992338, 114.823254], 3)
- boundaryInstance.initBoundary(map)
+ }).setView([27.117445, 114.984917], 10)
map.whenReady(() => {
isMapReady.value = true
@@ -176,6 +124,8 @@
droneMarkersLayer = L.layerGroup([], { pane: 'drones' }).addTo(map) // 创建一个标注层，便于管理和移除
eventMarkersLayer = L.layerGroup([], { pane: 'events' }).addTo(map) // 创建一个标注层，便于管理和移除
addressMarkersLayer = L.layerGroup([], { pane: 'addresses' }).addTo(map) // 创建一个标注层，便于管理和移除
+ // 空域信息
+ mapLayerSourceLayer = L.layerGroup([], { pane: 'mapLayerSource' }).addTo(map)
map.on('zoomend', function () {
var currentZoom = map.getZoom()
@@ -206,9 +156,9 @@
let locationFlag = false
let watchId = null
let userLocationMarker = null
-const setMapLocation = () => {
- locationFlag = true
+// 初始化实时位置监听
+const initLocationWatch = () => {
// 在WebView加载的网页中
// 检查浏览器是否支持 geolocation
if (navigator.geolocation) {
@@ -216,7 +166,6 @@
// 停止监听位置
navigator.geolocation.clearWatch(watchId)
}
-
// 开始持续获取用户的位置
watchId = navigator.geolocation.watchPosition(
function (position) {
@@ -224,31 +173,26 @@
const lat = position.coords.latitude // 纬度
const lng = position.coords.longitude // 经度
- if (locationFlag) {
- if (userLocationMarker) {
- userLocationMarker.setLatLng([lat, lng])
- } else {
- userLocationMarker = L.marker([lat, lng], {
- icon: L.icon({
+ // 确保位置标记存在并更新位置
+ 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)
- }
+ iconSize: [24, 24], // 图标尺寸
+ iconAnchor: [12, 12], // 锚点位置
+ }),
+ }).addTo(map)
+ }
+ // 如果是点击定位按钮触发的，将地图视图定位到当前位置
+ if (locationFlag) {
mapSetView({
lat,
lng,
})
-
locationFlag = false
-
- return
- }
-
- if (userLocationMarker) {
- userLocationMarker.setLatLng([lat, lng])
}
},
function (error) {
@@ -262,7 +206,25 @@
}
)
} else {
- console.log('Geolocation is not supported by this browser.')
+ 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)
+ }
}
}
let lastLocationMarker = null
@@ -294,9 +256,7 @@
const mapAddMarker = data => {
if (!map) return
-
const { lat, lng, zoom = 16, name = '', customClassName = '' } = data
-
mapSetView(data)
// 创建带有图标和文字的 divIcon
@@ -317,155 +277,201 @@
L.marker([lat, lng], { icon: droneHtmlIcon }).addTo(addressMarkersLayer)
}
-const mapOnlyShowDrone = (data = {}) => {
- const { device_sn = '' } = data
- eventMarkersLayer.clearLayers()
-
- if (droneAllData.length > 0 && device_sn !== '') {
- mapInitDroneMarkers(device_sn)
- } else {
- initDrone(device_sn)
+// 吉安项目-空域信息
+// 统一的飞行函数
+function flyVisual(coordinates) {
+ console.log(coordinates, '0000')
+ // 确保map对象存在且坐标有效
+ if (!map || !coordinates || !coordinates.length) return;
+
+ try {
+ // 改进坐标格式判断
+ let isSinglePoint = false;
+ let latLng;
+ let bounds;
+
+ // 处理不同格式的坐标输入
+ if (Array.isArray(coordinates[0])) {
+ if (coordinates[0].length === 2) {
+ // 格式: [[lng, lat]] - 单个点
+ isSinglePoint = true;
+ latLng = [coordinates[0][1], coordinates[0][0]]; // 转换为 [lat, lng]
+ } else if (coordinates[0].length > 2 && Array.isArray(coordinates[0][0])) {
+ // 格式: [[[lng, lat], [lng, lat], ...]] - 多边形
+ const polygonCoords = coordinates[0].map(coord => [coord[1], coord[0]]);
+ bounds = L.latLngBounds(polygonCoords);
+ } else {
+ // 格式: [[lng, lat], [lng, lat], ...] - 多个点或线
+ if (coordinates.length === 1) {
+ // 单个点
+ isSinglePoint = true;
+ latLng = [coordinates[0][1], coordinates[0][0]];
+ } else {
+ // 多个点
+ const leafletCoords = coordinates.map(coord => [coord[1], coord[0]]);
+ bounds = L.latLngBounds(leafletCoords);
+ }
+ }
+ } else if (coordinates.length === 2) {
+ // 格式: [lng, lat] - 单个点
+ isSinglePoint = true;
+ latLng = [coordinates[1], coordinates[0]];
+ }
+
+ if (isSinglePoint && latLng) {
+ // 单个坐标点
+ map.flyTo(latLng, 10, {
+ duration: 1,
+ easeLinearity: 0.2
+ });
+ } else if (bounds) {
+ // 多边形或多个点
+ map.flyToBounds(bounds, {
+ padding: [30, 30],
+ duration: 2,
+ maxZoom: 13
+ });
+ }
+ } catch (error) {
+ console.error('flyVisual 函数执行错误:', error);
}
-
- if (device_sn !== '') {
- getSignDroneEvents(device_sn)
- } else {
- initEvents()
+}
+// 点击单个飞行
+function signFlyToMarker(item) {
+ const positionsData = JSON.parse(item.content);
+ const coordinates = positionsData.coordinates;
+ console.log('coordinates数据:', coordinates, '类型:', typeof coordinates, '长度:', coordinates?.length);
+
+ // 更全面的空值检查
+ let hasValidCoordinates = false;
+
+ // 检查不同格式的坐标数据
+ if (Array.isArray(coordinates)) {
+ if (coordinates.length > 0) {
+ // 检查是否有有效的坐标点
+ if (Array.isArray(coordinates[0])) {
+ if (coordinates[0].length === 2 || coordinates[0].length === 3) {
+ // 格式: [lng, lat] 或 [lng, lat, alt]
+ hasValidCoordinates = true;
+ } else if (Array.isArray(coordinates[0][0])) {
+ // 格式: [[lng, lat], [lng, lat], ...]
+ hasValidCoordinates = coordinates[0].length > 0;
+ } else if (Array.isArray(coordinates[0][0][0])) {
+ // 格式: [[[lng, lat], [lng, lat], ...]]
+ hasValidCoordinates = coordinates[0][0].length > 0;
+ }
+ }
+ }
}
+
+ if (!hasValidCoordinates) {
+ console.log('没有有效的坐标数据，显示提示');
+ return showToast('暂无区域数据');
+ }
+
+ // 单个位置飞行
+ flyVisual(coordinates);
+}
+// 清空所有空域信息
+function mapClearAirMarker() {
+ if (!map) return
+ // 清空所有图层
+ if (mapLayerSourceLayer) {
+ mapLayerSourceLayer.clearLayers();
+ }
+}
+function mapAddAirMarker(data) {
+ // 清空所有图层
+ mapClearAirMarker()
+
+ data
+ .filter(item => item.content)
+ .forEach(item => {
+ const parseParsed = JSON.parse(item.content); // 转为数组
+ if (parseParsed.type !== 'Polygon') return
+ const parsed = parseParsed.coordinates[0]
+
+ const grouped = parsed.flat(); // 再展开
+
+ // 3. 计算多边形质心
+ const turfPolygon = turf.polygon([parsed]);
+ const center = turf.centerOfMass(turfPolygon);
+ const centerLatLng = [center.geometry.coordinates[1], center.geometry.coordinates[0]];
+
+ const labelMarker = L.marker(centerLatLng, {
+ icon: L.divIcon({
+ className: 'polygon-label',
+ html: `
+ <div style="
+ color: ${item.airspaceType === '0' ? '#008013' : '#ff0000'};
+ font-weight: bold;
+ font-size: 12px;
+ font-family: 'Source Han Sans CN', 'Source Han Sans CN';
+ white-space: nowrap;
+ ">
+ ${item.airspaceType === '1' ? '禁飞区' : item.airspaceType === '2' ? '危险区' : item.airspaceType === '3' ? '限制区' : item.airspaceType === '0' ? '适飞区' : '未知'}
+ </div>
+ `,
+ iconSize: null, // 让div决定大小
+ iconAnchor: null // 不需要锚点，用CSS transform居中
+ }),
+ interactive: false, // 标签不参与交互
+ // zIndexOffset: 1000 // 确保标签在最上层
+ });
+
+ // 将坐标数组转换为 Leaflet 格式 [lat, lng, lat, lng...] -> [[lat, lng], [lat, lng]...]
+ const latLngs = [];
+ for (let i = 0; i < grouped.length; i += 2) {
+ latLngs.push([grouped[i + 1], grouped[i]]); // 注意：Leaflet 是 [lat, lng] 顺序
+ }
+
+ // 创建多边形（填充区域）
+ const polygon = L.polygon(latLngs, {
+ color: item.airspaceType === '0' ? '#00ff06' : '#ff0000',
+ fillColor: item.airspaceType === '0' ? '#00ff06' : '#ff0000',
+ fillOpacity: 0.5,
+ weight: 0, // 隐藏多边形边框，使用折线作为边框
+ });
+
+ // 创建折线（边框）
+ const polyline = L.polyline([...latLngs, latLngs[0]], { // 闭合多边形
+ color: item.airspaceType === '0' ? '#00ff06' : '#ff0000',
+ weight: 1.5,
+ opacity: 1,
+ fill: false
+ });
+
+ // 将两个图层组合在一起
+ const group = L.featureGroup([polygon, polyline, labelMarker]);
+ // 添加到图层组
+ mapLayerSourceLayer.addLayer(group);
+ });
}
const mapClearMarker = () => {
addressMarkersLayer.clearLayers()
}
-let droneAllData = []
-
-const initDrone = (device_sn = '') => {
- getDeviceRegion({
- hidden_flag: 0,
- }).then(res => {
- const data = res?.data?.data || []
-
- droneAllData = data.filter(item => item.status !== 'OFFLINE')
-
- mapInitDroneMarkers(device_sn)
- })
-}
-
-const mapInitDroneMarkers = (device_sn = '') => {
- droneMarkersLayer.clearLayers()
-
- let materialColor = 'rgba(27, 215, 89, 40)'
- let frameColor = 'rgba(27, 215, 89, 255)'
-
- droneAllData
- .filter(item => item.device_sn === device_sn || device_sn === '')
- .forEach(item => {
- let event_num = item.event_num || 0
-
- if (event_num > 100) {
- materialColor = 'rgba(255, 37, 9, 40)'
- frameColor = 'rgba(255, 37, 9, 255)'
- } else if (event_num > 50) {
- materialColor = 'rgba(255, 171, 54, 40)'
- frameColor = 'rgba(255, 171, 54, 255)'
- } else {
- materialColor = 'rgba(27, 215, 89, 10)'
- frameColor = 'rgba(27, 215, 89, 255)'
- }
-
- buildCirclePolygon(item.latitude, item.longitude, materialColor, frameColor).addTo(droneMarkersLayer)
-
- publicAddMakers({
- ...item,
- makerType: 1,
- })
- })
-}
-
-const initEvents = () => {
- getMapEvents({}).then(res => {
- const resData = res?.data?.data?.data || []
-
- resData.forEach(item => {
- publicAddMakers({
- ...item,
- makerType: 2,
- })
- })
- })
-}
-
-const getSignDroneEvents = (device_sn = '') => {
- const params = {
- 'device_sn': device_sn,
- }
-
- getEventPageSimpleApi(params, { current: 1, size: 999999 }).then(res => {
- const resData = res?.data?.data || []
-
- resData.forEach(item => {
- publicAddMakers({
- ...item,
- makerType: 2,
- })
- })
- })
-}
-
// 天气
const store = useStore()
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
-const weather = ref('')
-// 风速
-const windVelocity = ref('')
-
-const temperature = ref('')
-
-// 获取天气建议
-const getWeatherSuggest = () => {
- getDroneSuggest({ areaCode: selectedAreaCode.value }).then(res => {
- if (res.data.code !== 0) return
- weather.value = res.data.data.weather
- windVelocity.value = res.data.data.windPower
- temperature.value = res.data.data.temperature
- })
-}
-
-// 获取后台自定义图层
-const customizeLayer = ref(null)
-function getLayerTree() {
- getLayerTreeApi().then(res => {
- const colorList = ['#00ff06', '#ff0000', '#00ffea']
- // const imgList = [dzwlSvg,zdyjfqSvg,gtkjghSvg]
- customizeLayer.value = res.data.data.map((item, index) => ({
- ...item,
- color: colorList[index],
- imgIcon: [], // imgList[index]
- }))
- if (isProd) {
- customizeLayer.value = customizeLayer.value.filter(i => i.id === 1)
- }
- })
-}
-
onMounted(async () => {
- getLayerTree()
- getWeatherSuggest()
await nextTick()
initMap()
map.addLayer(layers[0].map)
+ // 初始化实时位置监听
+ initLocationWatch()
+
EventBus.on('mapSetView', mapSetView)
EventBus.on('mapAddMarker', mapAddMarker)
+ EventBus.on('mapAddAirMarker', mapAddAirMarker)
+ EventBus.on('signFlyToMarker', signFlyToMarker)
+ EventBus.on('mapClearAirMarker', mapClearAirMarker)
EventBus.on('mapClearMarker', mapClearMarker)
- EventBus.on('mapOnlyShowDrone', mapOnlyShowDrone)
- initDrone()
- initEvents()
- // initEvents()
// L.circle([24, 112], {
// color: 'red', // 边框颜色
// fillColor: '#f03', // 填充颜色
@@ -475,129 +481,25 @@
})
onUnmounted(() => {
+ // 清理位置监听
+ if (watchId) {
+ navigator.geolocation.clearWatch(watchId)
+ watchId = null
+ }
+ // 移除位置标记
+ if (userLocationMarker) {
+ map.removeLayer(userLocationMarker)
+ userLocationMarker = null
+ }
+
EventBus.off('mapSetView', mapSetView)
EventBus.off('mapAddMarker', mapAddMarker)
+ EventBus.off('mapAddAirMarker', mapAddAirMarker)
+ EventBus.off('signFlyToMarker', signFlyToMarker)
+ EventBus.off('mapClearAirMarker', mapClearAirMarker)
EventBus.off('mapClearMarker', mapClearMarker)
- EventBus.off('mapOnlyShowDrone', mapOnlyShowDrone)
})
-function publicAddMakers(data) {
- // makerType 1 = 机巢, 2 = 事件点
- const { makerType, latitude, longitude } = data
-
- const customIcon = L.icon({
- iconUrl: makerType === 1 ? droneIcon : getEventImage(data.status), // 替换为你的图片路径
- iconSize: makerType === 1 ? [24, 24] : [20, 20], // 图标大小
- iconAnchor: makerType === 1 ? [12, 12] : [10, 10], // 图标的锚点（设置图片的底部中心）
- })
-
- let marker = null
-
- if (makerType === 1) {
- // 创建带有图标和文字的 divIcon
- let droneHtmlIcon = L.divIcon({
- html: `
- <div class="content">
- <img src="${droneIcon}">
- <span>
- ${data.nickname}
- </span>
- </div>
- `,
- className: 'ztzf-drone-custom-icon', // 可选，用于添加CSS类
- iconSize: [24, 24], // 设置图标大小
- iconAnchor: [12, 12],
- })
-
- marker = L.marker([latitude, longitude], { icon: droneHtmlIcon, zIndexOffset: 9 }).addTo(droneMarkersLayer)
- } else {
- marker = L.marker([latitude, longitude], {
- icon: customIcon,
- zIndexOffset: 1,
- }).addTo(eventMarkersLayer)
- }
-
- marker.on('click', e => {
- // 当前点击要素---关联数据
- marker.unbindPopup()
-
- const zoomLevel = map.getZoom()
-
- if (makerType === 1) {
- if (zoomLevel < 11) {
- mapSetView({
- lat: e.latlng.lat,
- lng: e.latlng.lng,
- zoom: 11,
- })
-
- return
- }
- }
-
- if (makerType !== 1) {
- if (zoomLevel < 13) {
- mapSetView({
- lat: e.latlng.lat,
- lng: e.latlng.lng,
- zoom: 13,
- })
-
- return
- }
- }
-
- const container = document.createElement('div')
-
- const popupApp = createApp(makerType === 1 ? DroneMarkerPopup : EventMarkerPopup, {
- data: e.target.options.customData,
- onClose: () => {
- marker.closePopup()
- popupApp.unmount() // 卸载 Vue 应用
- },
- })
-
- popupApp.mount(container)
-
- marker
- .bindPopup(container, {
- closeButton: false,
- className: 'custom-leaflet-popup',
- offset: L.point(80, 0),
- })
- .openPopup()
- })
-
- // 使用 marker 的 id 作为标识符
- marker.options.customData = data
-}
-
-// 构建圆形多边形
-function buildCirclePolygon(lat, lng, materialColor, frameColor) {
- var radius = 5000 / 100460 // 5000米转为大约的纬度差（纬度上的1度大约是111km）
- var parts = []
-
- for (var i = 0; i < 360; i++) {
- var radians = ((i + 1) * Math.PI) / 180
-
- // 计算新的点
- var circlePoint = [
- Math.cos(radians) * radius + lat, // 纬度偏移
- Math.sin(radians) * radius + lng, // 经度偏移，需考虑纬度的影响
- ]
-
- parts[i] = circlePoint
- }
-
- // 生成多边形，近似圆形
- var polygon = L.polygon(parts, {
- color: frameColor,
- fillColor: materialColor,
- weight: 1,
- })
-
- return polygon
-}
</script>
<style lang="scss" scoped>
@@ -611,61 +513,6 @@
height: 100%;
}
- .weather-box {
- padding: 4px 0;
- padding-right: 6px;
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- top: 12px;
- left: 12px;
-
- height: 48px;
- background: #fff;
- z-index: 996;
-
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.18);
- border-radius: 6px 6px 6px 6px;
-
- .icon {
- margin-left: 10px;
- width: 24px;
- height: 24px;
- }
-
- .content {
- height: 100%;
- margin-left: 4px;
- display: flex;
- flex-direction: column;
- justify-content: space-around;
-
- font-family: Source Han Sans CN, Source Han Sans CN;
- font-weight: 400;
- font-size: 12px;
- color: #757575;
- text-align: left;
- font-style: normal;
- text-transform: none;
- }
-
- .tq {
- margin: 0 5px;
- }
- .qk {
- margin-left: 5px;
- color: #04f043;
- }
- .yellowqk {
- margin-left: 5px;
- color: yellow;
- }
- .redqk {
- margin-left: 5px;
- color: red;
- }
- }
.location-btn,
.layer-btn {
@@ -785,4 +632,24 @@
}
}
}
+
+// 位置标记闪烁效果
+.location-blink {
+ animation: blink 1s ease-in-out;
+}
+
+@keyframes blink {
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 50% {
+ transform: scale(1.2);
+ opacity: 0.8;
+ }
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
</style>
--
Gitblit v1.9.3