openlayers鼠标经过要素高亮显示要素

最新推荐文章于 2024-06-18 17:18:11 发布

~HT猫L~

最新推荐文章于 2024-06-18 17:18:11 发布

阅读量1.2k

点赞数 1

分类专栏： openlayers 文章标签： openlayers vue.js

本文链接：https://blog.csdn.net/weixin_44614518/article/details/126729942

版权

本文通过代码示例展示了如何在OpenLayers中实现鼠标经过时要素高亮显示的功能，注释详细解释了实现过程。

摘要由CSDN通过智能技术生成

话不多说直接上代码

代码里面有写注释

<!--
 * @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">&nbsp;</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