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

~HT猫L~

于 2022-09-06 17:37:10 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_44614518/article/details/126729942

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说直接上代码

代码里面有写注释

<!--
 * @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 selectStyle = new Style({
  fill: new Fill({
    color: "#eeeeee",
  }),
  stroke: new Stroke({
    // 红色
    color: "rgba(255, 0, 0, 1)",
    width: 3,