Cesium-1.138 将天地图作为矢量底图和影像底图叠加

<template> <div id="cesiumContainer" ref="cesiumContainer"></div> </template> <script setup> import * as Cesium from 'cesium' import '../Widgets/widgets.css' //这是src下面的widgets.css文件 import { onMounted } from 'vue' Cesium.Ion.defaultAccessToken = "*******"; window.CESIUM_BASE_URL = '/' //这是根目录下的四个文件夹 // 设施Cesium默认视角 中国 // 参数的含义： // 73.66, 39.90, 135.05, 49.55 是中国的经纬度范围 // 73.66 是中国的西边经度 // 39.90 是中国的南边纬度 // 135.05 是中国的东边经度 // 49.55 是中国的北边纬度 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(73.66, 39.90, 135.05, 49.55); onMounted(() => { const viewer = new Cesium.Viewer('cesiumContainer', { infoBox: false, //隐藏信息框 geocoder: false, //隐藏搜索框 homeButton: false, //隐藏home按钮 sceneModePicker: false, //隐藏场景模式切换按钮 2 是2D模式 baseLayerPicker: false, //隐藏图层选择器 navigationHelpButton: false, //隐藏帮助按钮 animation: false, //隐藏动画按钮 timeline: false, //隐藏时间线 fullscreenButton: false, //隐藏全屏按钮 // 矢量底图 baseLayer: new Cesium.ImageryLayer( new Cesium.WebMapTileServiceImageryProvider({ url: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?tk=*******', layer: 'vec', style: 'default', format: 'tiles', tileMatrixSetID: 'w', credit: new Cesium.Credit('Tianditu'), subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], maximumLevel: 18, show: true })) // 影像地图 // baseLayer: new Cesium.ImageryLayer( // new Cesium.WebMapTileServiceImageryProvider({ // url: 'https://t{s}.tianditu.gov.cn/img_w/wmts?tk=*******', // layer: 'img', // style: 'default', // format: 'tiles', // tileMatrixSetID: 'w', // credit: new Cesium.Credit('Tianditu'), // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], // maximumLevel: 18, // show: true // })) }) // 隐藏logo viewer._cesiumWidget._creditContainer.style.display = 'none'; }) </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> * { margin: 0; padding: 0 } #cesiumContainer { width: 100%; height: 100vh; } </style>