Cesium 采用 UrlTemplateImageryProvider 形式加载 非WGS84椭球体的 WMS服务

说明

使用Cesium.WebMapServiceImageryProvider的方式可以很方便的实现。

但有些场景需要使用Cesium.UrlTemplateImageryProvider

代码 & 讲解

import proj4 from 'proj4'
proj4.defs('EPSG:4326', '+proj=longlat +datum=WGS84 +no_defs +type=crs')
// 4326的定义参考 https://epsg.io/4326.js
proj4.defs('EPSG:4544', '+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs')
// 4544的定义参考 https://epsg.io/4544.js

const getProjectedWmsImageryLayer = (url, typeName, filter = '1=1', srs = 'EPSG:4544') => {
	const imageryProvider = new Cesium.UrlTemplateImageryProvider({
		url: `${url}?service=WMS&version=1.1.0&request=GetMap&format=image%2Fpng&transparent=true&layers=${typeName}&cql_filter={cql_filter}&width=256&height=256&srs=${srs}&bbox={bbox}&styles=`,
		customTags: {
			bbox: function (imageryProvider, x, y, level) {
				// 获取当前瓦片的范围（经纬度）
				const rectangle = imageryProvider.tilingScheme.tileXYToRectangle(x, y, level)
				// 打印输出的格式如：`Rectangle {west: 1.7671458676442588, south: 0.3829783924735315, east: 1.9634954084936207, north: 0.5576704341849357}`

				// 获取四个边界的经纬度
				const minLon = Cesium.Math.toDegrees(rectangle.west)
				const minLat = Cesium.Math.toDegrees(rectangle.south)
				const maxLon = Cesium.Math.toDegrees(rectangle.east)
				const maxLat = Cesium.Math.toDegrees(rectangle.north)
				// 打印输出的格式如：`minLon: 101.25000000000001, minLat: 21.943045533438166, maxLon: 112.5, maxLat: 31.95216223802496`

				// 转换
				const minXY = proj4('EPSG:4326', srs, [minLon, minLat])
				const maxXY = proj4('EPSG:4326', srs, [maxLon, maxLat])
				// 打印输出的格式如：
				// minXY: [112411.70060325053, 2432238.3261371055]
				// maxXY: [1209962.334182823, 3561225.578209218]

				return `${minXY[0]},${minXY[1]},${maxXY[0]},${maxXY[1]}`
				// 参考GeoServer中 WMS GetMap 参数 `bbox` 描述：
				// `Bounding box for map extent. Value is minx,miny,maxx,maxy in units of the SRS.`
				// https://docs.geoserver.org/stable/en/user/services/wms/reference.html#getmap
			},
			cql_filter: () => {
				return filter
			}
		}
	})
	return new Cesium.ImageryLayer(imageryProvider)
}

const imageryLayer = getProjectedWmsImageryLayer(url, typeName, filter, 'EPSG:4544')

viewer.imageryLayers.add(imageryLayer)