marsgis-editor

marsgis editor

介绍

marsgis-editor 是 margis 平台的，示例运行容器，内置了 mars3d mars2d 的运行环境，可以在各种技术栈中使用，如 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)