快速上手

本节将介绍如何在项目中使用，使用前请先确认是否已安装 npm ，没有安装请先参考安装章节。

使用之前

在开始使用 mapgis-webclient-vue3-cesium 之前，请先确保开发者已经了解并掌握 vue3 开发的基本操作，重点包含以下内容。

• Vue 组件
• 单文件组件

mapgis-webclient-vue3-cesium 中涵盖以下 vue 的技术点，建议先掌握其使用方法。

• prop 传递数据
• slot 内容分发
• events emit @click 事件

用法

在 main.ts 中写入以下内容：

完整引入

import { createApp } from 'vue'
import App from './App.vue'

import '@mapgis/webclient-common'
import * as Cesium from '@mapgis/cesium'
globalThis.Cesium = Cesium
import '@mapgis/webclient-cesium-plugin'

import Antd from 'ant-design-vue'
import MapGISUIComponents from '@mapgis/webclient-vue3-ui'
import MapGISCommonComponents from '@mapgis/webclient-vue3-common'
import MapGISCesiumComponents from '@mapgis/webclient-vue3-cesium'

import 'ant-design-vue/dist/reset.css'
import '@mapgis/cesium/Build/Cesium/Widgets/widgets.css'
import '@mapgis/webclient-vue3-ui/dist/index.css'
import '@mapgis/webclient-vue3-common/dist/index.css'
import '@mapgis/webclient-vue3-cesium/dist/index.css'

createApp(App).use(Antd).use(MapGISUIComponents).use(MapGISCommonComponents).use(MapGISCesiumComponents).mount('#app')

按需导入

默认支持基于 ES modules 的 tree shaking，直接引入 import { WebScene } from '@mapgis/webclient-vue3-cesium'; 就会有按需加载的效果

<template>
  <a-config-provider>
    <mapgis-theme-provider>
      <WebScene>
        <SceneSetting
          style="
            position: absolute;
            left: 12px;
            top: 12px;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.5);
            padding: 12px;
          "
        >
        </SceneSetting>
      </WebScene>
    </mapgis-theme-provider>
  </a-config-provider>
</template>

<script setup lang="ts">
import { WebScene, SceneSetting } from '@mapgis/webclient-vue3-cesium'
import '@mapgis/webclient-vue3-cesium/dist/theme/scene.css'
import '@mapgis/webclient-vue3-cesium/dist/theme/scene-setting.css'
</script>

导入资源

通过webpack、vite等工具实现资源的拷贝，以vite为例：

需要先安装vite-plugin-static-copy

配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import { viteStaticCopy } from 'vite-plugin-static-copy'

export default defineConfig({
  define: {
    CESIUM_BASE_URL: JSON.stringify('./cesiumStatic'),
    MAPGIS_BASE_URL: JSON.stringify('./')
  },
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: 'node_modules/@mapgis/cesium/Build/Cesium/*',
          dest: 'cesiumStatic'
        },
        {
          src: 'node_modules/@mapgis/webclient-cesium-plugin/dist/webclient-cesium-plugin-resource/*',
          dest: 'webclient-cesium-plugin-resource'
        },
        {
          src: 'node_modules/@mapgis/webclient-common/dist/webclient-common-resource/*',
          dest: 'webclient-common-resource'
        }
      ]
    })
  ]
})