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元素发生变化时触发')
})

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