open-index/open-npm huggingface dataset:
npm package: @marsgis/editor
Description: Mars3D平台功能示例通用示例容器
Author: 火星吴彦祖
Latest version: 1.4.2

# marsgis editor

## 介绍

marsgis-editor 是 [margis](http://marsgis.cn/) 平台的，示例运行容器，内置了 [mars3d](http://mars3d.cn)、[mars2d](http://mars2d.cn) 的运行环境，可以在各种技术栈中使用，如 vue react angular 等。或者也可以选择直接通过 script 标签加载的方式。

## 安装

```
npm install @marsgis/editor --save
```

## vite 中使用

1. 配置 `vite-plugin-monaco-editor`

```
npm install vite-plugin-monaco-editor -save-dev
```

```js
import monacoEditorPlugin from "vite-plugin-monaco-editor"

// 在pligins数组中加入以下配置
plugins: [monacoEditorPlugin()]
```

2. 引入 npm 包

```js
import MarsgisEditor from "@marsgis/editor"
import "@marsgis/editor/dist/style.css"
```

3. 初始化容器，并传入配置

```js
const marsEditor = new MarsgisEditor({})
```

支持的配置如下

```ts
interface Config {
  configFetchType?: "online" | "local" // 是否始终加载在线的配置文件
  baseUrl?: string // 基础请求路径
  code?: string // 是否默认打开编辑器
  fullScreen?: string // 是否全屏
  packageName?: string // 运行基础库包名
  homepage?: string // 首页地址，用于快捷跳转
  configLibs?: any // lib公共依赖配置
  libPublicPath?: string // libs资源的公共路径，可用于配置cdn地址
  thumbnailPublicPath?: string // 缩略图的公共路径
  configSourceUrl?: string // 配置文件地址
  alwaysUseOrigin?: boolean // true 始终使用 src 的方式加载map.js
  resourcePublicPath?: string //
  expandBtnText?: string // 展开按钮文字
  collapseBtnText?: string // 收起按钮文字
  links?: {
    title: string
    url: string
    icon: string
    description: string
  }[] // 快捷跳转链接数组
  UIFile?: string | ((main: string) => string) // UI面板代码的url
  UIFileLanguage?: "html" | "javascript" | "typescript" // UI面板的代码语言
  fetchUICode?: (main: string) => string | Promise<string> // 返回UI面板代码，配置此项后 UIfile配置不再生效
}
```

4. 初始化完成之后就可以加载容器了,完整代码如下

```js
import MarsgisEditor from "@marsgis/editor"
import { configLibs } from "./includeLibs"

const marsEditor = new MarsgisEditor({
  configLibs,
  resourcePublicPath: "src/example",
  thumbnailPublicPath: "/config/",
  libPublicPath: "/lib/"
})

const componentId = "map/test"

let inited = false

marsEditor.on("loaded", () => {
  if (inited) {
    destoryUI()
  }
  initUI()
  inited = true
})

function initUI() {
  document.getElementById("mars-main-view").innerHTML = `<div class="test-pannel"></div>`
}
function destoryUI() {
  document.getElementById("mars-main-view").innerHTML = ""
}

marsEditor.render("app", componentId)
```

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