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), // 指定边数为 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博客

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

  
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        
          三角形
        
        
          正方形
        
        
          正五边形
        
        
          正六边形
        
        
          结束