ol.style.stroke 中不同颜色的边框底部答案

【问题标题】：Different color border-bottom in ol.style.strokeol.style.stroke 中不同颜色的边框底部
【发布时间】：2016-02-18 13:38:16
【问题描述】：

在 OpenLayers 3 中可以更改选择中的边框颜色：

style = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 2
    })
  });

但是可以只更改边框底部吗？

类似：

style = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 2,
      border-bottom: 2px dotted #ff9900
    })
  });

【问题讨论】：

标签： javascript openlayers-3

【解决方案1】：

当然，感谢 OL 3 可用的大量资源，您可以使用第二种样式来（模拟）边框底部。使用ol.style#GeometryFunction。灵感来自this example。

http://jsfiddle.net/jonataswalker/k11bxma2/

有点不同 - http://jsfiddle.net/jonataswalker/n73gm0u9/

var style = [
  new ol.style.Style({
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)'
    }),
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2
    })
  }),
  new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'green',
      width: 2
    }),
    geometry: function(feature) {
      var geom = feature.getGeometry();
      var extent = geom.getExtent();
      var bottomLeft = ol.extent.getBottomLeft(extent);
      var bottomRight = ol.extent.getBottomRight(extent);

      // return a linestring with the second style
      return new ol.geom.LineString([bottomLeft, bottomRight]);
    }
  })
];

【讨论】：

太棒了！！谢谢@JonatasWalker，它工作正常。