本文主要是介绍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 加载矢量图层设置文字标注的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
