diff --git a/src/pages/cesium/README.md b/src/pages/cesium/README.md index f2b8b0c..ce9d299 100644 --- a/src/pages/cesium/README.md +++ b/src/pages/cesium/README.md @@ -10,3 +10,6 @@ - https://www.npmjs.com/package/vue-cesium - https://zouyaoji.top/vue-cesium/#/zh-CN/component/controls/vc-navigation - https://cesium.pages.dev/ + +## 离线地图 +- https://github.com/CesiumGS/cesium/tree/main/Documentation/OfflineGuide diff --git a/src/pages/cesium/cesium-helper/00.cesium-init.ts b/src/pages/cesium/cesium-helper/00.cesium-init.ts index 4abd6bb..0587857 100644 --- a/src/pages/cesium/cesium-helper/00.cesium-init.ts +++ b/src/pages/cesium/cesium-helper/00.cesium-init.ts @@ -11,9 +11,14 @@ _configureCesium(); export function cesium_init(container: Element) { const viewer = new Cesium.Viewer(container, { animation: true, // .cesium-viewer-animationContainer https://cesium.com/learn/ion-sdk/ref-doc/Animation.html - baseLayerPicker: !true, + ...{ + baseLayer: Cesium.ImageryLayer.fromProviderAsync( + Cesium.TileMapServiceImageryProvider.fromUrl(Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')), + ), + baseLayerPicker: !true, + geocoder: !true, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false,则不会创建Geocoder小部件。 + }, fullscreenButton: !true, // 全屏按钮 - geocoder: !true, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false,则不会创建Geocoder小部件。 // globe: false, // 地球 homeButton: true, // Home按钮 infoBox: false, // InfoBox小部件。 @@ -34,7 +39,7 @@ export function cesium_init(container: Element) { viewer.scene.debugShowFramesPerSecond = true; - _configureMapTile(viewer); + // _configureMapTile(viewer); return viewer; } @@ -63,10 +68,10 @@ function _configureCesium() { // 默认视图区域 Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees( - 75.0, // 西经 - 10.0, // 南纬 - 140.0, // 东经 - 60.0, // 北纬 + 75, // 西经 + 10, // 南纬 + 140, // 东经 + 60, // 北纬 ); } @@ -77,15 +82,11 @@ function _configureMapTile(viewer: Cesium.Viewer) { url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', }); - if (!viewer.baseLayerPicker) { - // 如果没有底图选择器 - viewer.imageryLayers.removeAll(); - viewer.imageryLayers.addImageryProvider(provider); - } else { + if (viewer.baseLayerPicker) { // 如果有底图选择器 const customLayerViewModel = new Cesium.ProviderViewModel({ category: 'Cesium ion', // 或 'Other 、Cesium ion'、'Bing Maps' 等 - creationFunction: function () { + creationFunction() { return provider; }, iconUrl: 'gaodeImage.png', @@ -95,7 +96,15 @@ function _configureMapTile(viewer: Cesium.Viewer) { // 设置高德地图为默认图层 viewer.baseLayerPicker.viewModel.imageryProviderViewModels.unshift(customLayerViewModel); const selectedViewModel = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0]; + if (!selectedViewModel) { + console.error('未找到默认底图'); + return; + } viewer.baseLayerPicker.viewModel.selectedImagery = selectedViewModel; + } else { + // 如果没有底图选择器 + viewer.imageryLayers.removeAll(); + viewer.imageryLayers.addImageryProvider(provider); } } @@ -103,10 +112,10 @@ function _flyToDemo(viewer: Cesium.Viewer) { // 将三维球定位到中国 viewer.camera.flyTo({ complete: function complete() {}, - destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000), + destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17_850_000), orientation: { - heading: Cesium.Math.toRadians(348.4202942851978), - pitch: Cesium.Math.toRadians(-89.74026687972041), + heading: Cesium.Math.toRadians(348.420_294_285_197_8), + pitch: Cesium.Math.toRadians(-89.740_266_879_720_41), roll: Cesium.Math.toRadians(0), }, });