cesium示例集--2.cesium自定义地图背景，突出展示某区域地图

在做项目时，遇到如下需求：某大屏展示项目，需要用到某个区域的地图展示，且要配上自定义的背景图片。
展示效果图如下（随手切的地图有点丑，请忽略哈哈哈哈哈）

此时我们要做的就是将cesium默认的背景和图层都去掉，加载我们自己所需某个区域地图服务，并设置背景图。

viewer.scene.skyBox.show = false; //去掉天空盒子
viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0); //设置场景背景色透明，便于显示自定的背景
viewer.scene.globe.baseColor = new Cesium.Color(0, 0, 0, 0); //修改地邱球体背景透明
viewer.scene.imageryLayers.removeAll();//去除其他图层

这里，我们在div容器上设置好一个背景图片

<style type="text/css">
   html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        .cesium-container {
            width: 100%;
            height: 100%;
            position: relative;
            background: url(./bg.jpeg) no-repeat;
            background-size: cover;
        }
</style>
<div id="cesiumContainer" class="cesium-container"></div>

设置好相应的参数后，这里我们再加载一个项目所需的地图服务

//加载瓦片资源
            var provider = new Cesium.UrlTemplateImageryProvider({
                url: "http://127.0.0.1:5500/地图无底图/mapTiles/{z}/{x}/{y}.png"
            });
            viewer.imageryLayers.addImageryProvider(provider);

            var pos = {
                heading: 6.151410947526216,
                pitch: -1.5653824262457778,
                roll: 0,
                position: {
                    "x": -2600107.8973753555,
                    "y": 5244831.858474234,
                    "z": 3598312.386814336
                }
            }
            viewer.camera.flyTo({
                destination: new Cesium.Cartesian3(
                    pos.position.x,
                    pos.position.y,
                    pos.position.z
                ),
                orientation: {
                    heading: pos.heading,
                    pitch: pos.pitch,
                    roll: pos.roll,
                },
            });