如何在绘制 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(),
});

基于默认绘制样式的样式