vue3+ts+vite+cesium 加载天地图影像、标注等多服务器随机加载切换版本

最新推荐文章于 2024-04-02 11:35:15 发布
最新推荐文章于 2024-04-02 11:35:15 发布
阅读量1.1k 收藏 3
点赞数
分类专栏： cesium 案例分享 文章标签： javascript 前端 vue typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012425087/article/details/129910132
版权

Sober3r_A_man_engaged_in_trading_is_sitting_with_his_back_facin_1624e763-7a73-49c3-91a2-b0edac144cca.png
代码可以使我们的头发变白变秃

案例代码简介

这段代码是一个基于 Vue.js 的 Cesium 地图应用示例。它使用 Cesium.js 库创建一个 3D 地图视图，并以天地图作为底图和注记图层。在这个示例中，用户可以浏览地球表面的详细地理信息。此外，代码还对 Cesium 视图的一些功能进行了定制，例如禁用全屏按钮、地理编码器、首页按钮等。同时，代码还隐藏了默认的版权信息。

效果图

Snipaste_2023-04-02_11-39-53.jpg

代码分析和注释：

<template>
  <div id="cesiumContainer"></div>
</template>
  1. 创建一个包含 id=“cesiumContainer” 的 div 元素，用于渲染 Cesium 视图。
<script lang="ts">
import * as Cesium from "cesium";
  1. 导入 Cesium 库。
// 天地图密钥
let tiandituKey = "";//自行申请
  1. 设置天地图密钥。
// 天地图请求URL
let url =
  url: `http://{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=`+tiandituKey, //url地址;
  1. 构建天地图请求 URL。
const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: true, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
    shouldAnimate: true, // 是否显示动画
  });
  1. 创建 Cesium Viewer 实例并设置相关配置。
viewer._cesiumWidget._creditContainer.style.display = "none"; //取消版权信息
  1. 隐藏 Cesium 视图中的版权信息。
viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: url, //url地址
      layer: "img", //WMTS请求的层名称
      style: "default", //WMTS请求的样式名称
      format: "image/jpeg", //MIME类型，用于从服务器检索图像
      tileMatrixSetID: "GoogleMapsCompatible", //   用于WMTS请求的TileMatrixSet的标识符
      tileMatrixLabels: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
      ],
      tilingScheme: new Cesium.GeographicTilingScheme(),
      subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
      minimumLevel: 0, //最小层级
      maximumLevel: 16, //最大层级
      // show: false,
    }),
    1
  );
  1. 添加天地图底图图层。
//影像注记
  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",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    })
  );
  1. 添加天地图注记图层.
// 声明组件,在组件挂载后执行初始化代码
onMounted(() => {});
  1. 导出 Vue 组件的默认对象，其中 mounted 生命周期钩子函数为空，表示在组件挂载时不执行任何操作。
#cesiumContainer {
  width: 100vw;
  /*屏幕宽度*/
  height: 100vh;
  /*屏幕高度*/
  overflow: hidden;
  /*隐藏滚动条*/
  position: relative;
}
  1. 设置 Cesium 容器样式，使其充满整个视窗。

完整代码

如下：

<script setup lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as Cesium from "cesium";
// 声明组件,在组件挂载后执行初始化代码
onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    animation: true, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
    shouldAnimate: true, // 是否显示动画
  });
  viewer._cesiumWidget._creditContainer.style.display = "none"; //取消版权信息
  let tiandituKey = ""; //需要自己申请天地图的key
let url="  `http://{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=`+tiandituKey"
  //影像底图
  viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: url, //url地址
      layer: "img", //WMTS请求的层名称
      style: "default", //WMTS请求的样式名称
      format: "image/jpeg", //MIME类型，用于从服务器检索图像
      tileMatrixSetID: "GoogleMapsCompatible", //   用于WMTS请求的TileMatrixSet的标识符
      tileMatrixLabels: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
      ],
      tilingScheme: new Cesium.GeographicTilingScheme(),
      subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
      minimumLevel: 0, //最小层级
      maximumLevel: 16, //最大层级
      // show: false,
    }),
    1
  );

  //影像注记
  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",
      format: "image/jpeg",
      tileMatrixSetID: "GoogleMapsCompatible",
    })
  );
});
</script>

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

<style scoped>
#cesiumContainer {
  width: 100vw;
  /*屏幕宽度*/
  height: 100vh;
  /*屏幕高度*/
  overflow: hidden;
  /*隐藏滚动条*/
  position: relative;
}
</style>

源码地址

https://download.csdn.net/download/u012425087/87642676

缠中说禅87
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
cesium vue大屏 全套代码查看
wuyichao36的专栏
01-23 377
如果3d文件特别多，超过几十G，可以设置 内存、最大屏幕空间误差等等。加载过最大41G的3d文件也没出现奔溃。2,加载其他的3d文件，如gltf。1，加载 3DTiles 数据。
Vue天地图之图层类型切换
风清扬道场
03-31 1989
Vue项目引入天地图 在vue的静态资源目录下的index.html中引入天地图的底图 http://lbs.tianditu.gov.cn/api/js4.0/guide.html 在引入了vue项目以后及将需要用到的功能从window对象下赋值给当前项目的Data <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"> // 引入天地图底层图 export
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
cesium加载天地图 加载wmts
最新发布
AllBluefm的专栏
04-02 723
【代码】cesium加载天地图 加载wmts。
vue3+ts+vite+cesium 加载天地图影像 天地图矢量地图 天地图标注等案例模板
u012425087的博客
04-02 2119
案例代码是基于 Vue3 和 Cesium 开发的一个天地图三维地球应用。在组件挂载后，通过 Cesium.Viewer 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着，使用天地图的 WebMapTileServiceImageryProvider 添加了四个不同的图层，包括矢量底图、矢量注记、影像底图和影像注记。最后，将实例挂载到组件模板中的 div 元素中，使用户可以在页面上看到一个完整的天地图三维地球应用界面。
vue3cesium加载天地图
m0_50884068的博客
02-20 614
【代码】vue3cesium加载天地图。
vue3.x +Cesium vue3.x中安装使用cesium
csl125的博客
05-04 6461
vue3.x +Cesium vue3.x中安装使用cesium
vue项目引入cesium,创建3d地球,快速上手~
白云苍狗
05-23 3627
vue项目中简单快速引入cesium,创建3d地球,简单封装自己的cesium
Cesium学习笔记——Cesium中添加天地图三维服务插件
蹲在草丛嚼益达
02-19 839
【代码】Cesium学习笔记——Cesium中添加天地图三维服务插件。
Cesium结合GIS天地图 加载倾斜摄影3dtile + vue3
qq_32430463的博客
10-21 7052
将倾斜摄影OSGB数据转换为3dtile(转换方式很多，可以利用第三方工具cesiumlab) 利用Cesium加载GIS地图,我这里使用的是天地图，可以加载其他地图都行 加载3dtile数据到地图中展示
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统.zip
05-13
Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + ElementPlus + Vite2 从零搭建后台管理系统 Vue3 + Ts + El
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口 预览:http://dongnan185.com:8083/videos/vue3.mp4 一共两个包： 一个接口包 连的本地postgresql 表及信息有截图 库自己装 一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
vue3-vite-ts-cesium-天地图 地图影像 矢量地图 矢量标注
04-02
这个模板是基于 Vue3 和 Cesium 开发的一个天地图三维地球应用。在组件挂载后，通过 Cesium.Viewer 创建了一个三维地球实例，并设置了一系列的界面控件和参数，例如动画小组件、底图组件、全屏组件、时间轴等。接着，使用天地图的 WebMapTileServiceImageryProvider 添加了四个不同的图层，包括矢量底图、矢量注记、影像底图和影像注记。最后，将实例挂载到组件模板中的 div 元素中，使用户可以在页面上看到一个完整的天地图三维地球应用界面。 此代码中使用了 TypeScript，使代码更加规范、易于维护。同时，使用了 Vue3 的新特性 setup()，提供了更加灵活的组件配置方式，避免了传统 Vue2 中使用 Options API 时可能出现的一些问题。同时，使用了 Cesium 的 API，可以很方便地实现三维地球应用的开发。
cesium实现天地图加载调用
专注GIS开发
02-20 3798
cesium实现天地图的加载调用
vue中使用Cesium实现三维开发
cyydd21的博客
10-19 1039
cesium
【vue+cesium】加载三维天地图
ikariku的博客
09-26 3017
天地图及 CesiumJs 对 webpack 支持度差，步骤繁琐，因此采用脚本引入方式。 事先注册好cesium和天地图的token <script src="./plugin/cesium/Cesium.js"></script> <script src="./plugin/cesium/cesiumTdt.js"></script> <link href="https://cesium.com/downloads/cesiumjs/rel
vue3+ts+vite 路由懒加载
06-06
在 Vue3 + TypeScript + Vite 中实现路由懒加载，你可以按照下面的步骤进行操作： 1. 安装 `@types/webpack-env`，因为我们需要使用 webpack 的 `require.ensure()` 方法。 ``` npm install @types/webpack-env --save-dev ``` 2. 在 `src/router/index.ts` 中定义路由懒加载的函数。 ```typescript import { RouteRecordRaw } from 'vue-router'; const Home = () => import('@/views/Home.vue'); const About = () => import('@/views/About.vue'); const routes: RouteRecordRaw[] = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About }, { path: '/lazy', name: 'Lazy', component: () => import('@/views/Lazy.vue') } // 懒加载的路由 ]; export default routes; ``` 在这个例子中，我们使用了箭头函数来定义懒加载的组件。注意，`import()` 必须使用默认导出方式。 3. 在 `src/main.ts` 中导入路由配置，并使用 `createRouter()` 方法创建路由实例。 ```typescript import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; import routes from './router'; const router = createRouter({ history: createWebHistory(), routes }); createApp(App).use(router).mount('#app'); ``` 这里我们使用了 `createWebHistory()` 创建了 HTML5 history 模式的路由实例。 现在你已经成功地实现了 Vue3 + TypeScript + Vite 中的路由懒加载。如果你还有其他问题或疑问，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缠中说禅87

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值