Openlayers ol.interaction.Draw 笔触风格

Question

我有这个 jsfiddle，它可以在地图上绘制多边形，效果非常好。我想不通的是如何设置 .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
    })
  })

我试过添加颜色和样式数组，但似乎无法正常工作。

有没有人遇到过这个问题并找到了解决办法？

Answer 1

好的，我已经破解了这个，我必须深入研究库的源代码才能弄清楚，所以我要 post 在这里回答，希望它能在未来帮助其他人，所以这里是：

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

我创建了这个工作 jsfiddle。我所做的是，我没有直接在 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;
};

希望对您有所帮助

Openlayers ol.interaction.Draw 笔触风格

Openlayers ol.interaction.Draw stroke style

openlayers

reactjs