openlayers绘制点、圆、多边形

我用的是4326坐标系，有些地方和3857坐标系不一样

思维导图是大佬整理的，我拿来用了

初始化地图

引入依赖

import Map from "ol/Map.js";
import View from "ol/View.js";
import { XYZ } from "ol/source.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";

初始化地图

我是以高德地图为地图图层的，url这里是高德的瓦片地址

initAMap() {
      // 初始化地图
      const raster = new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          crossOrigin: "anonymous",
        }),
      });

      // 防止横向拉伸
      this.source = new VectorSource({ wrapX: false });

      // 矢量图层，显示绘制的图像
      const vector = new VectorLayer({
        source: this.source,
      });
      this.vector = vector;

      this.map = new Map({
        layers: [raster, vector],
        // target为地图容器的id
        target: "mapDiv",
        view: new View({
          center: [120.8, 28.9],
          zoom: 16,
          maxZoom: 18,
          minZoom: 5,
          projection: "EPSG:4326",
        }),
      });

      // 单位，4326坐标系1单位代表多少米
      this.unit = this.map.getView().getProjection().getMetersPerUnit()
    },

绘制圆

// 单位为度，4326坐标系1单位代表多少米
this.unit = this.map.getView().getProjection().getMetersPerUnit()

this.circle = new Feature({
  // 4326坐标系，圆的半径单位是度，米需要转换成度
  // 半径转换，半径/单位  this.radius / this.unit
  // geometry: new Circle(center, this.radius / this.unit)

  geometry: new Circle([120.8, 28.9], 0.1),
});

// 这里的source是之前创建的数据源
// 注意是addFeatures,数据类型是数组
this.source.addFeatures([this.circle]); // 添加到地图上显示

绘制多边形

this.polygon = new Feature({
  // 这里的坐标组注意是个三维数组，而且首尾坐标需要闭合
  geometry: new Polygon([[[120.8, 28.9],[120.9, 28.9],[120.84634, 29.9],[120.8, 28.9]]]),
     style: new Style({ //样式根据需要自己改
       fill: new Fill({
       color: "rgba(132, 157, 230, 0.5)",
     }),
  }),
});

这里得注意一下，和圆不一样，方法是addFeature，没有s，也不用加中括号，这里浪费了我好长时间

this.source.addFeature(this.polygon); // 添加到地图上显示

绘制点

点就简单多了，和多边形差不多

const point= new Feature({
  geometry:new Point([120, 28]),
});
this.source.addFeature(point); // 添加到地图上显示