vite-plugin-mars3d/README.md

Mars3D 在 Vite 平台的插件

<p align="center">
<img src="https://cdn.jsdelivr.net/gh/muyao1987/cdn/mars3d.cn/logo.png" width="300px" />
</p>

<p align="center">基于 Vue3.x + Mars3D 平台的🌎Vite插件</p>

<p align="center">
<a target="_black" href="https://github.com/marsgis/mars3d">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/marsgis/mars3d?style=flat&logo=github">
</a>
<a target="_black" href="https://www.npmjs.com/package/mars3d">
<img alt="Npm downloads" src="https://img.shields.io/npm/dt/mars3d?style=flat&logo=npm">
</a>
<a target="_black" href="https://www.npmjs.com/package/mars3d">
<img alt="Npm version" src="https://img.shields.io/npm/v/mars3d.svg?style=flat&logo=npm&label=version"/>
</a>
</p>


## vite-plugin-mars3d使用说明

### 安装

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

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


### 配置

> vite.config.ts中引入plugin插件

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

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

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

```js
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或静态资源时
```js
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文件示例:
```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"
  }
```

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

vite.config.ts文件示例:
```js
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平台` 是[火星科技](http://marsgis.cn/)研发的一款基于 WebGL 技术实现的三维客户端开发平台，基于[Cesium](https://cesium.com/cesiumjs/)优化提升与 B/S 架构设计，支持多行业扩展的轻量级高效能 GIS 开发平台，能够免安装、无插件地在浏览器中高效运行，并可快速接入与使用多种 GIS 数据和三维模型，呈现三维空间的可视化，完成平台在不同行业的灵活应用。

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

### 相关网站

- Mars3D 官网：[http://mars3d.cn](http://mars3d.cn)

- Mars3D 开源项目列表：[https://github.com/marsgis/mars3d](https://github.com/marsgis/mars3d)

## 版权说明

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