OpenLayers - LineString 圓角

Question

我想在 OpenLayers 中創建一個帶圓角的 LineString。

在 OL 版本中，仍然可以通過 cspline 實現這一點：

     var feature_line_one = new ol.Collection();
     feature_line_one.push(new ol.Feature(new ol.geom.LineString(line_one_coords)));

     var vector_line_one = new ol.layer.Vector({
          name: 'Line 1',
          source: new ol.source.Vector({ features: feature_line_one }),
          style: function(f) {
            var opt = {
              tension: 0.25,
              pointsPerSeg: 100
            };
------->    var csp = f.getGeometry().cspline(opt);
            return [ new ol.style.Style({
              stroke: new ol.style.Stroke({ color:"#011A27", width:6 }),
------->      geometry: csp
            })
            ]
          }
     })

但是現在在另一個 OL 版本中 cspline 不存在了，我總是得到這個錯誤：

Uncaught TypeError: f.getGeometry(...).cspline is not a function....

它不應該是這樣的

這是它應該的樣子

感謝幫助...

...歡迎任何形式的幫助

Answer 1

正如@Mike 在他的評論中指出的那樣， cspline從未成為 OpenLayers 庫的一部分。

它包含在ol-ext 庫中

在您的頁面上包含 ol-ext 庫（來自 jsdelivr CDN）： https://cdn.jsdelivr.net/npm/ol-ext@3.1.7/dist/ol-ext.js

<script src="https://cdn.jsdelivr.net/npm/ol-ext@3.1.7/dist/ol-ext.js"></script>

工作示例

代碼片段：

 var map = new ol.Map({ layers: [ new ol.layer.Tile({ // TileLayer({ source: new ol.source.OSM() }) ], target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([106.044189, -6.840865]), zoom: 7 }) }); // modified from https://stackoverflow.com/questions/27210362/open-layers-3-how-to-draw-a-polygon-programmatically var polyData = [ [ [2.15, 20.233], [2.0845, 20.293], [2.24, 20.343], [2.3015, 20.283] ], [ [2.95, 21.733], [3.15, 21.733], [3.15, 21.033], [2.95, 21.033] ] ]; var coords = []; for (var i = 0; i < polyData.length; i++) { for (var ii = 0; ii < polyData[i].length; ii++) { coords.push(polyData[i][ii]); } } var feature_line_one = new ol.Collection(); var line = new ol.geom.LineString(coords); line.transform('EPSG:4326', 'EPSG:3857'); var feature = new ol.Feature(line); feature_line_one.push(feature); var vector_line_one = new ol.layer.Vector({ name: 'Line 1', source: new ol.source.Vector({ features: feature_line_one }), style: function(f) { var opt = { tension: 0.25, pointsPerSeg: 100 }; var csp = f.getGeometry().cspline(opt); return [new ol.style.Style({ stroke: new ol.style.Stroke({ color: "#011A27", width: 6 }), geometry: csp })] } }) // Add the vector layer to the map. map.addLayer(vector_line_one); var extent = line.getExtent(); map.getView().fit(extent, { size: map.getSize(), padding: [50, 50, 50, 50] });

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

 <link rel="stylesheet" href="https://openlayers.org/en/v6.13.0/css/ol.css" type="text/css"> <.-- The line below is only needed for old environments like Inte.net Explorer and Android 4:x --> <script src="https.//cdn.polyfill.io/v2/polyfill.min?js,features=requestAnimationFrame.Element.prototype,classList:URL"></script> <script src="https.//cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol:js"></script> <script src="https.//cdn.jsdelivr.net/npm/ol-ext@3.1.7/dist/ol-ext.js"></script> <div id="map" class="map"></div>