vue3+ts+openlayers矢量图高亮

加载geogson鼠标移入获取要素给要素设置高亮样式
示例代码：

<template>
<div id="map"></div>
 </template>
<script setup lang='ts'>
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Style, Fill, Stroke, Text } from 'ol/style'
import lands from '@/assets/data/lands.json'
import GeoJSON from 'ol/format/GeoJSON'
import LayerVector from 'ol/layer/Vector'
import SourceVector from 'ol/source/Vector'
import { onMounted } from 'vue'
let highlight:any
function initMap() {
    let style = new Style({
        fill: new Fill({
            color: "rgba(255, 255, 255, 0.6)"
        }),
        stroke: new Stroke({
            color: "#319FD3",
            width: 1
        }),
        text: new Text({
            font: "12px Calibri,sans-serif",
            fill: new Fill({
                color: "#000"
            }),
            stroke: new Stroke({
                color: "#fff",
                width: 3
            })
        })
    });

    let vectorLayer = new LayerVector({
        source: new SourceVector({
            features: new GeoJSON().readFeatures(lands, {
                dataProjection: 'EPSG:4326',
                featureProjection: "EPSG:4326"
            }) 
        }) as any,
        style: feature => {
            style.getText()?.setText(feature.get('name'))
            return style
        }
    })
  
    const map = new Map({
        target: "map",
        layers: [vectorLayer],
        view: new View({
            projection: "EPSG:4326",
            center: [0, 0],
            zoom: 1
        })
    })
    const highlightStyle = new Style({
        stroke: new Stroke({
            color: '#f00',
            width: 1
        }),
        fill: new Fill({
            color: 'rgba(255, 0, 0, 0.1)'
        }),
        text: new Text({
            font: '12px Calibri, sans-serif',
            fill: new Fill({
                color: '#000'
            }),
            stroke: new Stroke({
                color: '#f00',
                width: 3
            })
        })
    })
    const featureOverlay = new LayerVector({
        source: new SourceVector(),
        map,
        style: feature => {
            highlightStyle.getText()?.setText(feature.get('name'))
            return highlightStyle
        }
    })
    map.on('pointermove', evt => {
        let feature:any = map.forEachFeatureAtPixel(evt.pixel, feature => feature)
        if (feature !== highlight) {
            if (highlight) {
            featureOverlay.getSource()?.removeFeature(highlight)
            }
            if (feature) {
             featureOverlay.getSource()?.addFeature(feature)
          }
        }
        highlight = feature
    })
}
onMounted(() => {
    initMap()
 })
</script>
<style scoped>
#map{
    width: 100%;
    height: 95vh;
}
</style>

感谢您的阅读——
全部示例代码可以看我其他博客或者加我微信发代码：