话不多说直接上代码
代码里面有写注释
<!--
* @description: 在地图的 pointermove 上注册了一个侦听器,以突出显示当前悬停的特征。
高亮显示鼠标经过的要素。
* @Author:
* @Date: 2022-09-06 14:29:43
* @LastEditors:
* @LastEditTime: 2022-09-06 17:31:45
-->
<template>
<div class="wrapper">
<div id="map"></div>
<span ref="status"> </span>
</div>
</template>
<script>
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import GeoJSON from "ol/format/GeoJSON";
const style = new Style({
fill: new Fill({
color: "#eeeeee",
}),
});
const select