基于OpenLayers地图的坐标及行车数据爬取技术问询

我在用Selenium做爬虫，目标是从OpenLayers地图里提取车辆路线点位的速度、时间、地理位置等数据填到表格里。现在的问题是，地图上的标记点击自动化一直搞不定——弹窗是单个元素，点不同标记只会更新内容，不会生成新弹窗。想知道有没有不用点击标记就能提取数据的办法。

弹窗内容代码片段 #

<div class="ol-overlay-container ol-selectable" style="position: absolute; left:537px; top: 281px;">
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer">
</a><div id="popup-content">Hora: 16:11:59<br><br>Velocidade: 65.75 km/h<br><br>Lat: -12.9552641<br><br>Lon: -38.4291202<br><br>Precisão: 3.9m</div></div></div>

地图结构HTML源码 #

<div id="map" class="map">
                        <div class="ol-viewport" style="position: relative; overflow: hidden; width: 100%; height: 100%;"><div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0;"><div class="ol-layer" style="position: absolute; width: 100%; height: 100%;"><canvas width="782" height="600" style="position: absolute; left: 0px; transform-origin: left top; transform: matrix(1, 0, 0, 1, 0, 0);"></canvas></div></div><div class="ol-overlaycontainer" style="position: absolute; z-index: 0; width: 100%; height: 100%;"></div><div class="ol-overlaycontainer-stopevent" style="position: absolute; z-index: 0; width: 100%; height: 100%;"><div class="ol-overlay-container ol-selectable" style="position: absolute; display: none;"><div id="popup" class="ol-popup">
                          <a href="#" id="popup-closer" class="ol-popup-closer"></a>
                          <div id="popup-content"></div>
                        </div></div><div class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button class="ol-zoom-out" type="button" title="Zoom out">−</button></div><div class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset" type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button></div><div class="ol-attribution ol-unselectable ol-control" style=""><ul><li>© 2024 Microsoft Corporation</li><li>© 2024 TomTom</li><li><a class="ol-attribution-bing-tos" href="https://www.microsoft.com/maps/product/terms.html" target="_blank">Terms of Use</a></li></ul><button type="button" title="Attributions"><span>»</span></button></div></div></div></div>

不用点击标记提取数据的核心思路是直接获取原始数据源，而非通过DOM交互，以下是具体可行方法：

• 直接读取OpenLayers的地图数据源
  OpenLayers的点位数据通常存储在地图实例的图层或源对象中。你可以用Selenium的execute_script执行JS代码，一次性提取所有点位的完整属性：

  // 假设全局地图实例为map，先定位目标图层（可根据图层name或其他标识筛选）
  const targetLayer = map.getLayers().getArray().find(layer => layer.get('name') === '车辆点位图层');
  const source = targetLayer.getSource();
  // 提取所有要素的属性与坐标
  const allData = source.getFeatures().map(feature => {
    const props = feature.getProperties();
    const coords = feature.getGeometry().getCoordinates();
    return {
      时间: props.Hora,
      速度: props.Velocidade,
      纬度: coords[1],
      经度: coords[0],
      精度: props.Precisão
    };
  });
  return allData;
  

  在Selenium中调用这段代码，就能直接拿到所有点位数据，无需逐个点击标记。

• 抓取页面的API数据源
  打开浏览器开发者工具的Network面板，刷新或加载地图时，找到返回车辆点位数据的API请求（通常是JSON格式）。直接用Python的requests库请求该接口，获取结构化原始数据，效率比操作DOM高得多。

• 解析隐藏的DOM存储数据
  部分页面会把点位数据隐藏在DOM中（比如<script>标签的JSON、或隐藏的<div>）。你可以用Selenium查找这类元素，提取并解析其中的内容。

• 模拟弹窗触发逻辑（替代手动点击）
  如果以上方法都不可行，可以直接调用弹窗的触发函数，避免鼠标点击的不稳定：

  const source = targetLayer.getSource();
  // 获取第一个点位要素，可循环遍历所有要素
  const feature = source.getFeatures()[0];
  // 手动触发地图的singleclick事件，传入点位坐标与要素
  map.dispatchEvent({
    type: 'singleclick',
    coordinate: feature.getGeometry().getCoordinates(),
    features: [feature]
  });
  

  触发后弹窗会自动更新内容，再提取#popup-content的文本即可。

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