cesium-加载geoserver发布的tms服务

效果

核心代码

      let smart =  new Cesium.UrlTemplateImageryProvider({
        url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png",
        rectangle : Cesium.Rectangle.fromDegrees(120.2987119,31.48071626, 120.6114519, 31.74685626) //切片加载范围
      });
      that._viewer.imageryLayers.addImageryProvider(smart);

完整代码

<!-- home -->
<template>
  <div class="home">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px;margin: 8px;">
      <el-breadcrumb-item :to="{ path: '/' }">cesium</el-breadcrumb-item>
      <el-breadcrumb-item>影像服务</el-breadcrumb-item>
      <el-breadcrumb-item>GeoServer-TMS</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "demo05_geoserver_tms",
  data() {
    return {
      map: {},
      _viewer: undefined,
      imgLayer: null,
    };
  },
  components: {},
  created() {
  },
  mounted() {
    this.initMap()
  },
  computed: {},
  methods: {
    initMap() {
      let that = this;
      //天地图token
      let TDT_tk = "token";
      //Cesium token
      let cesium_tk = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWRlMmQ1Ni1iNGMxLTRhY2YtYmExYi1jNjYyNTUxNDhjYzgiLCJpZCI6MjMwODAsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyIsInByIl0sImlhdCI6MTU4OTE4NzE1NH0.QrUVmI13wKIqFwmnsGSR6aMr8FEtbO7jsTA0mqnvbdM";
      let TDT_URL = "https://{s}.tianditu.gov.cn/";


      //标注
      let TDT_CIA_C = TDT_URL + "cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
          "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
          "&style=default&format=tiles&tk=" + TDT_tk;
      //初始页面加载
      Cesium.Ion.defaultAccessToken = cesium_tk;
      that._viewer = new Cesium.Viewer('cesiumContainer');

      // 添加mapbox自定义地图实例mapbox:
      let layer=new Cesium.MapboxStyleImageryProvider({
        url:'https://api.mapbox.com/styles/v1',
        username:'sungang',
        styleId: 'styleId',
        accessToken: 'accessToken',
        scaleFactor:true
      });
      that._viewer.imageryLayers.addImageryProvider(layer);

      let smart =  new Cesium.UrlTemplateImageryProvider({
        url : "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/wuxi%3A20200524@EPSG%3A900913@png/{z}/{x}/{reverseY}.png",
        rectangle : Cesium.Rectangle.fromDegrees(120.2987119,31.48071626, 120.6114519, 31.74685626) //切片加载范围
      });
      that._viewer.imageryLayers.addImageryProvider(smart);

      that._viewer.camera.setView({
        // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
        // fromDegrees()方法，将经纬度和高程转换为世界坐标
        destination: Cesium.Cartesian3.fromDegrees(118.78, 32.07, 10000000.0),
        orientation: {
          // 指向
          heading: Cesium.Math.toRadians(0),
          // 视角
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0
        }
      });

    }
  }
};
</script>

<style scoped>

.home {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#cesiumContainer {
  height: 90%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

</style>