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,})