Cesium + geoserver (wmts) 实现离线地图服务和展示

最新推荐文章于 2025-02-20 20:11:54 发布

敬叫唤

最新推荐文章于 2025-02-20 20:11:54 发布

阅读量1.1k

点赞数 13

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/jingjiaohuan/article/details/143411982

版权

急用前端代码的靓仔直接抄这个h5文件

后端geoserver wmts服务搭建参考链接快速搭建一个geoserver 和 wmts服务-CSDN博客

'<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cesium WMTS Example</title>
  <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Widgets/widgets.css">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.106/Build/Cesium/Cesium.js"></script>
  <style>
    #cesiumContainer {
      width: 100%;
      height: 100vh;
      display: block;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <script>
    window.onload = function () {
      //边界
      const maxX = 114.53822135925296;
      const maxY = 35.492682492339824;
      const minX = 114.58851814270022;
      const minY = 35.511059477216364;

      //边界
      const border = new Cesium.Rectangle(
        Cesium.Math.toRadians(maxX),
        Cesium.Math.toRadians(maxY),
        Cesium.Math.toRadians(minX),
        Cesium.Math.toRadians(minY)
      );

      // todo 写入配置文件
      // 设置初始视图，缩放到层级16，并将中心定位到指定坐标
      const centerLongitude = (maxX + minX) / 2.0;
      const centerLatitude = (maxY + minY) / 2.0;
      const height_16 = 1200; //初始化层级高度(16)

      //设置wmts服务参数
      const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://172.10.10.23:8889/geoserver/gwc/service/wmts/rest/casco:huaxian_station2/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
        layer: 'casco:huaxian_station2',//图层名称
        style: '',
        format: 'image/png',//图片格式
        tileMatrixSetID: 'EPSG:4326',//网格集
        tilingScheme: new Cesium.GeographicTilingScheme(),//
        ellipsoid: Cesium.Ellipsoid.WGS84,//椭球 参考坐标系
      });

      /**
       * 参考链接 : https://cloud.tencent.com/developer/article/2340502
      */
      //获取视图(提供标签id)
      const viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,//动画部件
        imageryProvider: false,//使用自定义地图服务
        baseLayerPicker: false,//地图图层组件
        timeline: false,//时间线
        navigationHelpButton:false,//帮助按钮
        infoBox: true,//	信息框
        fullscreenButton: false,//全屏按钮
        geocoder: false,//地理编码搜索组件
      });

      /**
       * 参考链接 https://juejin.cn/post/7057776364010602526
      */
      //去掉版权
      viewer._cesiumWidget._creditContainer.style.display="none";  
      
      viewer.scene.debugShowFramesPerSecond = true;// 显示帧数
      
      viewer.scene.globe.depthTestAgainstTerrain = true;// 禁止相机进入地下

      /* 关闭鼠标操作惯性 */
      let CesiumViewerSceneController = viewer.scene.screenSpaceCameraController;
      CesiumViewerSceneController.inertiaSpin = 0;//旋转
      CesiumViewerSceneController.inertiaTranslate = 0;//平移
      CesiumViewerSceneController.inertiaZoom = 0;//变焦


      //设置归位键
      var homeCameraView = {
        destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16), // 设置经纬度和高度
        orientation: { //3d参数
          heading: Cesium.Math.toRadians(0.0), // 方向（以弧度为单位），0 表示正北
          pitch: Cesium.Math.toRadians(-90.0), // 倾斜度（以弧度为单位），-90 表示向下看
          roll: 0.0 // 滚动度（以弧度为单位）
        }
      };
      viewer.homeButton.viewModel.command.cameraView = homeCameraView;
      viewer.homeButton.viewModel.scene = viewer.scene; 4

      //设置地图源
      viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16)
      });

      //设置最低 和 最高缩放
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;//(m)
      viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000000;//(m)

    };
  </script>
</body>

</html>'

下面是对代码的解析


<!--地图容器 使用id定位-->
<div id="cesiumContainer"></div>

核心方法在这里

      //设置wmts服务参数
      const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://172.10.10.23:8889/geoserver/gwc/service/wmts/rest/casco:huaxian_station2/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
        layer: 'casco:huaxian_station2',//图层名称
        style: '',
        format: 'image/png',//图片格式
        tileMatrixSetID: 'EPSG:4326',//网格集
        tilingScheme: new Cesium.GeographicTilingScheme(),//
        ellipsoid: Cesium.Ellipsoid.WGS84,//椭球 参考坐标系
      });

url是geoserver wmts服务的调用地址，可以在geoserver 的文档中找到
http://127.0.0.1:8080/geoserver/web（先进入你的geoerver服务首页）

在文档中直接ctrl + f 硬着头皮搜你的图层名称

http://172.10.10.23:8889/geoserver/gwc/service/wmts/rest/casco:huaxian_station2/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/pngz

把这个url直接丢到代码里就行

下面的其他参数也有对应的注释

墨卡托： new Cesium.WebMercatorTilingScheme

后面是对地图页面的一些微调

1.Cesium组件隐藏

这里的viewer代表是整个地图对象，可以对其修改，实现多种配置

参考链接 : https://cloud.tencent.com/developer/article/2340502


      //获取视图(提供标签id)
      const viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,//动画部件
        imageryProvider: false,//使用自定义地图服务
        baseLayerPicker: false,//地图图层组件
        timeline: false,//时间线
        navigationHelpButton:false,//帮助按钮
        infoBox: true,//	信息框
        fullscreenButton: false,//全屏按钮
        geocoder: false,//地理编码搜索组件
      });

2.界面优化

参考链接 https://juejin.cn/post/7057776364010602526

      viewer._cesiumWidget._creditContainer.style.display="none";  //去掉版权
      
      viewer.scene.debugShowFramesPerSecond = true;// 显示帧数
      
      viewer.scene.globe.depthTestAgainstTerrain = true;// 禁止相机进入地下

      /* 关闭鼠标操作惯性 加速缩放 */
      let CesiumViewerSceneController = viewer.scene.screenSpaceCameraController;
      CesiumViewerSceneController.inertiaSpin = 0;//旋转
      CesiumViewerSceneController.inertiaTranslate = 0;//平移
      CesiumViewerSceneController.inertiaZoom = 0;//变焦


      //设置归位键（好像没啥用，还在调试）
      var homeCameraView = {
        destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16), // 设置经纬度和高度
        orientation: { //3d参数
          heading: Cesium.Math.toRadians(0.0), // 方向（以弧度为单位），0 表示正北
          pitch: Cesium.Math.toRadians(-90.0), // 倾斜度（以弧度为单位），-90 表示向下看
          roll: 0.0 // 滚动度（以弧度为单位）
        }
      };
      viewer.homeButton.viewModel.command.cameraView = homeCameraView;
      viewer.homeButton.viewModel.scene = viewer.scene;

3.绑定地图服务

      //设置地图源
      viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);

4.初始化位置

      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16)
      });

5.限制缩放高度

      //设置最低 和 最高缩放
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;//(m)
      viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000000;//(m)

最后结果(vue版本)

<template>
  <div id="cesiumContainer"></div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'

onMounted(() => {
  // 边界坐标
  const maxX = 114.53822135925296
  const maxY = 35.492682492339824
  const minX = 114.58851814270022
  const minY = 35.511059477216364

  const border = new Cesium.Rectangle(
    Cesium.Math.toRadians(maxX),
    Cesium.Math.toRadians(maxY),
    Cesium.Math.toRadians(minX),
    Cesium.Math.toRadians(minY)
  )

  // 定位中心和高度设置
  const centerLongitude = (maxX + minX) / 2.0
  const centerLatitude = (maxY + minY) / 2.0
  const height_16 = 1200 // 初始化层级高度

  // WMTS 服务参数
  const wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: 'http://172.10.10.23:8889/geoserver/gwc/service/wmts/rest/casco:huaxian_station2/{style}/{TileMatrixSet}/{TileMatrixSet}:{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
    layer: 'casco:huaxian_station2', // 图层名称
    style: '',
    format: 'image/png', // 图片格式
    tileMatrixSetID: 'EPSG:4326', // 网格集
    tilingScheme: new Cesium.GeographicTilingScheme(), // 切片方案
    ellipsoid: Cesium.Ellipsoid.WGS84, // 球 参考坐标系
  })

  // 视图配置
  const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false, // 动画部件
    imageryProvider: false, // 使用自定义地图服务
    baseLayerPicker: false, // 地图图层组件
    timeline: false, // 时间线
    navigationHelpButton: false, // 帮助按钮
    infoBox: true, //	信息框
    fullscreenButton: false, // 全屏按钮
    geocoder: true, // 地理编码搜索组件
  })

  viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏版权信息
  viewer.scene.debugShowFramesPerSecond = true // 显示帧数
  viewer.scene.globe.depthTestAgainstTerrain = true // 禁止相机进入地下

  /* 关闭鼠标操作惯性 */
  const CesiumViewerSceneController = viewer.scene.screenSpaceCameraController
  CesiumViewerSceneController.inertiaSpin = 0 // 旋转
  CesiumViewerSceneController.inertiaTranslate = 0 // 平移
  CesiumViewerSceneController.inertiaZoom = 0 // 变焦

  // 设置归位键
  const homeCameraView = {
    destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16), // 设置经纬度和高度
    orientation: { // 3d参数
      heading: Cesium.Math.toRadians(0.0), // 方向（以弧度为单位），0 表示正北
      pitch: Cesium.Math.toRadians(-90.0), // 倾斜度（以弧度为单位），-90 表示向下看
      roll: 0.0 // 滚动度（以弧度为单位）
    },
  }
  viewer.homeButton.viewModel.command.cameraView = homeCameraView

  // 设置地图源和初始视图
  viewer.imageryLayers.addImageryProvider(wmtsImageryProvider)
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(centerLongitude, centerLatitude, height_16),
  })

  // 设置缩放限制
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100 // (m)
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = 6000000 // (m)
})
</script>

<style lang="scss" scoped>
#cesiumContainer {
  width: 100%;
  height: 100vh;
  display: block;
}
</style>

备注：

使用html文件第一次加载，要卡一哈子,下载Cesium.js(要有网才得行哦，老表)。