openLayers实战(九)：正多边形的绘制_openlayers绘制多边形-CSDN博客

本文链接：https://blog.csdn.net/vampire10086/article/details/132408033

最近在绘制各种图形，越来越乱，看了很多文章，启发了从最最基础的图形开始学习扩展。

遇到什么样的问题？

import ol from "ol";
import { Draw } from "ol/interaction";
import { Vector as VectorSource } from "ol/source";
import { Layer, Vector as VectorLayer } from "ol/layer";
import Overlay from "ol/Overlay";
import { Polygon, LineString } from "ol/geom";
import Feature from "ol/Feature";
import { unByKey } from "ol/Observable";
import { getLength, getArea } from "ol/sphere";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Circle from "ol/style/Circle";
import GeoJSON from "ol/format/GeoJSON";

import { area, center } from "@turf/turf";
import * as turf from "@turf/turf";


this.draw = new Draw({
  source: vectorSource,
  type: "Circle",
  geometryFunction: Draw.createRegularPolygon(4), // 指定边数为 4（绘制正方形）
  style: new Style({
    fill: new Fill({
      color: shadowColor,
    }),
    stroke: new Stroke({
      color: color,
      lineDash: [10, 10],
      width: 3,
    }),
    image: new Circle({
      radius: 0,
      fill: new Fill({
        color: color,
      }),
    }),
  }),
});
this.map.addInteraction(this.draw);

这是我的代码片段，老是报错，资源我该引入的都引入了，后改为在线的ol引入方式也是不行

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'interaction')"

冷静下来，去看了源码：

改写引入方式，成功解决，clam down，不要暴躁，不要暴躁，暴躁降智！！！

import { createRegularPolygon } from "ol/interaction/Draw.js"

基础图形绘制

在这里插入图片描述

OpenLayers基础教程——地图交互之绘制图形_openlayers 地图绘制钳型_HerryDong的博客-CSDN博客

为方便调试，我把资源改为在线资源：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>OpenLayers</title>
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #group {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 200;
      }
    </style>
    <!-- openlayers -->
    <link
      href="https://cdn.jsdelivr.net/npm/ol/dist/ol.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/ol/dist/ol.js"></script>
    <!-- bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div id="map">
      <div id="group" class="btn-group">
        <button
          type="button"
          class="btn btn-primary"
          onclick="drawRegularPolygon(3)"
        >
          三角形
        </button>
        <button
          type="button"
          class="btn btn-success"
          onclick="drawRegularPolygon(4)"
        >
          正方形
        </button>
        <button
          type="button"
          class="btn btn-warning"
          onclick="drawRegularPolygon(5)"
        >
          正五边形
        </button>
        <button
          type="button"
          class="btn btn-info"
          onclick="drawRegularPolygon(6)"
        >
          正六边形
        </button>
        <button type="button" class="btn btn-danger" onclick="removeDraw()">
          结束
        </button>
      </div>
    </div>

    <script>
      // 创建图层
      var source = new ol.source.Vector();
      var layer = new ol.layer.Vector({
        source: source,
        style: function (feature, resolution) {
          var style = new ol.style.Style({
            image: new ol.style.Circle({
              radius: 10,
              fill: new ol.style.Fill({
                color: "red",
              }),
            }),
            stroke: new ol.style.Stroke({
              color: "green",
              width: 2,
            }),
            fill: new ol.style.Fill({
              color: "Crimson",
            }),
          });
          return style;
        },
      });

      // 创建地图
      var map = new ol.Map({
        target: "map",
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM(),
          }),
          layer,
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([0, 0]),
          zoom: 2,
        }),
      });

      // 绘制正多边形
      var draw;
      function drawRegularPolygon(sides) {
        removeDraw();
        draw = new ol.interaction.Draw({
          source: source,
          type: "Circle",
          geometryFunction: ol.interaction.Draw.createRegularPolygon(sides),
        });
        map.addInteraction(draw);
      }

      // 结束绘制
      function removeDraw() {
        if (draw) {
          map.removeInteraction(draw);
        }
      }
    </script>
  </body>
</html>