【Cesium】vue项目加载3DTileset（.b3dm 格式）

小刘忙着搞前端

已于 2023-03-10 16:22:24 修改

阅读量5.4k

点赞数 12

文章标签： vue.js javascript 前端

于 2023-03-10 15:00:14 首次发布

本文链接：https://blog.youkuaiyun.com/mkijnbgt/article/details/129442544

版权

文章介绍了如何通过vue-cli-plugin-cesium插件自动化配置VueCLI3.0和2.0项目，以支持Cesium的集成，包括webpack配置、别名设置、全局引入Widgets.css等。示例代码展示了在Vue组件中创建Cesium地图，加载天地图瓦片服务和3DTiles模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装vue-cli-plugin-cesium
专门为脚手架vue-cli3.0和2.0打造的针对Cesium的VueCli扩展插件，自动化包括：

1.自动扩展 VueCLI 中 Cesium 相关的 webpack 配置

2. 添加一个 cesium 别名，以便我们在项目中轻松的引入 Cesium 文件资源
        使 Cesium 对象实例可在每个 Vue 模块中使用而无须 import 引入
        使 webpack 可正常打包 Cesium
        允许 webpack 友好地在 Cesium 中使用 require，解决 require 引入警告
        开发环境生成 sourcemap，生产环境取消 sourcemap
        生产环境抽取公共模块执行压缩
        生产环境 loader 切换到优化模式

3.自动在全局 main.js 中引入Widgets.css，可选

4.自动在 components/ 文件夹下生成示例文件，可选

首先安装 vue-cli-plugin-cesium 插件，推荐使用 yarn 安装，因为它更简洁
// npm
npm install --save-dev vue-cli-plugin-cesium
// yarn
yarn add vue-cli-plugin-cesium

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

<script >
var Cesium =require("cesium/Cesium")
 
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  mounted(){
	Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 22, 130, 55)  //默认视角定位中国上空
    var viewer = new Cesium.Viewer("cesiumContainer",{
		animation: false, //是否显示动画控件
		shouldAnimate: true,
		homeButton: false,

最低0.47元/天解锁文章