如何在繪制 OpenLayers 期間關閉多邊形？

Question

我使用Draw obejct 來繪制默認多邊形。 它給出以下結果：

多邊形繪圖 OpenLayers

如您所見，多邊形未閉合。 如何在繪圖過程中關閉它，就像它在完成繪圖后工作一樣？

也許不要關閉，但繪制最后一條線連接第一個點和最后一個點。

Answer 1

您可以為 Draw 交互提供自己的樣式功能。 默認情況下，Draw 交互維護一個 LineString 的繪制點（藍線）和一個多邊形（白色區域）。 您想要的是將描邊和填充應用於多邊形並忽略線串：

function getStyleFunction() {
  /** @type {Object<import("../geom/GeometryType.js").default, Array<Style>>} */
  const white = [255, 255, 255, 1];
  const blue = [0, 153, 255, 1];
  const width = 3;
  const styles = {
    Polygon: [
      new Style({
        fill: new Fill({
          color: [255, 255, 255, 0.5],
        }),
        stroke: new Stroke({
          color: blue,
          width: width,
        }),
      }),
    ],
    Point: [
      new Style({
        image: new CircleStyle({
          radius: width * 2,
          fill: new Fill({
            color: blue,
          }),
          stroke: new Stroke({
            color: white,
            width: width / 2,
          }),
        }),
        zIndex: Infinity,
      }),
    ]
  };

  return function (feature, resolution) {
    return styles[feature.getGeometry().getType()];
  };
}
const draw = new Draw({
  type: 'Polygon',
  style: getStyleFunction(),
});

基於默認繪制樣式的樣式