openlayer 加载矢量图层设置文字标注

自定义图层样式加载矢量图层，设置图层文字标注。

function addVectorTileLayer(workspace,mapName){
var layerStyle = new ol.style.Style({
fill:new ol.style.Fill({color:'#fff'}),
stroke:new ol.style.Stroke({
color:'#000000',
width:1
}),
text: new ol.style.Text({
textBaseline: 'middle',
rotateWithView:true,
// font: '14px Microsoft YaHei',
})
});
let url =_map.baseUrl+"/iserver/services/map-"+workspace+"/rest/maps/"+mapName;
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
//矢量瓦片风格参数对象 
/* let vectorTileStyles = new ol.supermap.VectorTileStyles({
url: url,
view: _map.getView()
});*/
// 添加矢量瓦片图层
let vectorLayer = new ol.layer.VectorTile({
// 通过地图信息获取瓦片参数对象
source: new ol.source.VectorTileSuperMapRest(ol.source.VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result)),
declutter:true,//防止标注文字重复标注
style: function (feature) {
let name = feature.values_.layerName;
name = name.substr(0,name.indexOf('@'));
let info = map.getLayerInfo({layerName:name});
let lableName = (info == undefined)?'': info.lable_name;
let text = feature.values_.attributes[lableName] || '';
if(text != ''){
let place = info.geometry_type=='多段线'?'line':'point';
layerStyle.getText().setPlacement(place).setText(text);
}
//if(info)layerStyle.setFill(new ol.style.Fill({color:info.fill_color}));
return layerStyle;
},
});
_map.addLayer(vectorLayer);
});
}

文字标注重复显示解决办法，设置declutter=true属性

new ol.layer.VectorTile({
// 通过地图信息获取瓦片参数对象
source: source,
declutter:true,
})

最后

以上就是怡然电话为你收集整理的openlayer 加载矢量图层设置文字标注的全部内容，希望文章能够帮你解决openlayer 加载矢量图层设置文字标注所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。