@mapgis/web-app-framework-vue3

MapGIS Web App Framework by Vue3 + TS

特性

• 模块化应用架构
• 研发提效工具链
• 现代技术栈

安装

# npm
npm install ant-design-vue@^4.2.6
npm install @mapgis/mapbox-gl
npm install @mapgis/cesium
npm install @mapgis/webclient-common
npm install @mapgis/webclient-mapboxgl-plugin
npm install @mapgis/webclient-cesium-plugin
npm install @mapgis/webclient-vue3-ui
npm install @mapgis/webclient-vue3-common
npm install @mapgis/webclient-vue3-mapboxgl
npm install @mapgis/webclient-vue3-cesium
npm install @mapgis/web-app-framework-vue3

# yarn
yarn add ant-design-vue@^4.2.6
yarn add @mapgis/mapbox-gl
yarn add @mapgis/cesium
yarn add @mapgis/webclient-common
yarn add @mapgis/webclient-mapboxgl-plugin
yarn add @mapgis/webclient-cesium-plugin
yarn add @mapgis/webclient-vue3-ui
yarn add @mapgis/webclient-vue3-common
yarn add @mapgis/webclient-vue3-mapboxgl
yarn add @mapgis/webclient-vue3-cesium
yarn add @mapgis/web-app-framework-vue3

# pnpm
pnpm add ant-design-vue@^4.2.6
pnpm add @mapgis/mapbox-gl
pnpm add @mapgis/cesium
pnpm add @mapgis/webclient-common
pnpm add @mapgis/webclient-mapboxgl-plugin
pnpm add @mapgis/webclient-cesium-plugin
pnpm add @mapgis/webclient-vue3-ui
pnpm add @mapgis/webclient-vue3-common
pnpm add @mapgis/webclient-vue3-mapboxgl
pnpm add @mapgis/webclient-vue3-cesium
pnpm add @mapgis/web-app-framework-vue3

用法

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

引入

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

import * as Vue from 'vue'
import * as MapGISWebAppFrameworkVue3 from '@mapgis/web-app-framework-vue3'

globalThis.Vue = Vue
globalThis.MapGISWebAppFrameworkVue3 = MapGISWebAppFrameworkVue3

import '@mapgis/webclient-common'
import '@mapgis/webclient-mapboxgl-plugin'
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 MapGISMapboxGLComponents from '@mapgis/webclient-vue3-mapboxgl'
import MapGISCesiumComponents from '@mapgis/webclient-vue3-cesium'
import MapGISWebAppFramework from '@mapgis/web-app-framework-vue3'

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-mapboxgl/dist/index.css'
import '@mapgis/webclient-vue3-cesium/dist/index.css'
import '@mapgis/web-app-framework-vue3/dist/index.css'

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

导入资源

通过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'
        }
      ]
    })
  ]
})