Vue3 OpenLayers单要素选择异常：点击选中全部点/线而非单个

当前用Vue.js 3结合OpenLayers开发地图应用，目标是从两个JSON文件（分别存储点、线数据）实现单个点或单条线的选择功能，但点击时会选中所有点或所有线，而非单个要素。同时希望选中时能打印要素的部分属性。

模板代码 #

<template>
  <ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px" :key="map">

    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection"
      @zoomChanged="zoomChanged" @centerChanged="centerChanged" @resolutionChanged="resolutionChanged"
      @rotationChanged="rotationChanged" />

    <ol-zoom-control />

    <ol-scaleline-control />

    <ol-tile-layer>
      <ol-source-osm />
    </ol-tile-layer>

    <ol-interaction-select @select="featureSelected" :condition="selectCondition">
      <ol-style>
(…)
      </ol-style>
    </ol-interaction-select>

    <ol-vector-layer>
      <ol-source-vector :format="geoJson" :projection="projection">
        <!-- Affichage des arrêts et mouvements -->
        <div v-else>
          <!-- afficher l'ensemble des mouvements  -->
          <ol-feature>
            <ol-geom-multi-line-string :coordinates="mouvementCoordinates"></ol-geom-multi-line-string>
            <ol-style>
(…)            </ol-style>
          </ol-feature>
          <!-- afficher l'ensemble des arrêts  -->
          <ol-feature>
            <ol-geom-multi-point :coordinates="arretCoordinates"></ol-geom-multi-point>
            <ol-style>
(…)
            </ol-style>
          </ol-feature>
        </div>

      </ol-source-vector>
    </ol-vector-layer>

  </ol-map>
</template>

Props数据格式 #

{
  "type": "FeatureCollection", 
  "features": [
    {
      "type": "Feature", 
      "geometry": {}, 
      "properties": {}
    },
    ...
  ]
}

计算属性代码 #

arretCoordinates() {
  return this.geoJsonArretList.features.map(feature => feature.geometry.coordinates);
},
mouvementCoordinates() {
  return this.geoJsonMouvementList.features.map(feature => feature.geometry.coordinates);
},

问题原因与解决方案 #

核心原因 #

你把所有点打包成了单个MultiPoint要素，所有线打包成了单个MultiLineString要素，OpenLayers的选择交互是针对单个ol-feature的，所以点击时会选中整个集合，而非单个点/线。

解决步骤 #

1. 拆分单个要素
   不要用MultiPoint/MultiLineString，为每个点、每条线单独创建ol-feature并保留原始属性：

   <ol-vector-layer>
     <ol-source-vector :format="geoJson" :projection="projection">
       <!-- 渲染所有线要素 -->
       <ol-feature 
         v-for="(feature, index) in geoJsonMouvementList.features" 
         :key="`movement-${index}`"
         :properties="feature.properties">
         <ol-geom-line-string :coordinates="feature.geometry.coordinates"></ol-geom-line-string>
         <ol-style>
           <!-- 你的线样式代码 -->
         </ol-style>
       </ol-feature>
       <!-- 渲染所有点要素 -->
       <ol-feature 
         v-for="(feature, index) in geoJsonArretList.features" 
         :key="`stop-${index}`"
         :properties="feature.properties">
         <ol-geom-point :coordinates="feature.geometry.coordinates"></ol-geom-point>
         <ol-style>
           <!-- 你的点样式代码 -->
         </ol-style>
       </ol-feature>
     </ol-source-vector>
   </ol-vector-layer>
   

2. 处理选择事件并打印属性
   修改featureSelected方法，直接获取选中要素的属性：

   featureSelected(event) {
     const selected = event.selected[0];
     if (selected) {
       // 打印全部属性
       console.log("选中要素属性：", selected.getProperties());
       // 打印指定属性（示例）
       // console.log("要素ID：", selected.get("id"));
     }
   }
   

3. 可选：限制选择触发条件
   确保仅点击时触发选择，引入singleClick条件：

   import { singleClick } from 'ol/events/condition';
   
   // 组件内定义
   selectCondition() {
     return singleClick;
   }
   

内容的提问来源于stack exchange，提问作者maudha