通过在 OpenLayers 中拖动来绘制一条线

问题描述

在 OpenLayers 中，我需要通过拖动来绘制一条线。我使用 OpenLayers 中的 DragBox 对象通过“框”完成了此操作，但没有“DragLine”对象。这可能吗？

这是我目前的代码

  const clickSelect: PointerInteraction = new PointerInteraction({
  handleDownEvent: handleDownEventHandler,handleDragEvent: handleDragEventHandler,handleUpEvent: handleUpEventHandler,stopDown: stopDownHandler
  });
  function stopDownHandler(evt: olMapbrowserEvent) {
  return false;
  }
  function handleDownEventHandler(this: PointerInteraction,evt: olMapbrowserEvent) {
  if (evt.originalEvent.buttons !== 2) {
  tool.downClick = MapValues.map.getEventPixel(evt.originalEvent);
  MapValues.clickedPixel = tool.downClick;
  tool.wasDragged = false;
  return true;
  } else {
  return false;
  }
  }
  function handleDragEventHandler(this: PointerInteraction,evt: olMapbrowserEvent) {
  if (evt.originalEvent.buttons !== 2) {
  const current: Coordinate = MapValues.map.getEventPixel(evt.originalEvent);
  if (Math.abs((current[0] - tool.downClick[0]) * (current[1] - tool.downClick[1])) > 64) {
  tool.wasDragged = true;
  }
  return true;
  } else {
  return false;
  }
  }
  function handleUpEventHandler(this: PointerInteraction,evt: olMapbrowserEvent) {
  if (evt.originalEvent.buttons !== 2) {
  if (tool.wasDragged) {
  return true;      
  } else {
  return false;
  }
  }
  }


  draw.on('drawstart',(e: olDrawEvent) => {
  const tool = this;
  // let dStartMeasureTT = this.measuretooltip;
  // set sketch
  this.sketch = e.feature;
  let tooltipCoord = e.coordinate;
  tool.listener = this.sketch.getGeometry().on('change',function (evt) {
  const geom = evt.target;
  const output: string = tool.formatLength(geom);
  tooltipCoord = geom.getLastCoordinate();
  tool.measuretooltipElement.innerHTML = output;
  tool.measuretooltip.setPosition(tooltipCoord);
  });
  });

  draw.on('drawend',(e: olDrawEvent) => {
  const linestring = e.feature.getGeometry();
  const multiLinestring = new MultiLinestring([]);
  multiLinestring.appendLinestring(linestring);
  const coords: Array<Array<number>> = linestring.getCoordinates();
  if (coords.length === 2) {      
  if ((coords[1][0] - coords[0][0] === 0) && (coords[1][1] - coords[0][1] === 0)) {        
  return;
  }
  const screen0: Array<number> = MapValues.map.getPixelFromCoordinate(coords[0]);
  const screen1: Array<number> = MapValues.map.getPixelFromCoordinate(coords[1]);
  const screendistance: number = Math.sqrt(Math.pow((screen1[0] - screen0[0]),2) + 
  Math.pow((screen1[1] - screen0[1]),2));
  const worlddistance: number = Math.sqrt(Math.pow((coords[1][0] - coords[0][0]),2) + 
  Math.pow((coords[1][1] - coords[0][1]),2));
  const scale: number = worlddistance / screendistance;
  start
  const dx: number = (coords[1][0] - coords[0][0]) / worlddistance * scale * 5;
  const dy: number = (coords[1][1] - coords[0][1]) / worlddistance * scale * 5;
  const startLine = new Linestring([
  [coords[0][0] + dy,coords[0][1] - dx],[coords[0][0] - dy,coords[0][1] + dx]
  ]);
  // end
  const endLine = new Linestring([
  [coords[1][0] + dy,coords[1][1] - dx],[coords[1][0] - dy,coords[1][1] + dx]
  ]);
  multiLinestring.appendLinestring(startLine);
  multiLinestring.appendLinestring(endLine);
  }
  e.feature.setGeometry(multiLinestring);
  const format: olGeoJson = new olGeoJson();
  this.shapestring = format.writeGeometry(e.feature.getGeometry(),{ dataProjection: 'epsg:4326',featureProjection: 'epsg:3857',rightHanded: false });
  this.finishRuler(this.shapestring);
  });
  MapValues.addMapListener(clickSelect);
  MapValues.addMapListener(draw);
  }

我认为通过使用 PointerInteraction 对象，我将能够捕获并继续该行但这并没有奏效，因为看起来 Draw 对象期望单击一次以开始和结束该行。

我知道绘制“自由泳”会导致拖拽，但这对我的目的来说非常不准确。

非常感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

openlayers openlayers openlayers-5