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

本文地址：https://blog.csdn.net/rookiepm/article/details/107489258