(一)vue3+vite+cesium部署、控件隐藏、GeoServer安装部署、加载GeoServer服务遇到的跨域问题

最新推荐文章于 2024-10-08 14:36:45 发布
最新推荐文章于 2024-10-08 14:36:45 发布
阅读量1.1k 收藏 17
点赞数 27
分类专栏： cesium+vue3学习笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a974313302/article/details/136885823
版权

本文主要是记载一下在学习中遇到的问题以及解决。

一、创建项目

在目标文件夹中，打开命令窗口，输入：

pnpm create vue

按照以下进行配置：

关闭shell窗口，将刚创建的项目拖入VScode中打开，同时打开命令窗口，输入pnpm dev，启动项，查看项目是否创建成功。

二、环境同步

  1. 安装插件 ESlint，开启保存自动修复，若已安装，就跳过。
  2. 禁用插件 Prettier，若未安装就不管，安装了就禁用。
  3. 将下面代码在设置中对照修改
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"editor.formatOnSave": false,

配置文件 .eslintrc.cjs

  1. prettier 风格配置 https://prettier.io

    1. 单引号

    2. 不使用分号

    3. 每行宽度至多80字符

    4. 不加对象|数组最后逗号

    5. 换行符号不限制（win mac 不一致）

  2. vue组件名称多单词组成（忽略index.vue）

  3. props解构（关闭）

  rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
  }

基于 husky 的代码检查工作流

husky 是一个 git hooks 工具 ( git的钩子工具，可以在特定时机执行特定的命令 )

husky 配置

  1. git初始化 git init

  2. 初始化 husky 工具配置 Husky，在git bash中输入：

pnpm dlx husky-init && pnpm install

 3.修改 .husky/pre-commit 文件

pnpm lint

lint-staged 配置

  1. 安装
pnpm i lint-staged -D
  1. 配置 package.json
{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}
  1. 修改 .husky/pre-commit 文件
pnpm lint-staged

三、Cesium安装

pnpm i cesium vite-plugin-cesium vite -D

 //配置vite.config.js
//vite.config.js中配置如下：


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
 
 
export default defineConfig({
  plugins: [vue(),cesium()]
});

四、加入相应代码，测试运行

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false // 禁用沙箱，解决控制台报错
  })
  viewer.entities.add({
    name: 'Hello World',
    position: Cesium.Cartesian3.fromDegrees(105.0, 30.0, 10000000.0),
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED
    }
  })
})
</script>

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

五、Cesium默认设置关闭

 Cesium.Ion.defaultAccessToken = cesiumKey // 设置cesium的access_token
  // 初始化cesium
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: false, // 关闭cesium右下角的信息框
    animation: false, // 隐藏动画控件
    baseLayerPicker: false, // 隐藏图层选择控件
    fullscreenButton: false, // 隐藏全屏按钮
    vrButton: false, // 隐藏VR按钮，默认false
    geocoder: false, // 隐藏地名查找控件
    homeButton: false, // 隐藏Home按钮
    sceneModePicker: false, // 隐藏场景模式选择控件
    selectionIndicator: true, // 显示实体对象选择框，默认true
    timeline: false, // 隐藏时间线控件
    navigationHelpButton: false, // 隐藏帮助按钮
    scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
    shouldAnimate: true, // 开启动画自动播放
    sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
    requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
    // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
    maximumRenderTimeChange: Infinity
  })

六、安装GeoServer，以及加载数据，网上资源很多不在重复。

1.JDK下载:一定要看看GeoServer对应的JDK版本，版本不对，服务启动时有问题的。下载最新的JDK版本，GeoServer能启动，但是在图层预览时不能显示。JDK版本过低会导致GeoServer无法启动，来回安装后，导致环境变量出错，又重新设置了环境变量。我使用的最新的GeoServer2.25.0,对应的下JDK11即可。

2.跨域资源共享问题：

解决办法，参考这大佬，可以解决不同版本的问题：geoserver完美跨域解决方式（2024版） - 知乎 (zhihu.com)

解决了：

附上代码

<!--
 * @Author: geo_yanglei ylshishiqiushi@foxmail.com
 * @Date: 2024-03-19 18:21:22
 * @LastEditors: geo_yanglei ylshishiqiushi@foxmail.com
 * @LastEditTime: 2024-03-21 16:08:57
 * @FilePath: \CesiumVue3Study\src\views\CesiumMap.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue' // 导入vue的ref和onMounted方法
import * as Cesium from 'cesium' // 导入cesium库

const cesiumContainer = ref(null) // 定义cesiumContainer变量,类型为ref
// 定义cesium的access_token
const cesiumKey =
  '你的KEY'
//天地图key
const tiandituKey = '你的KEY'
const initCesium = () => {
  Cesium.Ion.defaultAccessToken = cesiumKey // 设置cesium的access_token
  // 初始化cesium
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: false, // 关闭cesium右下角的信息框
    animation: false, // 隐藏动画控件
    baseLayerPicker: false, // 隐藏图层选择控件
    fullscreenButton: false, // 隐藏全屏按钮
    vrButton: false, // 隐藏VR按钮，默认false
    geocoder: false, // 隐藏地名查找控件
    homeButton: false, // 隐藏Home按钮
    sceneModePicker: false, // 隐藏场景模式选择控件
    selectionIndicator: true, // 显示实体对象选择框，默认true
    timeline: false, // 隐藏时间线控件
    navigationHelpButton: false, // 隐藏帮助按钮
    scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
    shouldAnimate: true, // 开启动画自动播放
    sceneMode: 3, // 初始场景模式 1：2D 2：2D循环 3：3D，默认3
    requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
    // 如场景中的元素没有随仿真时间变化，请考虑将设置maximumRenderTimeChange为较高的值，例如Infinity
    maximumRenderTimeChange: Infinity
  })
  //隐藏cesium的logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'
  //开始相机加载到成都
  // viewer.camera.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(104.06, 30.67, 400000),
  //   orientation: {
  //     heading: Cesium.Math.toRadians(0),
  //     pitch: Cesium.Math.toRadians(-90),
  //     roll: 0
  //   }
  // })
  //删除默认bing底图
  viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
  //添加天地图底图
  const tiandituImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: `http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=
${tiandituKey}`,
    layer: 'tdtBaseMap', // 图层名
    style: 'default', // 样式名
    format: 'image/jpeg', // 图片格式
    tileMatrixSetID: 'GoogleMapsCompatible', // 瓦片矩阵集
    show: false // 不显示天地图底图
  })
  viewer.imageryLayers.addImageryProvider(tiandituImageryProvider)
  //添加天地图注记
  viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url:
        'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg' +
        '&tk=' +
        `${tiandituKey}`,
      layer: 'tdtAnnoLayer',
      style: 'default',
      maximumLevel: 18, //天地图的最大缩放级别
      format: 'image/jpeg',
      tileMatrixSetID: 'GoogleMapsCompatible',
      show: false
    })
  )
  //加载wms服务
  const wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
    url: 'http://localhost:8080/geoserver/cesium/wms',
    layers: 'cesium:Srtm-1_V3_dem_ql', //图层名
    parameters: {
      format: 'image/png', //图片格式
      transparent: true, //背景透明
      srs: 'EPSG:4326' //投影坐标系
    }
  })
  viewer.imageryLayers.addImageryProvider(wmsImageryProvider)
  //跳到相应坐标
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(112.3363037109375, 22.4296875, 400000)
  })
}
onMounted(() => {
  // 页面加载完成后执行initCesium方法
  initCesium()
})
</script>

<style scoped>
</style>

a974313302
关注
专栏目录
DEJA_VU3D - Cesium 之 vue3+vite+ts+cesium项目搭建全过程
总得学点什么的博客
11-28 2505
本篇我们就来介绍从零开始搭建vue3+vite+ts+cesium项目
Cesium加载Geoserver跨域问题
10-15
https://blog.csdn.net/qq_40216244/article/details/109046931 ceslium加载Geoserver跨域问题方法步骤，真实有效。
解决Cesium访问Geoserver的跨域问题
qq_43342037的博客
07-14 1278
因为工作需要，使用Cesium+Geoserver搭建系统，在加载地形时出现了服务器访问跨域问题，先将解决方法记录下来，希望对看见这篇文章的人有所帮助。
vue3项目中引入Cesium
m0_62317155的博客
09-29 1230
01创建Cesium项目
vue3【vite】中使用cesium
11-27 3852
【代码】vue3【vite】中使用cesium。
cesium+vue3+vite
qq_45990361的博客
10-20 451
在之前的cesium版本这样写没有问题，但cesium进行了更新，官方示例中改为上面那种写法，否则会报'cannot read properties of undefined (reading 'updatetransform')'错误。注意：这里下载的是vite-plugin-cesium插件和cesium两个，因为是vite，所以下载vite-plugin-cesium，这可以帮助我们进行配置，如果是vuecli脚手架直接npm i cesium即可，其配置我这里没有尝试。
vue3+vite搭建第一个cesium项目详细步骤及环境配置（附源码）
whs15193553607的博客
07-06 1857
vite-plugin-cesium 是一个专门为 Vite 构建工具定制的插件，用于在 Vite 项目中轻松使用 Cesium 库。它简化了在 Vite 项目中集成 Cesium 的过程，并提供了一些额外的功能和配置选项。而直接安装 Cesium 库，你需要手动配置 Vite 项目以确保正确引入和使用 Cesium。首先登录网址https://cesium.com/ion/signin/tokens，在注册后申请token，然后创建一个cesium对象，并使用我们创建的div容器承载地图。
vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本
04-02
这段基于 Vue.js 的 Cesium 地图应用示例展示了如何使用 Cesium.js 创建一个具有自定义配置的 3D 地球视图。Cesium.js 是一个开源 WebGL 虚拟地球引擎，可以构建交互式的 3D 地图应用。示例中的底图和注记图层来自...
基于vue3+vite+cesium 生成热力图CesiumHeatmap源码
11-22
在vue3+vite+cesium加载CesiumHeatmap生成热力图时不能直接使用， 需对源码进行重新封装及修改后方可在vue3+vite中调用； 源码已修改并验证可用；
前端webgis开发框架，vue3+vite4+cesium+axios+vue-router搭建
10-26
cesium是一个强大的显示三维地球和地图的开源js库，本web框架cesium采用版本1.110，支持本工程内部部署及CDN部署的CesiumJS 库。开发环境npm install 一键运行，生产环境vite build 一键打包，不用进行额外的配置。...
快速搭建Vite + Vue3 + Cesium 开发环境(详细步骤)（一）
曹进的博客
06-02 2282
快速搭建Vite + Vue3 + Cesium 开发环境(详细步骤)
cesium跨域加载问题
02-20
解决Cesium访问数据跨域问题，数据使用tomcat部署在服务器上。
Vue3(Vite) 安装 Cesium
ッ微凉的博客
08-16 372
安装、引入、初始化三维Cesium
WebGIS 之 vue3+vite+ceisum
Jasmin博客
03-31 1991
项目搭建node版本在16以上
Vue3+Vite+Cesium实现Cesium组件式开发
weixin_52771898的博客
05-21 985
Vue3+Vite+Cesium实现Cesium组件式开发
vue3结合openlayers，geoserver实现GIS一张图(WebGIS)
weixin_73810008的博客
02-09 3191
WebGIS小小白在除夕这天倾情演绎
Vue3加vite使用Cesium绘制图形
z772330927的博客
08-26 465
vue3使用Cesium绘制图形
vue3+vite+cesium安装配置
最新发布
weixin_58216810的博客
10-08 373
查看版本号报错（无法加载ps1文件）：删除对应ps1文件。main.js注释掉 import './style.css'pnpm create vite 项目名。2.vue3+vite+cesium安装配置。选择框架（vue+js）修改vite.config.js文件。cnpm安装（换源同理）yarn安装（换源同理）pnpm安装（换源同理）1.node安装配置。
使用Vite+Vue3创建Cesium项目
qq_44647871的博客
07-05 269
Cesium是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库，Cesium一词来源于化学元素铯，铯是制造原子钟的关键元素，研发小组通过命名强调Cesium产品精益求精，专注时间数据可视化。Cesium为三维GIS提供了一个高效的数据可视化平台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值