vite-plugin-mars3d

基于 Vue3.x + Mars3D 平台的🌎Vite插件

vite-plugin-mars3d使用说明

安装

//安装mars3d主库
npm install mars3d mars3d-cesium @turf/turf --save

//安装vite插件
npm install vite-plugin-mars3d --save

配置

vite.config.ts中引入plugin插件

import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';

export default defineConfig({
  plugins: [mars3dPlugin()]
});

如果你个性化需求，也可以按需传入参数

import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';

export default defineConfig({
  plugins: [
      mars3dPlugin({
        mars3dPackageName: "mars3d",
        mars3dRunPath: "mars3d",//目录名称
        cesiumPackageName: "mars3d-cesium",
        cesiumRunPath: "mars3d-cesium",//目录名称
        useStatic: false, 
      }),
  ]
});

使用CDN或静态资源时

import { defineConfig } from 'vite';
import { mars3dPlugin } from 'vite-plugin-mars3d';

export default defineConfig({
  plugins: [
      mars3dPlugin({
        useExternal: true, //排除了引入包，html中手动静态引入相关资源 
      }),
  ]
});

使用原生cesium时

1. 不要安装mars3d-cesium包，仅安装cesium包，就是不能同时存在2个cesium包 package.json文件示例:

  "dependencies": {
    "cesium": "^1.118.0",
    "mars3d": "^3.7.20",
    "mars3d-space": "^3.7.20",
    "rollup": "^2.79.1",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "vite": "^4.2.0",
    "vite-plugin-mars3d": "^4.1.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "^4.9.3",
    "vue-tsc": "^1.2.0"
  }

1. vite.config中引入时使用配置 mars3dPlugin({ cesiumPackageName: "cesium" })

vite.config.ts文件示例:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { mars3dPlugin } from "vite-plugin-mars3d"; // 引入插件


export default defineConfig({
  plugins: [
    vue(),
    mars3dPlugin({ cesiumPackageName: "cesium" }), // 使用cesium原生包
  ],
});

参考

https://github.com/nshen/vite-plugin-cesium

常见问题

• 如果项目的 package.json 没有 type:"module" ，请使用 "vite-plugin-mars3d":"~3.1.3"
• 如果项目的 package.json 有 type:"module" 直接用最新版本即可。
• 如果无法排除解决问题，也可以在vite.config.ts配置改为静态引入 mars3dPlugin({ useStatic: true })

Mars3D 是什么

Mars3D平台 是火星科技研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于Cesium优化提升与 B/S 架构设计，支持多行业扩展的轻量级高效能 GIS 开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种 GIS 数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。

Mars3D 平台可用于构建无插件、跨操作系统、 跨浏览器的三维 GIS 应用程序。平台使用 WebGL 来进行硬件加速图形化，跨平台、跨浏览器来实现真正的动态大数据三维可视化。通过 Mars3D 产品可快速实现浏览器和移动端上美观、流畅的三维地图呈现与空间分析。

相关网站

• Mars3D 官网：http://mars3d.cn

• Mars3D 开源项目列表：https://github.com/marsgis/mars3d

版权说明

1. Mars3D 平台由火星科技自主研发，拥有所有权利。
2. 任何个人或组织可以在遵守相关要求下可以免费无限制使用。