要实现只能在指定GeoJSON对象上点击选点绘制LineString，你需要通过自定义ol.interaction.Draw的condition选项来限制点击行为，判断点击位置是否落在目标矢量图层的要素上。以下是具体的修改方案：

关键思路 #

默认的Draw交互允许在地图任意位置触发点击，我们需要：

• 编写一个自定义条件函数，检测点击的像素位置是否存在目标GeoJSON图层的要素
• 将这个函数赋值给Draw交互的condition参数，替代默认的点击条件
• 确保Draw交互使用独立的source（即你的drawSource_ls）来存储绘制的折线，避免和原有GeoJSON数据源混淆

修改后的完整代码示例 #

// 确保已定义用于存储绘制折线的数据源和图层
var drawSource_ls = new ol.source.Vector();
var drawLayer_ls = new ol.layer.Vector({ source: drawSource_ls });
map.addLayer(drawLayer_ls);

// 指定允许绘制的目标GeoJSON图层（可根据需求替换为vector）
var targetLayer = vector_ank;

// 自定义点击条件：仅当点击位置存在目标图层的要素时，才允许绘制选点
function drawCondition(event) {
  // 获取点击的像素坐标
  var pixel = map.getEventPixel(event.originalEvent);
  // 检测该像素位置是否存在目标图层的要素
  var hasTargetFeature = map.forEachFeatureAtPixel(
    pixel,
    () => true,
    { layerFilter: layer => layer === targetLayer }
  );
  // 同时满足默认点击条件和存在目标要素时，返回true允许绘制
  return ol.events.condition.click(event) && hasTargetFeature;
}

// 创建带自定义限制的Draw交互
var draw_lineString = new ol.interaction.Draw({
  type: 'LineString',
  source: drawSource_ls, // 使用独立的绘制数据源
  condition: drawCondition // 绑定自定义点击限制条件
});

draw_lineString.on('drawstart', function(evt){
  drawSource_ls.clear();
});

draw_lineString.on('drawend',function(evt){
  clickedCoord_lineString = evt.feature.getGeometry().getCoordinates();
  $('#ls_adding').modal('show');
  console.log('clicked at', clickedCoord_lineString);
  map.removeInteraction(draw_lineString);
});

function startDrawing_lineString(){
  map.addInteraction(draw_lineString);
}

代码细节说明 #

• drawCondition函数：通过map.forEachFeatureAtPixel精准检测点击位置是否属于目标GeoJSON图层的要素，layerFilter参数确保只检测你指定的图层，避免误判其他图层的要素。
• 独立绘制数据源：使用drawSource_ls存储绘制的折线，既不会污染原有GeoJSON数据源，也方便后续对绘制要素进行管理或修改。
• 灵活切换目标图层：如果需要改为在另一个GeoJSON图层（比如vector）上绘制，只需修改targetLayer变量的赋值即可。

这样设置后，点击"Add LineString"按钮启动绘制时，只有在指定GeoJSON要素上的点击才会生成折线节点，地图空白区域的点击不会触发选点操作。

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