OpenLayers3+OL-Ext：跟随模式添加测量Tooltip问题求助

我之前也碰到过类似的情况——OpenLayers原生绘制的Tooltip逻辑直接套到OL-Ext的GPS绘制上确实不太行，因为两者的事件触发机制和sketch对象的获取方式有点不一样。咱们一步步来解决：

核心差异分析 #

你手动绘制时监听的是OpenLayers原生draw交互的drawstart事件，但OL-Ext的DrawGPS控件（就是你用来实现GPS跟随绘制的那个）在follow模式下，是通过自己的专属事件来通知GPS点添加的，而且sketch对象的获取方式也略有不同。

迁移步骤与代码示例 #

假设你已经初始化了OL-Ext的DrawGPS控件，咱们把你的手动Tooltip逻辑适配过去：

1. 监听OL-Ext GPS绘制的关键事件 #

DrawGPS在follow模式下，每次新增GPS点会触发gpspoint事件，我们可以在这里绑定测量逻辑：

// 假设你的DrawGPS控件实例是drawGPSControl
drawGPSControl.on('gpspoint', function(evt) {
  if (webMapValues.activeDrawControl === "Ruler") {
    // 获取当前绘制的sketch feature
    // OL-Ext的DrawGPS提供getSketch()方法，也可以从evt参数里取feature
    webMapValues.sketch = evt.feature || drawGPSControl.getSketch();
    
    // 复用你手动绘制时的Tooltip创建逻辑
    let tooltipElement = document.getElementById('tooltip');
    if (!tooltipElement) {
      tooltipElement = document.createElement('div');
      tooltipElement.id = 'tooltip';
      tooltipElement.className = 'ol-tooltip ol-tooltip-measure';
      map.getOverlayContainer().appendChild(tooltipElement);
    }
    
    // 监听几何变化，实时更新测量值
    webMapValues.sketch.getGeometry().on('change', function(geomEvt) {
      const geometry = geomEvt.target;
      let measureText;
      
      // 针对线和多边形分别计算长度/面积
      if (geometry instanceof ol.geom.LineString) {
        const length = ol.sphere.getLength(geometry);
        measureText = length > 1000 
          ? `${(length / 1000).toFixed(2)} km` 
          : `${length.toFixed(2)} m`;
      } else if (geometry instanceof ol.geom.Polygon) {
        const area = ol.sphere.getArea(geometry);
        measureText = area > 10000 
          ? `${(area / 1000000).toFixed(2)} km²` 
          : `${area.toFixed(2)} m²`;
      }
      
      // 更新Tooltip文本和位置
      tooltipElement.innerHTML = measureText;
      const lastCoord = geometry.getLastCoordinate();
      const pixel = map.getPixelFromCoordinate(lastCoord);
      tooltipElement.style.left = `${pixel[0] + 10}px`;
      tooltipElement.style.top = `${pixel[1] - 10}px`;
    });
  }
});

2. 清理资源（绘制结束时） #

和手动绘制一样，记得在GPS绘制结束时清理Tooltip和sketch对象：

drawGPSControl.on('drawend', function() {
  webMapValues.sketch = null;
  const tooltipElement = document.getElementById('tooltip');
  if (tooltipElement) {
    tooltipElement.remove();
  }
});

注意事项 #

• 如果你用的OL-Ext版本不同，gpspoint事件名称可能有变化，比如部分版本叫sketchchange，可以检查控件的API文档确认事件列表。
• 确保在激活follow模式时，webMapValues.activeDrawControl确实被设置为"Ruler"，不然逻辑不会触发。
• 位置计算时用map.getPixelFromCoordinate()把地理坐标转成像素坐标，这样Tooltip才会正确显示在地图上的对应位置。

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