OpenLayers4文本上图实例

最新推荐文章于 2025-10-14 09:16:37 发布

原创最新推荐文章于 2025-10-14 09:16:37 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

WebGIS 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个使用OpenLayers库实现地图标注的方法。通过解析特定格式的数据，动态创建地图上的点特征，并为每个点设置文本标签样式，包括字体、颜色等属性。此外，还展示了如何将这些特征添加到地图图层中。

obj.drawstnm = function (st_result) {
var arr = new Array();
arr = st_result.split('|');
//set staion style
stnmFeatureset = new Array();

//declare img style
var labelStyel = function (feature) {
return new ol.style.Style({
text: new ol.style.Text({
offsetX: 0,
offsetY: 16,
textAlign: 'center',
textbaseline: 'middle',
font: 'normal 14px 微软雅黑',
text: feature.get('name'),
fill: new ol.style.Fill({ color: '#549688' })
})
});
}

for (var i = 1; i < arr.length; i++) {
var tmp = new Array();
tmp = arr[i].split(',');
var textf = new ol.Feature({
stid: tmp[1],
geometry: new ol.geom.Point([tmp[2], tmp[3]]),
name: tmp[0]//上图文本
});
textf.setStyle(labelStyel(textf));
stnmFeatureset.push(textf);
}

var vectorSource = new ol.source.Vector({
features: stnmFeatureset
});
obj.js_rain_stnm = new ol.layer.Vector({
visible: false,
zindex: 11,
source: vectorSource
});

return obj.js_rain_stnm;
}