最近在绘制各种图形，越来越乱，看了很多文章，启发了从最最基础的图形开始学习扩展。
遇到什么样的问题？
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>
