@marsgis/editor
TypeScript icon, indicating that this package has built-in type declarations

1.1.5 • Public • Published

marsgis editor

介绍

marsgis-editor 是 margis 平台的,示例运行容器,内置了 mars3dmars2d 的运行环境,可以在各种技术栈中使用,如 vue react angular 等。或者也可以选择直接通过 script 标签加载的方式。

安装

npm install @marsgis/editor --save

vite 中使用

  1. 配置 vite-plugin-monaco-editor
npm install vite-plugin-monaco-editor -save-dev
import monacoEditorPlugin from "vite-plugin-monaco-editor"

// 在pligins数组中加入以下配置
plugins: [monacoEditorPlugin()]
  1. 引入 npm 包
import MarsgisEditor from "@marsgis/editor"
import "@marsgis/editor/dist/style.css"
  1. 初始化容器,并传入配置
const marsEditor = new MarsgisEditor({})

支持的配置如下

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配置不再生效
}
  1. 初始化完成之后就可以加载容器了,完整代码如下
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. 该插件由火星科技自主研发,拥有所有权利。
  2. 任何个人或组织可以在遵守相关要求下可以免费无限制使用。

Install

npm i @marsgis/editor

DownloadsWeekly Downloads

75

Version

1.1.5

License

Apache-2.0

Unpacked Size

162 kB

Total Files

16

Last publish

Collaborators

  • junjie-mars
  • muyao1987