GIS前端开发之路——Openlayers添加用户操作（二）

书接上回，得到一个完整轮廓的地图之后，接下去就是做点用户交互的东西。

根据区域划分，每个地图都是由一块块不规则的区域所组成。

那么我们就可以对不规则的区域进行一些简单的操作。

用户在移动鼠标的时候，就可将选中的区域高亮显示。

同时给它添加上一个点击事件。

首先将对应的模块导入进来

  import { pointerMove } from 'ol/events/condition'
  import Select from 'ol/interaction/Select'

添加交互属性

  // 高亮样式（颜色变深，边界加粗）
  const highlightStyle = new Style({
    fill: new Fill({
      color: 'rgba(100, 150, 210, 1)',
    }),
  })

 //  添加 Select 交互（支持悬浮高亮 + 点击事件）
   let selectInteraction = new Select({
      condition: pointerMove, // 鼠标悬浮即选中（高亮）
      style: highlightStyle, // 被选中的要素应用高亮样式
      layers: [vectorLayer], // 只对该图层生效
    })
    map.addInteraction(selectInteraction)

这样就可以得到一个悬浮和点击效果

悬浮效果，高亮显示

点击反馈