上节课我们学了加载了矢量图片，这节我们来学绘制圆形
关键代码，第一段呢是设置圆点的操作，第二步是点击地图获取地图位置来设置圆点，ol还有很多类，各种形状的
//设置圆点
// let anchorLayer = new VectorLayer({
// source: new VectorSource(),
// });
// let anchorFeatures = new Feature({
// geometry: new Point(center),
// });
// anchorFeatures.setStyle(
// new Style({
// image: new Circle({
// radius: 5,
// fill: new Fill({ color: "red" }),
// stroke: new Stroke({ color: "black", width: 1 }),
// }),
// })
// );
// anchorLayer.getSource().addFeature(anchorFeatures);
// map.addLayer(anchorLayer);
let layer = new VectorLayer({
source: new VectorSource(),
});
map.addLayer(layer);
map.on("click", function (e) {
// 点击图层获取相对的位置进行相关圆点的新增
let position = e.coordinate;
let feature = new Feature({
geometry: new Point(position),
});
feature.setStyle(
new Style({
image: new Circle({
radius: 5,
fill: new Fill({ color: "blue" }),
stroke: new Stroke({ color: "black", width: 1 }),
}),
})
);
layer.getSource().addFeature(feature);
});
效果图
完整代码