Use Cesium1.106 is Normal! But Cesium1.107+ is Error? Please Help!

[jmszwzr]

What happened?

All are normal in this version: Cesium 84~1.106, But it's all abnormal since 1.107, None of the code has changed!

Local file directory

.
├── README.md
├── css
│   ├── line.css
│   └── style.css
├── hello.html
├── index.html
├── js
│   ├── app.js
│   ├── bottle.js
│   ├── compute.js
│   ├── computeT.js
│   ├── index.js
│   ├── jquery-3.5.1.min.js
│   └── polyline.js
├── line.html
├── node_modules
│   └── satellite.js
├── package-lock.json
├── package.json
├── script
│   └── Cesium
└── static
    └── tle

Core code

var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    // 离线地球
    url: 'http://127.0.0.1:8190/tiles/{z}/{x}/{y}.png',
    fileExtension: 'png',
    maximumLevel: 12,
    show: true,
  }),

  baseLayerPicker: false, // 是否显示图层选择控件
  homeButton: false, // 返回主视角
  fullscreenButton: false, // 是否显示全屏按钮
  shadows: true, // 影子
  infoBox: false, // 是否显示点击要素之后显示的信息
  geocoder: false, // 是否显示地名查找控件
  sceneModePicker: false, // 是否显示投影方式控件,是否显示3D/2D选择器
  navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
  navigationHelpButton: false, // 是否显示帮助信息控件
  timeline: false, // 是否显示时间线控件
  scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存
  animation: true, // 是否显示动画控件
  shouldAnimate: true, // 当动画控件出现，用来控制是否通过旋转控件，旋转场景
  orderIndependentTranslucency: false, // 如果为true，并且配置支持它，则使用顺序无关的半透明性
  contextOptions: {
    webgl: { alpha: true },
  },
});

Cesium_GIS_Show_By_1.106_Normal

Cesium_GIS_Show_By_1.107_Error

Reproduction steps

1.Download this packag tj2-web-qyd-20240711.zip
2. install nodejs 21+
3. unzip that package and enter the directory
4. run command "http-server -p 8080"
5. Browser access "http://127.0.0.1:8080"，it's working fine at this point
6. The version of Cesium inside the zip package is 1.106, then you can download the 1.107+ installer from the official Github, such as 1.107, and then copy all the directories in this directory Cesium-1.107/Build/Cesium and replace the directory in the zip package in the script/Cesium, then you can find out that there is Cesium_ GIS_Show_By_1.107_Error

Sandcastle example

No response

Environment

Browser: Google Chrome 126.0.6478.127
CesiumJS Version: 1.107+
Operating System: Windows 10 1909
Nodejs: 21.7.3

[jmszwzr]

Locally, you also need to start the Nginx service, and the configuration for GIS in nginx.conf is as follows

server {
    listen       8190;
    location /tiles {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        # 谷歌_全球_卫星_12级 Windows配置
        alias   D:\\_qyd\\maps\\谷歌_卫星_全球_0-12级\\tiles;
    }
}

The tilemap directory is as follows

D:\_qyd\maps\谷歌_卫星_全球_0-12级
$ tree -ANL 2
.
├── OpenLayers5
│   ├── 64.ico
│   ├── README.md
│   ├── css
│   ├── img
│   ├── index.html
│   ├── js
│   └── resources
├── Readme.txt
├── tiles
│   ├── 0
│   ├── 1
│   ├── 10
│   ├── 11
│   ├── 12
│   ├── 2
│   ├── 3
│   ├── 4
│   ├── 5
│   ├── 6
│   ├── 7
│   ├── 8
│   └── 9
└── 谷歌_卫星_全球_0-12级-下载界面.png

19 directories, 5 files

[iamsee]

1.107改动了很多东西

[jmszwzr]

@iamsee 是的，从1.107及之后的版本，再使用以下办法就再也出现不了离线瓦片（包括在线地球也显示不了），很是奇怪，在此之前的版本都是可以的

var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    // 离线地球
    url: 'http://127.0.0.1:8190/tiles/{z}/{x}/{y}.png',
    fileExtension: 'png',
    maximumLevel: 12,
    show: true,
    // 在线地球
    // url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
  }),
  // 离线/在线地球
  // imageryProvider: google,

  baseLayerPicker: false, // 是否显示图层选择控件
  homeButton: false, // 返回主视角
  fullscreenButton: false, // 是否显示全屏按钮
  shadows: true, // 影子
  infoBox: false, // 是否显示点击要素之后显示的信息
  geocoder: false, // 是否显示地名查找控件
  sceneModePicker: false, // 是否显示投影方式控件,是否显示3D/2D选择器
  navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
  navigationHelpButton: false, // 是否显示帮助信息控件
  timeline: false, // 是否显示时间线控件
  scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存
  animation: true, // 是否显示动画控件
  shouldAnimate: true, // 当动画控件出现，用来控制是否通过旋转控件，旋转场景
  orderIndependentTranslucency: false, // 如果为true，并且配置支持它，则使用顺序无关的半透明性
  contextOptions: {
    webgl: { alpha: true },
  },
});```

[iamsee]

@jmszwzr 在线可以使用

Cesium.ArcGisMapServerImageryProvider.fromUrl(
          'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        );

加wx吧，我也有问题可以交流下 aqc151307

[syzdev]

Please pay attention to these Breaking Changes:

https://github.com/CesiumGS/cesium/blob/main/CHANGES.md#1107---2023-07-03

[ggetz]

CesiumJS is a big project, so we use GitHub for feature requests and bug tracking exclusively. In the future, please take any questions to the Cesium Forum where there are members of the community and developers from the team who can help. Thanks!

[jmszwzr]

Thank you all!
The problem of loading offline tiles has been solved in 1.107, currently testing 1.107 and 1.119 with no problems, here's how it loads in higher versions:

var viewer = new Cesium.Viewer('cesiumContainer', {
  baseLayerPicker: false, // 是否显示图层选择控件
  homeButton: false, // 返回主视角
  fullscreenButton: false, // 是否显示全屏按钮
  shadows: false, // 影子
  infoBox: false, // 是否显示点击要素之后显示的信息
  geocoder: false, // 是否显示地名查找控件
  sceneModePicker: false, // 是否显示投影方式控件,是否显示3D/2D选择器
  navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
  navigationHelpButton: false, // 是否显示帮助信息控件
  timeline: false, // 是否显示时间线控件
  scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存
  animation: true, // 是否显示动画控件
  shouldAnimate: true, // 当动画控件出现，用来控制是否通过旋转控件，旋转场景
  orderIndependentTranslucency: false, // 如果为true，并且配置支持它，则使用顺序无关的半透明性
  skyAtmosphere: false, // 光圈
  contextOptions: {
    webgl: {
      alpha: true
    }
  }
});

viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
  // 离线瓦片服务地址
  url: `http://127.0.0.1:8190/tiles/{z}/{x}/{y}.png`,
}));

Here's how it looks like in the higher version:

Reference Link:Cesium 加载在线天地图瓦片和离线瓦片功能

Thanks again everyone!

[jmszwzr]

@jmszwzr 在线可以使用

Cesium.ArcGisMapServerImageryProvider.fromUrl(
          'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
        );

加wx吧，我也有问题可以交流下 aqc151307

1.107+版本已解决离线瓦片加载问题，微信已加。