OpenLayers 创建复杂的样式（一侧有孔和笔划的多边形）

Question

创建复杂的多边形样式有困难。 措辞如下：

• 多边形应绘制为一个多边形，其外侧有一个孔和一个笔划。

以一种困难的方式（在我看来），我绘制了一个带孔的多边形：

1. 转为草皮
2. 使用 turf.buffer 和负缓冲区值，我得到一个内部缓冲区
3. 使用 turf.difference（源多边形和缓冲区）我得到一个带孔的多边形

但我不明白如何仅从外部绘制边框%) 如果在同一个函数中我尝试返回 2 种样式（线 + 多边形），则会出现错误（未捕获的 TypeError：s.simplifyTransformed 不是函数）。

一般来说，是否可以在样式中返回 2 个不同的几何图形？

图中红色的多边形是我最后需要得到的。

我也做了一个minimal example on codepen

感谢您的帮助！

---

更新。

循环

并缩小

Answer 1

要使OpenLayers 3: Offset stroke style 示例适用于多边形，您需要在每一端将环延长一段，以便正确计算原始起点/终点处的新坐标，然后在创建结果时删除多余的坐标多边形。

var style = function(feature, resolution) {
  var poly = feature.getGeometry();
  if (poly.getType() == 'Polygon') {
var coordinates = poly.getCoordinates()[0];
coordinates = coordinates.slice(-2, -1).concat(coordinates).concat(coordinates.slice(1, 2));
var geom = new ol.geom.LineString(coordinates);
var colors = ['green', 'yellow', 'red'];
var width = 4;
var styles = [];
for (var line = 0; line < colors.length; line++) {
    var dist = width * resolution * (line - (colors.length-1)/2);
    var coords = [];
    var counter = 0;
    geom.forEachSegment(function(from, to) {
        var angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
        var newFrom = [
            Math.sin(angle) * dist + from[0],
            -Math.cos(angle) * dist + from[1]
        ];
        var newTo = [
            Math.sin(angle) * dist + to[0],
            -Math.cos(angle) * dist + to[1]
        ];
        coords.push(newFrom);
        coords.push(newTo);
        if (coords.length > 2) {
            var intersection = math.intersect(coords[counter], coords[counter+1], coords[counter+2], coords[counter+3]);
            coords[counter+1] = (intersection) ? intersection : coords[counter+1];
            coords[counter+2] = (intersection) ? intersection : coords[counter+2];
            counter += 2;
        }
    });
    styles.push(
        new ol.style.Style({
            geometry: new ol.geom.Polygon([coords.slice(2, -1)]),
            stroke: new ol.style.Stroke({
                color: colors[line],
                width: width
            })
        })
    );
}
return styles;
  }
};


var raster = new ol.layer.Tile({
  source:  new ol.source.OSM() 
});

var source = new ol.source.Vector();

var vector = new ol.layer.Vector({
  source: source,
  style: style
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
  })
});

map.addInteraction(new ol.interaction.Draw({
  source: source,
  type: 'Polygon',
  style: style
}));

html, body, .map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.1/math.min.js"></script>
<div id="map" class="map"></div>

原来的 LineStrings 算法在有多个顶点的拐角处存在问题

当缩小时，内线上的两个顶点应该合并到一个点，但这并没有发生，而是它们交叉并导致在线扭结。