# openlayers添加坐标点
openlayers添加坐标点
上一节说了一下vue接入openlayer,这一节说一下在openlayer上面绘制点。
其实呢,openlayer还是蛮强大的,但是入门我觉得不容易,分享一张大神做的简化的openlayer结构图。
所以说通过这张图可以看出来,添加一个展示的坐标点,需要一个feature,一个source,一个layers。
下面是代码
// 初始化地图
initMap() {
map = new Map({
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'map',
view: new View({
center: [116.403218, 39.92372],
zoom: 12,
maxZoom: 18,
projection: 'EPSG:4326',
constrainResolution: true, // 设置缩放级别为整数
smoothResolutionConstraint: false, // 关闭无级缩放地图
}),
});
this.addPoint()
},
// 绘制坐标点
addPoint() {
let feature = new Feature({
title: 'beijing',
geometry: new Point([116.403218, 39.92372]),
})
feature.setStyle(
new Style({
image: new CircleStyle({
fill: new Fill({
color: 'blue',
}),
radius: 4,
}),
})
);
let source = new VectorSource()
source.addFeature(feature)
let layer = new VectorLayer()
layer.setSource(source)
map.addLayer(layer)
},
然后小点点就出来了呀!