Openlayers ol.interaction.Draw笔触样式

时间:2018-11-28 13:39:31

标签: reactjs openlayers

我有这个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
    })
  })

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

有人遇到这个问题并找到解决方法吗?

1 个答案:

答案 0 :(得分:3)

好吧,我已经破解了这个,我不得不深入研究图书馆的资源来弄清楚它,所以我要在这里发布答案,希望对将来的其他人有所帮助,所以去了:< / p>

作为源代码,我看到的是当您使用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;
};

希望这会有所帮助