feat:更新小程序

chenyao

2026-01-19 8bb6ee0f9a2dcf69156f52cff194ce8b48a843f9

feat:更新小程序

 applications/mobile-web-view/src/appComponents/LeafletMap/indexWX.vue

New file
@@ -0,0 +1,607 @@
<template>
    <div class="page-container">
        <div class="map" id="map"></div>
        <!-- <div class="layer-btn" @click="layerChangePopupShow = true" v-show="layerShow">
            <van-image width="20" height="20" :src="layerIcon" />
            <div class="label">图层</div>
        </div>

        <div class="location-btn" @click="setMapLocation" v-show="locationShow">
            <van-image width="20" height="20" :src="locationIcon" />
            <div class="label">定位</div>
        </div> -->
        <slot name="searchBar"></slot>
        <van-popup v-model:show="layerChangePopupShow" position="bottom" round>
            <div class="popup-container">
                <div class="category-content">
                    <div class="header">
                        <div class="title">底图切换</div>
                    </div>

                    <div class="content">
                        <div
                            class="layer-box"
                            :class="{ on: setSelectMapLayerKey === item.key }"
                            v-for="(item, ind) in layers"
                            :key="ind"
                            @click="setMapLayer(item)"
                        >
                            <div class="image">
                                <van-image :src="item.src" width="100%" height="100%"></van-image>
                            </div>
                            <div class="label">{{ item.name }}</div>
                        </div>
                    </div>
                </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 { 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'
const emit = defineEmits(['location-selected'])
const { weatherShow, layerShow, locationShow, createWorkShow } = defineProps({
    weatherShow: {
        type: Boolean,
        default: false,
    },
    layerShow: {
        type: Boolean,
        default: false,
    },
    locationShow: {
        type: Boolean,
        default: false,
    },
    createWorkShow: {
        type: Boolean,
        default: false,
    },
})

const isProd = import.meta.env.VITE_APP_ENV === 'production'

import { basemapLayer0, basemapLayer1, basemapLayer2, basemapLayer3 } from '@/const/leafletConst'

const basemap0 = L.layerGroup([basemapLayer0, basemapLayer1])
const basemap1 = L.layerGroup([basemapLayer2, basemapLayer3])

let map = null
const isMapReady = ref(false)

const layers = [
    {
        src: sl,
        name: '矢量',
        key: 1,
        map: basemap0,
    },
    {
        src: yx,
        name: '影像',
        key: 2,
        map: basemap1,
    },
]

const layerChangePopupShow = ref(false)
const setSelectMapLayerKey = ref(1) // 选择的地图图层

let droneMarkersLayer = null
let eventMarkersLayer = null
let addressMarkersLayer = null
let mapLayerSourceLayer = 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([27.117445, 114.984917], 10)

    map.whenReady(() => {
        isMapReady.value = true
    })

    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()
        if (currentZoom >= 11) {
            eventMarkersLayer.addTo(map)
        } else {
            eventMarkersLayer.remove()
        }
    })

    if (createWorkShow) {
        getMapLocation()
    }
}

const getCurMap = () => {
    return map
}

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 setMapLocation = () => {
    locationFlag = true

    // 在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 (locationFlag) {
                    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)
                    }

                    mapSetView({
                        lat,
                        lng,
                    })

                    locationFlag = false

                    return
                }

                if (userLocationMarker) {
                    userLocationMarker.setLatLng([lat, lng])
                }
            },
            function (error) {
                // 如果获取位置失败，执行回调
                console.error('Error occurred: ' + error.message)
            },
            {
                enableHighAccuracy: true, // 尝试获取更高精度的定位
                timeout: 10000, // 如果10秒内没有获取到位置，就中止
                maximumAge: 0, // 始终请求新的定位，不使用缓存
            }
        )
    } else {
        console.log('该浏览器不支持地理定位功能。')
    }
}
let lastLocationMarker = null
const getMapLocation = () => {
    map.off('click')
    map.on('click', function (e) {
        const { lat, lng } = e.latlng

        if (lastLocationMarker) {
            map.removeLayer(lastLocationMarker)
        }
        lastLocationMarker = L.marker([lat, lng]).addTo(map)
        emit('location-selected', {
            latitude: lat,
            longitude: lng,
        })
    })
}

const mapSetView = data => {
    const { lat, lng, zoom = 16 } = data

    if (!map) return

    map.setView([lat, lng], zoom, {
        animate: false, // 使用动画过渡
    })
}

const mapAddMarker = data => {
    if (!map) return
    const { lat, lng, zoom = 16, name = '', customClassName = '' } = data
    mapSetView(data)

    // 创建带有图标和文字的 divIcon
    let droneHtmlIcon = L.divIcon({
        html: `
                <div class="content ${customClassName}">
                    <img src="${addressLocationIcon}">
                    <span>
                        ${name}
                    </span>
                </div>
            `,
        className: 'ztzf-address-custom-icon', // 可选，用于添加CSS类
        iconSize: [24, 38], // 设置图标大小
        iconAnchor: [12, 19],
    })

    L.marker([lat, lng], { icon: droneHtmlIcon }).addTo(addressMarkersLayer)
}

// 吉安项目-空域信息
// 统一的飞行函数
function flyVisual(coordinates) {
    // 确保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);
    }
}
// 点击单个飞行
function signFlyToMarker(item) {
    const positionsData = JSON.parse(item.geoJson);
    const coordinates = positionsData.coordinates;
	
    // 更全面的空值检查
    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.geoJson)
        .forEach(item => {
            const parseParsed = JSON.parse(item.geoJson); // 转为数组
            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()
}

// 天气
const store = useStore()
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)

onMounted(async () => {

    await nextTick()
    initMap()
    map.addLayer(layers[0].map)

    EventBus.on('mapSetView', mapSetView)
    EventBus.on('mapAddMarker', mapAddMarker)
    EventBus.on('mapAddAirMarker', mapAddAirMarker)
    EventBus.on('signFlyToMarker', signFlyToMarker)
    EventBus.on('mapClearAirMarker', mapClearAirMarker)
    EventBus.on('mapClearMarker', mapClearMarker)

    // L.circle([24, 112], {
    //     color: 'red', // 边框颜色
    //     fillColor: '#f03', // 填充颜色
    //     fillOpacity: 0.5, // 填充透明度
    //     radius: 5000, // 半径，单位是米
    // }).addTo(map)
})

onUnmounted(() => {
    EventBus.off('mapSetView', mapSetView)
    EventBus.off('mapAddMarker', mapAddMarker)
    EventBus.off('mapAddAirMarker', mapAddAirMarker)
    EventBus.off('signFlyToMarker', signFlyToMarker)
    EventBus.off('mapClearAirMarker', mapClearAirMarker)
    EventBus.off('mapClearMarker', mapClearMarker)
})

</script>

<style lang="scss" scoped>
.page-container {
    position: relative;
    width: 100%;
    height: 100%;

    .map {
        width: 100%;
        height: 100%;
    }


    .location-btn,
    .layer-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;
        }
    }

    .layer-btn {
        bottom: 130px;
    }

    .location-btn {
        bottom: 80px;
    }
}

.popup-container {
    height: 300px;
    overflow-y: auto;
    padding: 10px 22px;
    background: #fff;
    border-radius: 12px 12px 0 0;

    .category-content {
        margin-bottom: 10px;
        .header {
            margin-bottom: 10px;
            height: 20px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 16px;
            color: #222324;
            line-height: 20px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .base-header {
            margin-top: 10px;
        }
        .content {
            //padding: 12px;
            display: flex;
            background: #fff;
            border-radius: 16px;

            .layer-box {
                margin-left: calc((100% / 3 - 84px) * 3 / 2);

                &:first-child {
                    margin-left: 0;
                }

                &.on {
                    .image {
                        position: relative;

                        &::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            border-radius: 4px 4px 4px 4px;
                            border: 4px solid #1d6fe9;
                            z-index: 1;
                            box-sizing: border-box;
                        }
                    }

                    .label {
                        color: #1d6fe9;
                    }
                }

                .image {
                    width: 84px;
                    height: 82px;
                    border-radius: 4px 4px 4px 4px;
                    overflow: hidden;
                    box-sizing: border-box;
                    border: none;
                }

                .label {
                    margin-top: 6px;
                    height: 20px;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    font-size: 14px;
                    color: #222324;
                    line-height: 20px;
                    text-align: center;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .layer-box:nth-child(3n + 1) {
                margin-left: 0;
            }
        }
    }
}
</style>

 uniapps/work-wx/src/subPackages/deviceRegistration/add.vue

@@ -597,9 +597,11 @@
onMounted(async () => {
    getProTypeApi()
    getManufacturerInfoApi()
    // 动态导入xzqhData，确保在使用前已初始化
    const { xzqhData } = await import('@/static/xzqh/index')
    areaData.value = xzqhData
    // 动态从外部URL导入xzqhData，确保在使用前已初始化
    // 注意：直接动态导入外部URL可能会有跨域或构建问题，建议检查服务器CORS设置
    const response = await fetch('https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/xzqh/index.json')
    const text = await response.text()
    areaData.value = JSON.parse(text)
})
</script>
<style scoped lang="scss">