Cesium历史影像对比，全球历史影像0-17级

Oxygen_liu

已于 2022-08-23 16:34:18 修改

阅读量1.1k

点赞数

分类专栏： TS Cesium Vue3 文章标签： vue.js 前端 javascript

于 2022-08-22 10:47:44 首次发布

本文链接：https://blog.csdn.net/qq_41400354/article/details/126460602

版权

TS 同时被 3 个专栏收录

23 篇文章 3 订阅

订阅专栏

19 篇文章 4 订阅

订阅专栏

Cesium

16 篇文章 21 订阅

订阅专栏

老规矩先上项目截图，符合预期往下看。

项目截图

大兴机场

天府国际机场

地图年份是2014-2022年的，层级最高到17级，就会受限制。

地图来源

这里是找的arcgis提供的历史影像网址，因为权限问题只能获取17级的，访问数据还可以。

点击红框，页面右下角是影像请求地址

注意：arcgis提供的是WMTS格式

关键代码

加载WMTS

//cesium 官方示例
const shadedRelief1 = new Cesium.WebMapTileServiceImageryProvider({
    url : 'http://basemap.nationalmap.gov/arcgis/rest/services/USGSShadedReliefOnly/MapServer/WMTS',
    layer : 'USGSShadedReliefOnly',
    style : 'default',
    format : 'image/jpeg',
    tileMatrixSetID : 'default028mm',
    // tileMatrixLabels : ['default028mm:0', 'default028mm:1', 'default028mm:2' ...],
    maximumLevel: 19,
    credit : new Cesium.Credit('U. S. Geological Survey')
});
viewer.imageryLayers.addImageryProvider(shadedRelief1);

参数说明

卷帘

const layer1 = viewer.imageryLayers.addImageryProvider(...);
layer1.splitDirection = Cesium.SplitDirection.LEFT;//左侧
const layer = viewer.imageryLayers.addImageryProvider(...);
layer.splitDirection = Cesium.SplitDirection.RIGHT;//右侧

源码

源码因为涉及到很多项目内部的组件就不全部贴出来了，这里提供简易版本的。

<template>
<div  id="cesiumContainer">
      <div id="slider"></div>
    </div>
</template>
<script lang="ts" setup>
import {  onMounted } from "vue";
onMounted(()=> {
	const viewer = new Cesium.Viewer("cesiumContainer", {
	    imageryProvider :new Cesium.TileMapServiceImageryProvider({
	    url: "http://192.168.2.183:9310/maptilecache/service/tms/1.0.0/image_global_base_big-PNG-4326@EPSG:4326@png",
	    fileExtension: 'png',
	    minimumLevel: 1,
	    maximumLevel: 19,
	    rectangle:Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0), // west,south,east,north,
	    tilingScheme: new Cesium.GeographicTilingScheme()
	  })
	});
	
	const layer = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
	    url: `https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/17825/{TileMatrix}/{TileRow}/{TileCol}`, // 复制 2.5 中的地址
	    layer: '',
	    style: 'default',
	    tileMatrixSetID: '',
	    format: 'image/png',
	    credit: '',
	    maximumLevel: 17
	  }));
	layer.splitDirection = Cesium.SplitDirection.RIGHT;
	const layer1 = viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
	    url: `https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/13851/{TileMatrix}/{TileRow}/{TileCol}`, // 复制 2.5 中的地址
	    layer: '',
	    style: 'default',
	    tileMatrixSetID: '',
	    format: 'image/png',
	    credit: '',
	    maximumLevel: 17
	  }));
	layer1.splitDirection = Cesium.SplitDirection.LEFT;
	initRollerShutter(viewer)
})
const initRollerShutter = (viewer: Cesium.Viewer) => { //初始化卷帘
  if (handler) {
    handler.destroy();
    handler = null;
  }
  const slider = document.querySelector("#slider");
  if (slider) {
    const dom: HTMLCanvasElement = slider as HTMLCanvasElement;
    if (dom.parentElement) {
      handler = new Cesium.ScreenSpaceEventHandler(dom);
      viewer.scene.splitPosition =
        dom.offsetLeft / dom.parentElement.offsetWidth;
      let moveActive = false;
      function move(movement: any) {
        if (!moveActive) {
          return;
        }
        const relativeOffset = movement.endPosition.x;
        if (dom.parentElement) {
          const splitPosition =
            (dom.offsetLeft + relativeOffset) / dom.parentElement?.offsetWidth;
          dom.style.left = `${100.0 * splitPosition}%`;
          viewer.scene.splitPosition = splitPosition; // 设置卷帘左右分区范围(0-1)之间
        }
      }
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
      handler.setInputAction(function () {
        moveActive = true;
      }, Cesium.ScreenSpaceEventType.PINCH_START);

      handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
      handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.LEFT_UP);
      handler.setInputAction(function () {
        moveActive = false;
      }, Cesium.ScreenSpaceEventType.PINCH_END);
    }
  }
}
</script>
<style lang="less" scoped>
.cesiumContainer{
  position: relative;
}

.cesiumContainer{
  position: relative;
  width:100vw;
  height:100vh;

  #slider {
    position: absolute;
    left: 50%;
    top: 0px;
    background-color: #d3d3d3;
    width: 5px;
    height: 100%;
    z-index: 9;
  }

  #slider:hover {
    cursor: ew-resize;
  }
}
</style>

投影坐标系和地理坐标系

GCS:（Geographic Coordinate System）

1、地球只有一个质心，只是测不测的精确的问题而已。由地球的唯一性和客观存在，以地球质心为旋转椭球面的中心的坐标系，叫地心坐标系（地心坐标系又名协议地球坐标系），且唯一。质心不一定等于几何中心。

2、这里还要引出一个问题，地图是为人民服务的，每个国家都想让地图尽可能准确地描述本国的地形地貌，因此就有国家把质心“移走”，让局部的表面“贴到”该国的国土，使之高程误差尽量减小到最小。
这个时候，就出现了所谓的“参心坐标系”。即椭球中心不在地球质心的坐标系。

3、我们国家主要用到的四个GCS。

北京54坐标系、西安80坐标系、WGS84坐标系(World Geodetic System-1984)、CGCS2000坐标系

PCS(Projection Coordinate System)
PCS=GCS+投影方式

1、常用投影方式：高斯-克吕格投影、墨卡托投影、通用横轴墨卡托投影

墨卡托投影：它的投影面是竖着的椭圆柱面，并且投影面与地轴方向一致，所以也叫正轴等角切/割圆柱投影。百度地图和Google Maps使用的投影方法都是墨卡托投影。

高斯-克吕格投影(横轴墨卡托投影)

它的投影面是椭圆柱面
投影后的地图，角度不变，面积会变。离中央经线越远的地区，面积变化越大。此投影合适用于导航。
投影椭圆柱面是横着的；
投影椭圆柱面与椭球体相切。

6°分带法:从格林威治零度经线起,每6°分为一个投影带,全球共分为60个投影带。
3°分带法:从东经1°30′起,每3°为一带,将全球划分为120个投影带。
我国1：2.5万_{1：50万地形图使用6度分带法；1：5000}1：10000地形图使用3度分带法。

通用横轴墨卡托投影(UTM投影)

它和高斯克吕格投影特别像，只不过它是割圆柱，就是球体与椭圆柱面相割。因此也被称作横轴等角割圆柱投影
我国遥感影像通常会用UTM投影。
3857是投影坐标系嘛，以米为单位，4326是地理坐标系以度为单位

            var viewer = new Cesium.Viewer('cesiumContainer');
            var wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
                url : 'http://localhost:8080/geoserver/shp/wms',
                layers : 'shp:wafangdianshi_0',
                parameters : {
                    transparent : true,     //是否透明
                    format : 'image/png',
                    srs: 'EPSG:4326',
                    styles:''
                }
            });
            viewer.imageryLayers.addImageryProvider(wmsImageryProvider);


            var viewer = new Cesium.Viewer('cesiumContainer');
            var wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                url : 'http://localhost:8080/geoserver/gwc/rest/wmts/wzf:wafangdianshi_0/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
                layer : 'wzf:wafangdianshi_0',
                style : '',
                format : 'image/png',
                tileMatrixSetID:'EPSG:900913'      //一般使用EPSG:3857坐标系
            });
            viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

cesium加载地图服务的注意事项：
（1）首先要弄弄清地图服务的坐标系，例如可以通过查看 0级0文件夹下是1张还是2张瓦片来判断。
EPSG4326：tile_num（z） = 2的（2z+1）次方个瓦片；
EPSG3857：tile_num（z） = 2的（2z）次方个瓦片；
（2）cesium调用地图服务的时候，默认的坐标系是EPSG3857，默认的切片原点是左上角，即-180，90。如果是调用EPSG4326坐标系下的地图服务，需要加上

tilingScheme: new Cesium.GeographicTilingScheme()
WebMercatorTilingScheme //其中WebMercatorTilingScheme对应于EPSG:3857切片方案 常见于谷歌地图、微软必应地图以及大多数的ArcGIS在线地图，也是Cesium中默认的切片方案。
GeographicTilingScheme//对应于EPSG:4326切片方案，是一个简单的地理投影方案，可直接将经纬度映射为X和Y，这种投影通常被称为地理投影、等矩形投影、等距圆柱形投影等。