Reactjs Openlayers ol.interaction.Draw笔划样式

我有这个，它有能力在地图上画一个多边形，这是完美的工作。我搞不懂的是如何设计.Draw交互的样式

目前，我有一条虚线表示用户已经绘制的多边形部分，另一条虚线连接第一个绘制点和最后一个绘制点

当我写风格时，它似乎对两行都有影响

我需要的是一条连接用户已经绘制的点的黑色虚线，并且没有将最后一个绘制点连接回第一个绘制点的线（完全透明）

这是我当前的样式对象：

style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(0, 0, 0, 0.5)',
      lineDash: [10, 10],
      width: 3
    }),
    image: new ol.style.Circle({
      fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] }),
      stroke: new ol.style.Stroke({
        color: [0, 0, 0, 0.5],
        width: 1
      }),
      radius: 4
    })
  })

我尝试过添加颜色和样式的数组，但似乎无法使其工作

---

有人发现了这个问题并找到了解决方法吗？

好的，我已经破解了这个问题，我必须深入图书馆的源代码才能找到答案，所以我将把答案贴在这里，希望它能在将来帮助其他人，所以这里是：

我看到的源代码是，当您使用

ol.interaction.Draw

绘制多边形时，会使用多个几何体。有底层的

多边形

，这是一个具有笔划和填充的位，并显示连接线（基于其笔划样式）。有一个

LineString

，它只为用户绘制的点显示一条线（无填充线和连接线）。还有一个点，它附着在鼠标指针上。我在JSFIDLE中留下了一个“console.log（）”来显示所有这些

我创造了这个工作。我所做的不是直接在

ol.interaction.Draw中设置样式，而是使用了
styleFunction
（参见下面的代码）。我按类型检测每个几何体，并为其设置特定样式

const styleFunction = feature => {
  var geometry = feature.getGeometry();
  console.log('geometry', geometry.getType());
  if (geometry.getType() === 'LineString') {
    var styles = [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 102, 0, 1)',
          width: 3
        })
      })
    ];
    return styles;
  }
  if (geometry.getType() === 'Polygon') {
    var styles = [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 102, 0, 0)',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 102, 0, 0.3)'
        })
      })
    ];
    return styles;
  }
  return false;
};

希望这有帮助好吧，我已经破解了这个，我不得不深入图书馆的资料来源来找出答案，所以我将把答案贴在这里，希望它能在将来帮助其他人，所以这里是：

我看到的源代码是，当您使用
ol.interaction.Draw
绘制多边形时，会使用多个几何体。有底层的
多边形
，这是一个具有笔划和填充的位，并显示连接线（基于其笔划样式）。有一个
LineString
，它只为用户绘制的点显示一条线（无填充线和连接线）。还有一个点，它附着在鼠标指针上。我在JSFIDLE中留下了一个“console.log（）”来显示所有这些

我创造了这个工作。我所做的不是直接在
ol.interaction.Draw中设置样式，而是使用了
styleFunction
（参见下面的代码）。我按类型检测每个几何体，并为其设置特定样式

const styleFunction = feature => {
  var geometry = feature.getGeometry();
  console.log('geometry', geometry.getType());
  if (geometry.getType() === 'LineString') {
    var styles = [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 102, 0, 1)',
          width: 3
        })
      })
    ];
    return styles;
  }
  if (geometry.getType() === 'Polygon') {
    var styles = [
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'rgba(255, 102, 0, 0)',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255, 102, 0, 0.3)'
        })
      })
    ];
    return styles;
  }
  return false;
};

希望这有助于您在绘图时隐藏连接线吗？因为这是不可能的，但您可以在
draund
上修改多边形。我想创建从起点到终点有间隙的
多行线
之类的东西。我想在绘图时隐藏连接线。奇怪的是，在绘图时，似乎有两个多边形，一个完整，一个不完整。我本以为有一种方法可以分别设置它们的样式。正如我所说的，不可能用间隙来绘制多边形，但是你可以绘制线串-检查此示例-只需在“几何体类型”选择中选择“线串”<代码>多边形
将始终连接到点您可以通过使用绘制的坐标来设置线字符串的样式，类似于此示例如何使用多边形的坐标设置多点的样式我问的原因是，如果我不应用任何样式（只使用默认值），我认为必须有一种方法来实现这一点-连接线不存在-绘图时是否隐藏连接线？因为这是不可能的，但您可以在
draund
上修改多边形。我想创建从起点到终点有间隙的
多行线
之类的东西。我想在绘图时隐藏连接线。奇怪的是，在绘图时，似乎有两个多边形，一个完整，一个不完整。我本以为有一种方法可以分别设置它们的样式。正如我所说的，不可能用间隙来绘制多边形，但是你可以绘制线串-检查此示例-只需在“几何体类型”选择中选择“线串”<代码>多边形

将始终连接到点您可以通过使用绘制的坐标来设置线字符串的样式，类似于此示例如何使用多边形的坐标设置多点的样式我问的原因是，如果我不应用任何样式（只使用默认值），我认为必须有一种方法来实现这一点-连接线不在那里-