快速上手

前置依赖

可选 "@turf/turf": "^7.3.4"
必须 "cesium": "^1.139.1"

注意事项

cesium如果是ESModule引入的话，需要搭配构建插件才能生效，例如：

vue-cli技术栈，修改 vue.config.js 配置文件

const path = require('node:path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  configureWebpack: (config) => {
    const cesiumSourcePath = 'node_modules/cesium/Build/Cesium/' // cesium库安装目录
    const cesiumRunPath = './cesium/' // cesium运行时路径

    const plugins = [
      // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(
          path.join(config.output.publicPath, cesiumRunPath),
        ),
      }),
      // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(cesiumSourcePath, 'Workers'),
            to: path.join(config.output.path, cesiumRunPath, 'Workers'),
          },
          {
            from: path.join(cesiumSourcePath, 'Assets'),
            to: path.join(config.output.path, cesiumRunPath, 'Assets'),
          },
          {
            from: path.join(cesiumSourcePath, 'ThirdParty'),
            to: path.join(config.output.path, cesiumRunPath, 'ThirdParty'),
          },
          {
            from: path.join(cesiumSourcePath, 'Widgets'),
            to: path.join(config.output.path, cesiumRunPath, 'Widgets'),
          },
        ],
      }),
    ]

    return {
      module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
      plugins,
    }
  },
}

vite技术栈，修改 vite.config.ts 配置文件

import type { UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vite'
import cesium from 'vite-plugin-cesium'

export default defineConfig(async ({ mode }) => {
  return {
    base: '/',
    plugins: [vue(), vueJsx(), cesium()],
  } as UserConfig
})

因此，我更加推荐使用umd形式引入cesium

html

<link href="/plugins/Cesium/Widgets/widgets.css" rel="stylesheet" />
<script src="/plugins/Cesium/Cesium.js" type="text/javascript"></script>

引入 KBCore

KBCore打包的构建结果为esm和umd两种格式，前端可自由选择引入方式。

1. 引入KBCore（ESModule）

// 全量引入类库
import * as KBCore from 'kbe3d-core'
// 引入样式文件
import 'kbe3d-core/dist/kbe3d-core.css'

2. 引入KBCore（UMD）

下载Cesium/turf/KBCore插件包

UMD引入后会在window下自动挂载KBCore全局变量

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>示例</title>
    <link href="/plugins/Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="/plugins/Cesium/Cesium.js" type="text/javascript"></script>
    <script src="/plugins/turf-7.3.4/turf.min.js" type="text/javascript"></script>
    <link href="/plugins/KBCore/kbe3d-core.css" rel="stylesheet" />
    <script src="/plugins/KBCore/kbe3d-core.umd.cjs" type="text/javascript"></script>
  </head>

  <body>
    <div id="app"></div>
    <script type="module" src="/main.ts"></script>
  </body>
</html>

绘制一个简单的三维地球

本示例<template>样式采用unocss
原子化引擎编写
本示例已经假设您通过UMD的形式引入了cesium和KBCore

html

<script lang="ts" setup>
  import { onMounted } from 'vue'
  onMounted(async () => {
    const earth = new KBCore.Earth(
      'cesiumContainer',
      {
        fullscreenElement: 'cesiumContainer',
      },
      {
        zoomButton: true,
      },
    )
  })
</script>

<template>
  <div class="h-full">
    <div class="absolute z-1 bg-red px-10px py-4px">示例</div>
    <div id="cesiumContainer" class="h-full relative" />
  </div>
</template>

快速上手 ​

前置依赖 ​

注意事项 ​

引入 KBCore ​

1. 引入KBCore（ESModule） ​

2. 引入KBCore（UMD） ​

绘制一个简单的三维地球 ​

快速上手

前置依赖

注意事项

引入 KBCore

1. 引入KBCore（ESModule）

2. 引入KBCore（UMD）

绘制一个简单的三维地球