主要参考这篇博客改写
下面直接上代码
<!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>