Cesium加载wms服务不进行切片加载

Cesium加载wms服务不进行切片加载常见情况下我们会通过WebMapServiceImageryProvider这个类加载geoserver发布出来的wms服务图层。/** * WMS服务图层 * param {string} url 底图对应的类型 * param {string} layers 图层名 */exportdefaultclassWMSLayerextendsCesium.WebMapServiceImageryProvider{constructor(url:string,layers:string,parameters{}){super({url,layers,parameters:{transparent:true,format:image/png,...parameters,},tilingScheme:newCesium.WebMercatorTilingScheme(),enablePickFeatures:false,});};};但是当图层具有文字标识的时候就会出现同一个几何被裁切出现多个标识的情况这个问题出现的原因是Cesium将wms服务切分成了256*256大小的瓦片进行叠加满足三维展示的需要。解决思路将wms图层按照Cesium当前视角下的最大经纬度范围和当前视图像素值加载出一整张图片在Cesium地球上进行叠加。获取视角下经纬度范围getScreenScope(){constrectanglethis.viewer.camera.computeViewRectangle();if(!rectangle){return;}this.rectanglerectangle;const{north,east,south,west,}rectangle;constsouthwestthis.getMetricCoordinates(Cesium.Math.toDegrees(west),Cesium.Math.toDegrees(south));constnortheastthis.getMetricCoordinates(Cesium.Math.toDegrees(east),Cesium.Math.toDegrees(north));return[...southwest,...northeast].join(,);};同时转换为EPSG:3857坐标系getMetricCoordinates(lngitude:number,latitude:number){constsourceProjectionEPSG:4326;consttargetProjectionEPSG:3857;constdegreesproj4(sourceProjection,targetProjection,[lngitude,latitude]);returndegrees;};获取当前视窗像素值const{width,height,}this.viewer.canvas.getBoundingClientRect();this.widthMath.ceil(width);this.heightMath.ceil(height);并且在每次视角变化结束时加载新的图片替换当前图层叠加新的图层。这里我们使用SingleTileImageryProvider这个类来实现图层的叠加。其中去需要注意的是每次移除和叠加图层的时候要保障前后图层处在同一个层级(index)并保持前后一些属性不变。完成代码importproj4fromproj4;import*asCesiumfromcesium;exportdefaultclassNoTileWMSLayer{viewer:Cesium.Viewer;width:number;height:number;baseUrl:string;layerName:string;index:number;rectangle?:Cesium.Rectangle;layer?:Cesium.ImageryLayer;constructor(viewer:Cesium.Viewer,options:{baseUrl:string,layerName:string,}){this.viewerviewer;this.baseUrloptions.baseUrl;this.layerNameoptions.layerName;this.indexthis.viewer.imageryLayers.length;const{width,height,}this.viewer.canvas.getBoundingClientRect();this.widthMath.ceil(width);this.heightMath.ceil(height);this.addLayer();(this.viewerasany).cameraChanged.push((){this.addLayer();});};private_show:booleantrue;getshow():boolean{returnthis._show;};setshow(isShow:boolean){constoldthis._show;if(isShow!old){this._showisShow;this.onShowChange();}};privateonShowChange(){if(this.layer){this.layer.showthis.show;}};private_splitDirection:Cesium.SplitDirectionCesium.SplitDirection.NONE;getsplitDirection():Cesium.SplitDirection{returnthis._splitDirection;};setsplitDirection(splitDirection:Cesium.SplitDirection){constoldthis._splitDirection;if(splitDirection!old){this._splitDirectionsplitDirection;this.onSplitDirectionChange();}};privateonSplitDirectionChange(){if(this.layer){this.layer.splitDirectionthis.splitDirection;}};getMetricCoordinates(lngitude:number,latitude:number){constsourceProjectionEPSG:4326;consttargetProjectionEPSG:3857;constdegreesproj4(sourceProjection,targetProjection,[lngitude,latitude]);returndegrees;};getScreenScope(){constrectanglethis.viewer.camera.computeViewRectangle();if(!rectangle){return;}this.rectanglerectangle;const{north,east,south,west,}rectangle;constsouthwestthis.getMetricCoordinates(Cesium.Math.toDegrees(west),Cesium.Math.toDegrees(south));constnortheastthis.getMetricCoordinates(Cesium.Math.toDegrees(east),Cesium.Math.toDegrees(north));return[...southwest,...northeast].join(,);};addLayer(){constbboxthis.getScreenScope();constoldLayerthis.layer;constparams{transparent:true,format:image/png,service:WMS,version:1.1.1,request:GetMap,layers:this.layerName,bbox,width:this.width,height:this.height,srs:EPSG:3857,};consturlParamsnewURLSearchParams();Object.entries(params).forEach(([key,value]){urlParams.append(key,String(value));});consturl${this.baseUrl}?${urlParams.toString()};this.indexthis.layer?this.viewer.imageryLayers.indexOf(this.layer):this.index;this.layerthis.viewer.imageryLayers.addImageryProvider(newCesium.SingleTileImageryProvider({url,rectangle:this.rectangle,tileWidth:this.width,tileHeight:this.height,}),Math.min(this.index,this.viewer.imageryLayers.length));if(this.layer){this.layer.showthis.show;this.layer.splitDirectionthis.splitDirection;}if(oldLayer){this.viewer.imageryLayers.remove(oldLayer);}};};通过这个方式加载就可以得到一个完整的wms服务constleftLayernewNoTileWMSLayer(window.mapViewer,{baseUrl:你的geoserver地址,layerName:你的图层名,});leftLayer.splitDirectionCesium.SplitDirection.LEFT;