mapbox geojson高亮

<template>
    
</template>
<script setup lang="ts">
import { ref, inject, onMounted, onUnmounted } from 'vue'
const map = inject('mapbox')
const props = defineProps({
    node: Object
})
const addLayer = () => {
    map.value.addSource('geojson', {
        type: "geojson",
        data: '/data/wuhan_bounds.geojson'
    })
    map.value.addLayer({
        id: 'geojson-layer',
        type: "fill",
        source: 'geojson',
        layout: {
        },
        paint: {
            'fill-color': '#0080ff',
            'fill-opacity': 0.4
        }
    });
    map.value.addSource('jsonData', {
        'type': "geojson",
        'data': '/data/wuhan_label.json'
    })
    // 添加市名称标签
    map.value.addLayer({
        id: 'text-layer',
        type: "symbol",
        minzoom: 0,
        maxzoom: 22,
        source: 'jsonData',
        layout: {
            'text-field': ['get', 'name'],
            'text-size': 14,
            "text-allow-overlap": false,
            "text-offset": [0, 0],
            "text-anchor": "center",
            "text-justify": "center",
            "text-ignore-placement": true,
        },
        paint: {
		    "text-halo-color": "#000",
		    "text-halo-width": 2,
            "text-color": '#F9CF59'
		},
    });
    map.value.addLayer({
        id: 'outline',
        type: 'line',
        source: 'geojson',
        layout: {},
        paint: {
            'line-color': '#fff',
            'line-width': 3
        }
    });
    // 改变地图手势
    // function changeMapCursor() {
    const layers = map.value.getStyle().layers;
    layers.forEach(layer => {
        const layerId = layer.id;
        var matchArr = []
        if (layerId.includes('geojson-layer')) {
            map.value.on('mousemove', layerId, function (e) {
                map.value.getCanvas().style.cursor = 'pointer';
                if (e.features[0]?.properties?.level === 'district') {
                    matchArr = ["match",["get", "name"],e.features[0].properties.name,"rgba(15, 116, 183,1)","rgba(192,192,192,1)"];
                }
                map.value.setPaintProperty(
                    "geojson-layer",
                    "fill-color",
                    matchArr
                );
            });
            map.value.on('mouseleave', layerId, function (e) {
                map.value.getCanvas().style.cursor = '';
                map.value.setPaintProperty(
                    "geojson-layer",
                    "fill-color",
                    "#0080ff"
                );
            });
        }
    });
}
const removeLayer = () => {
    if (map.value.getLayer('geojson-layer')) {
        map.value.removeLayer('geojson-layer')
        map.value.removeLayer('outline')
        map.value.removeLayer('text-layer')
        map.value.removeSource('geojson')
        map.value.removeSource('jsonData')
    }
}
const goToFly = () => {
    map.value.flyTo({
            center: [props.node.view.lat, props.node.view.long],
            zoom: 9,
            speed: 0.4,
        });
}
onMounted(() => {
    setTimeout(() => {
        addLayer()
        goToFly()
    }, 500)
})
onUnmounted(() => {
    removeLayer()
})
</script>
<style lang="stylus" scoped>

</style>