首页 > 其他分享 >Cesium + geoserver (wmts) 实现离线地图服务和展示

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

时间:2024-10-31 20:19:10浏览次数:8  
标签:const viewer 离线 scene wmts geoserver Cesium false Math

急用前端代码的靓仔直接抄这个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(要有网才得行哦,老表)。

标签:const,viewer,离线,scene,wmts,geoserver,Cesium,false,Math
From: https://blog.csdn.net/jingjiaohuan/article/details/143411982

相关文章

  • docker部署手册(离线)
    文章目录一、下载地址二、部署环境三、安装部署3.1上传安装包3.2解压3.3创建docker.service3.4创建daemon.json文件3.5授权3.6启动3.7查看信息3.8设置开机启动3.9允许远程连接到docker方法一:修改docker.service方法二:修改daemon.json3.10处理报错docker.ser......
  • 免费可离线的AI抠图工具(鲜艺AI抠图 )免费下载
    鲜艺AI抠图是一款使用Tauri2和RMBG-1.4开发并免费提供的AI抠图工具,它能够快速去除图片背景,并支持本地和在线图片处理。:极速AI抠图:基于最新的AI技术,能够精准识别图像中的前景和背景,实现快速抠图,处理时间以毫秒计。完全免费:鲜艺AI抠图承诺永久免费,用户无需支付任何费用......
  • ARM架构鲲鹏主机BClinux离线安装docker步骤
    简介: 下载并安装适用于ARM架构的DockerCE二进制文件,解压后移动至/usr/bin目录。创建docker组,配置systemd服务脚本(docker.service、docker.socket、containerd.service),重载systemd配置,启动并启用docker服务。编辑daemon.json配置存储驱动、镜像加速地址等,最后拉取所需镜像。■......
  • AvaloniaUI项目离线开发全攻略:IDE安装、模板应用与NuGet私有化部署一站式解决
    1.引言在网络受限或完全离线的环境中开发.NET项目(本文示例为AvaloniaUI项目),可能会遇到一些挑战。本文将为您提供一套完整的离线开发解决方案,包括IDE的安装、AvaloniaUI模板的配置、私有化NuGet服务的部署以及NuGet包的制作和上传等。2.IDE安装指南VisualStudio2022安装V......
  • Ubuntu 22.04 LTS 在线/离线安装 Docker
    Docker安装方式准备环境root@ubuntu2204:~#hostnamectlStatichostname:ubuntu2204Iconname:computer-vmChassis:vmMachineID:06204406df2343f89f6ba6550a356854BootID:3142ea12a9e64adbab7b8939935e7698Virtualization:vmw......
  • 媒体播放器应用程序的解码器如下:使用 DISM 集成 HEVC 视频扩展应用;要使用 DISM 集成 H
    WMPLegacyandtheMediaPlayer Appare 100%differentsoftware'sandshareexactlyzerocodebetweenthem.MycodecsoftwaresupportsWMPbecauseitcanuseDirectshowcodecsbuttheMediaPlayerAppusesMediaFoundationCodecswhichare distributed......
  • centos7.6离线安装Redmine 5.1.1教程
    centos7.6离线安装Redmine5.1.1教程网络上离线安装redmine资料少,有帮助大家请点赞总体思路:先申请一台云主机(天翼云、阿里、腾讯),安装相同版本的centos操作系统,有两个好处:一是用云主机下载Redmine的RPM包以及所有依赖,再复制到离线centos服务器上;二是可以先在云主机上安......
  • 两句话讲清楚离线安装screen
    两句话讲清楚离线安装screen目录两句话讲清楚离线安装screen写在前面解决方案问题screen使用写在前面摘要众所周知,如果linux系统没有安装screen,那么服务器将会很难搞(我编的)。即使关闭了连接服务器的窗口,也想随时重新回到工作区,而不是只能通过本地保存的日志,或者kill进程。......
  • centos7离线安装nvidia-docker2(附安装包)
    说实话全网没有找到一个安装包,如果你刚好从我这里找到,给我留言我就能看到发给你。或者你按照我的教程使用yum离线下载也可以在自己的docker中拉取一个centos:7镜像,创建一个容器在容器中安装docker-ce#设置docker镜像源yum-config-manager\--add-repo\https://mirro......
  • Visual Studio 离线部署
    前言最近在在做一个移植项目,把代码从Unix移植到Windows上面,考虑两个编译链:(1)MINGW64-CRT(交叉编译)(2)VisualStudio。而VisualStudio社区版需保持在线使用,不然试用将存在过期时间。由于办公环境在内网内,所以考虑使用VisualStudio的生成工具配合CMake管理......