OpenLayers实现点标记

注：前提地图（map）已经创建成功

一、实现单个标点
import { Vector as SourceVec } from ‘ol/source’
import { Feature } from ‘ol’
import { Point } from ‘ol/geom’
import { Style,Icon} from ‘ol/style’
import { Vector as LayerVec } from ‘ol/layer’

export default {
mounted(){
this.vectorTileLayer()
}
methods: {
vectorTileLayer(){
// 创建矢量容器
var vectorSource = new SourceVec({})
//创建图标特性
var iconFeature = new Feature({
geometry: new Point([117.12783185600281,36.674042472179686], “XY”)
})

//将图标特性添加进矢量中
vectorSource.addFeature(iconFeature)
//创建图标样式
var iconStyle = new Style({
image: new Icon({
opacity: 0.75,
src: “图标地址”
})
})
//创建矢量层
var vectorLayer = new LayerVec({
source: vectorSource,
style: iconStyle
});
//添加进map
map.addLayer(vectorLayer);
}
}
}
二、实现海量标点
import { Vector as SourceVec,Cluster } from ‘ol/source’
import { Feature } from ‘ol’
import { Point } from ‘ol/geom’
import { Style,Icon,Stroke,Fill,Text,Circle } from ‘ol/style’
import { Vector as LayerVec } from ‘ol/layer’

export default {
mounted(){
this.massiveFature()
}
methods: {
massiveFature(){
// 坐标
var lnglats = [
[116.963,36.623],
[116.980,36.620],
[116.999,36.640],
[117.029,36.639],
[117.055,36.643],
[117.168,36.659]
]
// 创建Feature对象集合
var features = new Array()
for(var i = 0; i < lnglats.length; i++){
features.push(new Feature({
geometry: new Point(lnglats[i])
}))
}
// 矢量要素数据源
var source = new SourceVec({
features:features
})
// 聚合标注数据源
var clusterSource = new Cluster({
distance:40,
source: source
})
// 加载聚合标注的矢量图层
var styleCache = {}; //用于保存特定数量的聚合群的要素样式
var clusters = new LayerVec({
source: clusterSource,
style: function (feature, resolution){
var size = feature.get(‘features’).length; //获取该要素所在聚合群的要素数量
var style = styleCache[size];
console.log(size);
if(!style){
style = [
new Style({
image: new Circle({
radius: 10,
stroke: new Stroke({
color: ‘#fff’
}),
fill: new Fill({
color: ‘#3399CC’
})
}),
text: new Text({
text: size.toString(),
fill: new Fill({
color: ‘#fff’
})
})
})
];
styleCache[size] = style;
}
return style;
}
});
//
this.$refs.emap.map.addLayer(clusters);
}
}
}

————————————————
版权声明：本文为CSDN博主「好的，，」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/x65079018/article/details/88692669