绘制点
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元素发生变化时触发')
})
好了,就先说这些了,下一篇:鼠标点击动态创建点、线、面