第三章：Vue3.0+Openlayers+Cesium 三维地球WGS84瓦片乱序问题解决

瓦片加载问题

  大家好！不知道大家在看上一章内容时，是否发现上一章中当将瓦片调整为EPSG:4326时三维视图中的地图瓦片显示是有问题的，瓦片的层级结构错误导致加载的瓦片有明显的拉伸；所以本章节我们来处理上一章中的这些问题。

var sworldmap = new Sworld.SworldMap({
    mapContainer: "map",
       initView: {
           center: [115, 39],
           zoom: 4,
           project: 'EPSG:4326',
           minZoom:0,
           maxZoom:29
       },
       baseMapUrls:{
           mapSync:true
       },
       terrainProviderUrl:''            
       });
sworldmap.run();

瓦片展示结果错乱。

主要原因

  那么造成这种问题的原因主要是因为在olcs中的OLImageryProvider.js中，瓦片X与Y方向上的瓦片起始编号默认是从1开始的，所以加载的瓦片并不是从第0-0号瓦片开始加载的，这样导致了瓦片加载的错乱。

修改方法

  要修改这些问题，我们需要在安装的模块目录node_modules中找到olcs，打开目录olcs/core/OLImageryProvider.js，对olcs的源代码进行修改。

修改瓦片底层源数据

  handleSourceChanged_方法中将默认设置起点编号的参数options相关部分代码全部删除，修改如下：

handleSourceChanged_(frameState) {
    if (!this.ready_ && this.source_.getState() == 'ready') {
        this.projection_ = olcsUtil.getSourceProjection(this.source_) || this.fallbackProj_;
  
        if (this.projection_ == getProjection('EPSG:4326')) {
          this.tilingScheme_ = new Cesium.GeographicTilingScheme();
        } else if (this.projection_ == getProjection('EPSG:3857')) {
          this.tilingScheme_ = new Cesium.WebMercatorTilingScheme();
        } else {
          return;
        }
        this.rectangle_ = this.tilingScheme_.rectangle;
  
        this.ready_ = true;
      }
}

修改瓦片请求方法

  requestImage方法中将获取瓦片等级z_值的判断修改为如果tilingScheme_瓦片方案为Cesium.GeographicTilingScheme时级别加1，修改如下：

const z_ = this.tilingScheme_ instanceof Cesium.GeographicTilingScheme ? level + 1 : level;

修改完成后，我们再重启一下项目；然后使用将地图框架投影设置为EPSG:4326后再次加载，结果如下：

那么到这里我们WGS84的坐标系瓦片三维加载也就能正常显示了，，如果大家觉得我的方法还有用的话，也请大家能够点赞鼓励一下，您的鼓励是我分享的动力，谢谢各位！