原生Cesium加载超图SuperMap iServer发布的rest地图服务

作者:taco

最近有客户在使用原生cesium中缺少地图资源，希望在原生cesium中使用我们发布的地图服务。当然有多种方式进行加载。包括提供的github插件supermap3d.js可以直接使用open打开发布的场景。不过这里选择重新写加载地图服务的方法。

原生中提供了加载各种类型底图的最基本方法UrlTemplateImageryProvider。使用这个接口即可实现加载（3D WebGL API）

接口文档参考api中该接口

主要参考这篇博客进行改写

下面直接上代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- Use correct character set. -->
		<meta charset="utf-8" />
		<!-- Tell IE to use the latest, best version. -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
		<meta name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
		<title>Hello World!</title>
		<script src="../Build/Cesium/Cesium.js"></script>
		<script src="../Build/jquery.min.js"></script>
		<script>
		</script>
		<style>
			@import url(../Build/Cesium/Widgets/widgets.css);

			html,
			body,
			#cesiumContainer {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="cesiumContainer"></div>
		<script>
			Cesium.Ion.defaultAccessToken =
				''
			var viewer = new Cesium.Viewer('cesiumContainer');
			var scene = viewer.scene;

			SuperMap2DImagryProvider(viewer,
				"http://localhost:8090/iserver/services/map-ugcv5-CountryR1China/rest/maps/Country_R_1%40China")
			SuperMap2DImagryProvider(viewer,
				"http://localhost:8090/iserver/services/map-ugcv5-ProvinceRoadL1China/rest/maps/ProvinceRoad_L_1%40China")



			function SuperMap2DImagryProvider(viewer, url, options) {
				this.layerProvider = ''
				this.viewer = viewer
				this.options = options || {}
				this.scales84 = [3.38032714321E-9, 6.76065428641E-9, 1.352130857282E-8, 2.704261714564E-8, 5.408523429128E-8,
					1.0817046858257E-7, 2.1634093716514E-7, 4.3268187433028E-7, 8.6536374866056E-7, 1.73072749732112E-6,
					3.46145499464224E-6, 6.92290998928448E-6, 1.3845819978568952E-5, 2.7691639957137904E-5,
					5.538327991427581E-5, 1.1076655982855162E-4, 2.2153311965710323E-4, 4.4306623931420646E-4,
					8.861324786284129E-4, 0.0017722649572568258, 0.0035445299145136517, 0.007089059829027303
				]

				this.scalesweb = [1.69016357160E-9, 3.38032714321E-9, 6.76065428641E-9, 1.352130857282E-8, 2.704261714564E-8,
					5.408523429128E-8, 1.0817046858257E-7, 2.1634093716514E-7, 4.3268187433028E-7, 8.6536374866056E-7,
					1.73072749732112E-6, 3.46145499464224E-6, 6.92290998928448E-6, 1.3845819978568952E-5,
					2.7691639957137904E-5, 5.538327991427581E-5, 1.1076655982855162E-4, 2.2153311965710323E-4,
					4.4306623931420646E-4, 8.861324786284129E-4, 0.0017722649572568258, 0.0035445299145136517,
					0.007089059829027303
				]
				var _that = this
				$.ajax({
					type: "get",
					url: url + '.json',
					success: function(result) {
						console.log(result)
						var name = _that.options.name || result.name;
						var rectangle = Cesium.Rectangle.fromDegrees(-180, -90, 180, 90)
						var epsgcode = result.prjCoordSys.epsgCode
						console.log(epsgcode, "epsgcode")
						var tilingScheme = ''
						var minlevel = 0
						var maxlevel = 22
						var originx = 0
						var originy = 0

						if (epsgcode === 4326) {
							tilingScheme = new Cesium.GeographicTilingScheme({
								numberOfLevelZeroTilesX: 2,
								numberOfLevelZeroTilesY: 1
							})
							originx = -180
							originy = 90
							if (_that.options.minimumLevel !== undefined) {
								minlevel = _that.options.minimumLevel
							} else {
								minlevel = 0;
							}
							if (_that.options.maximumLevel !== undefined) {
								maxlevel = _that.options.maximumLevel
							} else {
								maxlevel = 22;
							}
						}
						if (epsgcode === 3857) {
							tilingScheme = new Cesium.WebMercatorTilingScheme()
							originx = -20037508.34
							originy = 20037508.34
							if (_that.options.minimumLevel !== undefined) {
								console.log("not undefined")
								minlevel = _that.options.minimumLevel
							} else {
								minlevel = 0;
							}
							if (_that.options.maximumLevel !== undefined) {
								maxlevel = _that.options.maximumLevel
							} else {
								maxlevel = 22;
							}
						}

						_that.layerProvider = new Cesium.UrlTemplateImageryProvider({
							url: url +
								"/tileImage.png?transparent=true&cacheEnabled=true&width=256&height=256&x={x}&y={y}&scale={scale}&redirect=false&overlapDisplayed=false&origin={'x':" +
								originx + ",'y':" + originy + "}",
							rectangle: rectangle,
							minimumLevel: minlevel || 0,
							maximumLevel: maxlevel || 22,
							tilingScheme: tilingScheme,
							customTags: {
								scale: function(imageryProvider, x, y, level) {
									if (epsgcode === 4326) {
										return _that.scales84[level]
									}
									if (epsgcode === 3857) {
										return _that.scalesweb[level]
									}

								}
							}
						});
						var layer = viewer.imageryLayers.addImageryProvider(_that.layerProvider);
						return layer
					},
					error: function(msg) {
						console.log(msg);
					}
				})
			}
		</script>
	</body>
</html>

原生Cesium加载超图SuperMap iServer发布的rest地图服务

猜你喜欢