openlayers添加坐标点


上一节说了一下vue接入openlayer,这一节说一下在openlayer上面绘制点。


其实呢,openlayer还是蛮强大的,但是入门我觉得不容易,分享一张大神做的简化的openlayer结构图。

# openlayers添加坐标点_缩放
所以说通过这张图可以看出来,添加一个展示的坐标点,需要一个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)
},

然后小点点就出来了呀!
# openlayers添加坐标点_初始化_02

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​ ​https://gitee.com/wjw1014​