openLayers实战(九)：正多边形的绘制

最新推荐文章于 2025-07-09 16:09:08 发布

原创

最新推荐文章于 2025-07-09 16:09:08 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#arcgis #前端 #javascript

文章讲述了使用OpenLayers进行地图交互，如何创建并控制绘制正多边形的功能，包括引入库、设置图层和交互行为，以及解决导入错误的过程。

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

遇到什么样的问题？

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)