OpenLayers 創建復雜的樣式（一側有孔和筆划的多邊形）

Question

創建復雜的多邊形樣式有困難。 措辭如下：

• 多邊形應繪制為在外側帶有孔和筆划的多邊形。

以一種困難的方式（在我看來），我繪制了一個帶孔的多邊形：

1. 轉換為草皮
2. 使用 turf.buffer 和負緩沖區值，我得到一個內部緩沖區
3. 使用 turf.difference （源多邊形和緩沖區）我得到一個帶孔的多邊形

但我不明白如何只從外部繪制邊框%）如果在同一個 function 我嘗試返回 2 styles（線 + 多邊形），那么我得到一個錯誤（Uncaught TypeError: s.simplifyTransformed is not a function ）。

一般來說，是否可以在樣式中返回 2 個不同的幾何圖形？

在圖片中，紅色多邊形是我最終需要得到的。

我還在codepen上做了一個最小的例子

我將不勝感激您的幫助！

---

更新。

循環

並縮小

Answer 1

要調整OpenLayers 3：多邊形的偏移筆觸樣式示例，您需要在每一端將環延伸一段，以便您可以正確計算原始起點/終點處的新坐標，然后在創建結果時刪除多余的坐標多邊形。

 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>