operlayers绘制点，线，面，以及其他基本操作

绘制点

let coordinate = [lon,lat]
// 点
let point = new ol.Feature({
    geometry: new ol.geom.Point(coordinate),
})
// 样式
let style = new ol.style.Style({
    // 边线颜色
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2,
    }),
    // 字体样式
    text: new ol.style.Text({
      font: '12px 宋体',
      text: '测试',
      offsetY: -10,
      offsetX: 0,
      fill: new ol.style.Fill({ color: '#ff002f' }),
    }),
  })
point.setStyle(style)
// targetManger是图层的矢量图层
targetManger.getSource().addFeature(point)

targetManger是图层创建的矢量图层，创建方式看：初始化地图

绘制线

let coordinates = [[lon,lat],[lon,lat],[lon,lat]]
// 线
let line = new ol.Feature({
  type: 'LineString',
  geometry: new ol.geom.LineString(coordinates),
  name: "LineString",
  id:"LineString_id"
})
let lineStyle = new ol.style.Style({
  stroke: new ol.style.Stroke({
    width: 3,
    gradient: true,
    color: '#5f63d5',
    lineCap: 'round',
    lineJoin: 'square',
  }),
})
line.setStyle(lineStyle)
// 将绘制的图层添加到图层中
targetManger.getSource().addFeature(line)

绘制面

let coordinates = [[lon,lat],[lon,lat],[lon,lat]]
// 面
let polygon = new ol.Feature({
  geometry:new ol.geom.Polygon(coordinates)
})
// 给图形添加id
polygon.setId('polygon');
// 样式
let style = 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)"
  }),
})
polygon.setStyle(style);
targetManger.getSource().addFeature(polygon)

地图中心点平移

/**
 * 平移地图
 * @param lon 经度
 * @param lat 维度
 */
const moveTo = (lon: any, lat: any,zoom?:number) => {
  mapManger.getView().animate({
    center: [lon, lat],
    zoom: zoom || 4,
  })
}

清空图层所有内容

// 情况layer图层的所有内容
const clearLayer = ()=>{
  targetManger.getSource().clear();
}

根据id查找地图对象

// 通过id来查找 targetManger 图层上的点
const getPointById = (id)=>{
  return targetManger.getSource()?.getFeatureById(id)
}

删除对象

注意：feature必须是地图的对象，不可以是id等其他形式的数据

const clearFeatur = (feature)=>{
    Mangerlayer.getSource().removeFeature(feature)
}

基本的样式

new ol.style.Style({
    //填充色
    fill: new ol.style.Fill({
      color: 'rgba(255, 255, 255, 0.2)',
    }),
    //边线颜色
    stroke: new ol.style.Stroke({
      color: '#ffcc33',
      width: 2,
    }),
    //形状
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({
        color: '#ff002f',
      }),
    }),
    text: new ol.style.Text({
      //位置
      textAlign: 'top',
      //基准线
      // textBaseline: 'middle',
      //文字样式
      font: '20px 宋体',
      //文本内容
      text: feature.get('name'), //通过设置的fature的name属性获取，也可以通过参数获取设置，此处接收 字符串 对象
      //文本填充样式（即文字颜色），红色
      fill: new ol.style.Fill({ color: '#ff002f' }),
      //描边颜色，蓝色
      stroke: new ol.style.Stroke({ color: '#0022ff', width: 1 }),
      offsetX: 10,
      offsetY: -20.5,
    }),
})

地图的点击和移动事件

mapManger.on('singleclick', (e:any)=>{
  console.log("地图单击事件")
})
mapManger.on('click', (e:any)=>{
  console.log("地图点击事件")
})
mapManger.on('dblclick', (e:any)=>{
  console.log("地图双击事件")
})
mapManger.on('pointermove', (e:any)=>{
  console.log("鼠标在地图上的移动事件")
})
mapManger.on('pointerdrag', (e:any)=>{
  console.log("鼠标在地图上的拖拽事件")
})
mapManger.on('movestart', (e:any)=>{
  console.log("地图开始移动时触发")
})
mapManger.on('moveend', (e:any)=>{
  console.log("地图结束移动时触发")
})
mapManger.on('movestart', (e:any)=>{
  console.log("地图开始移动时触发")
})
mapManger.on('movestart', (e:any)=>{
  console.log("地图开始移动时触发")
})
mapManger.on('movestart', (e:any)=>{
  console.log("地图开始移动时触发")
})

地图上的change监听事件

mapManger.on('change:view',(e:any)=>{
  console.log('地图视图对象（如中心点、缩放级别等）发生变化时触发')
})
mapManger.on('change:layerGroup',(e:any)=>{
  console.log('地图图层组发生变化时触发，如添加、删除或重新排序图层。')
})
mapManger.on('change:size',(e:any)=>{
  console.log('地图窗口大小发生变化时触发')
})
mapManger.on('change:target',(e:any)=>{
  console.log('地图绑定的DOM元素发生变化时触发')
})

好了，就先说这些了，下一篇：鼠标点击动态创建点、线、面