operlayers中使用鼠标点击动态创建点、线、面

实现思路

首先创建相关的图像对象，如点对象、面对象、线对象，并将Feature对象添加到图层中。然后为地图添加单击、右击、移动的事件。在单击事件中记录每次点击的位置并转移成经纬度保存到一个数组中。在绘制面和线时，将该数组赋值给线或面的positions属性，在右击时结束绘制条件。

具体实现

mapManger：地图的对象

targetManger：矢量图层

mapManger和targetManger对象的创建请看：初始化地图

// 单击事件
mapManger.on('singleclick', function (e:any) {
  if(selectCoorDinateFlag.value && drawType != 0){
    let point = getPointById("movePolygon");
    LonLatArray.push(e.coordinate)
    /**
     * 因为添加线和面所需要的数据格式不同，这里要做区分
       1：画线
       2：画面
    */
    let coordinate = drawType == 1? LonLatArray : [LonLatArray];
    point.getGeometry().setCoordinates(coordinate)
  }
})
// 地图移动事件
mapManger.on("pointermove",function(e:any){
    if(selectCoorDinateFlag.value && !e.dragging){
      let point = getPointById("movePoint");
      let coor = mapManger.getCoordinateFromPixel(e.pixel);
      point.getGeometry().setCoordinates(coor)
    }
})
// 右击事件
mapManger.on("contextmenu",function(e:any){
  e.preventDefault();
  if(selectCoorDinateFlag.value){
    
    selectCoorDinateFlag.value = false;
    
    // 位置选取完成,删除点
    targetManger.getSource().removeFeature(getPointById("movePoint"))
    targetManger.getSource().removeFeature(getPointById("movePolygon"))
    LonLatArray = []
  }
})

// 收集所有点击过的经纬度
let LonLatArray:any[] = [];
// 判断是否选取经纬度
let selectCoorDinateFlag = ref(false)
/**
 * 绘制的类型
 * @description 0:点
 * @description 1:线
 * @description 2:面
 */
let drawType = 0;
/**
 * 输入类型绘制相关图形
 * @param type 
 * @description 0:点
 * @description 1:线
 * @description 2:面
 */
const selectCoorDinate = (type = 0)=>{
  selectCoorDinateFlag.value = true;
  drawType = type;
  // 创建移动提示点
  drawMovePoint(undefined,undefined,"右击取消绘制")
  // 创建绘制提示点
  drawMovePoint("movePolygon",drawType)
}

/**
 * 根据类型创建geom对象
 * @param type 绘制的类型
 */
const ByDrawtypeMakeGeom = (type:number|string)=>{
  if(Number(type) == 0){
    return new ol.geom.Point([0,0])
  }else if(Number(type) == 1){
    return new ol.geom.LineString([[0,0]])
  }else if(Number(type) == 2){
    return new ol.geom.Polygon([[0,0]])
  }
}
// 绘制移动圆
const drawMovePoint = (fid="movePoint",type=0,text?:string)=>{
let polygon = new ol.Feature({
  geometry:ByDrawtypeMakeGeom(type)
})
  polygon.setId(fid);
let style = new ol.style.Style({
  //边线颜色
  stroke: new ol.style.Stroke({
    color: '#0037ff',
    width: 2,
  }),
  image: new ol.style.Circle({
    radius: 6,
    fill: new ol.style.Fill({
      color: '#00b8ff',
    }),
  }),
  // 填充，绘制多边形时用到的
  fill:new ol.style.Fill({
    color:"rgba(0,0,0,0.5)"
  }),
  // 字体
  text:new ol.style.Text({
    textAlign:"center",
    textBaseline:"middle",
    font:"normal 12px 微软雅黑",
    offsetX:0,
    offsetY:18,
    text:text,
    fill:new ol.style.Fill({
      color:"#000"
    })
  })
})
  polygon.setStyle(style);
  targetManger.getSource().addFeature(polygon)
}

调用selectCoorDinate方法，并输入相关类型，就可以绘制图形了

效果

点效果

线效果

面效果