唯杰地图 logo唯杰地图
VJMAP
EN

mainview-init

vjcad/references/setup/mainview-init.md 3.9 KB94 行
原文

本文回答：vjcad 的入口是 new MainView({...}) → initCadContainer(elementId, cadView) → await cadView.onLoad()，MainView 接受 appname / version / wasmServiceUrl / serviceUrl / accessToken / accessKey / sidebarStyle / pluginMarketUrl / fonts / locale / viewMode / showUcsIcon / showAxis 等配置项。

一、最小初始化（npm + TS）

import { MainView, initCadContainer } from 'vjcad';

const cadView = new MainView({
  appname: '我的CAD应用',
  version: 'v1.0.0'
});

initCadContainer('cad-app', cadView);
await cadView.onLoad();

MCP 参考：vjcad/doc/guide/quick-start.md、vjcad/example/basic/01init.js。

二、MainViewConfig 字段

构造参数类型为 MainViewConfig（types.d.ts 导出），官方 guide 中或称 MainViewOptions。

字段 类型 说明
appname string 应用名称，显示在标题栏
version string 应用版本号
wasmServiceUrl string WASM 服务地址，用于加载 WebAssembly 模块
serviceUrl string 后端服务地址（文件操作等 API）
accessToken string 访问令牌，身份验证
accessKey string 访问密钥，加密图纸
pluginMarketUrl string 插件市场配置文件地址。留空/不传时自动使用 <服务根>/_webcad/plugins/plugins.json（无 serviceUrl 时 ./plugins/plugins.json），启动时总会请求它并加载其中 autoLoad 插件；空串无法关闭
sidebarStyle 'both' | 'left' | 'right' | 'none' 侧边栏样式，默认 'right'
locale 'zh-CN' | 'en-US' 界面语言；不传则按优先级自动检测
fonts FontConfig[] 字体配置列表，见 fonts
viewMode 'viewer'（按示例） 只读查看模式开关，见 viewer-mode
showUcsIcon boolean（按示例） 是否显示左下角坐标轴
showAxis boolean（按示例） 是否显示图中坐标轴

FontConfig：

interface FontConfig {
  path: string;             // 字体文件路径
  name?: string;            // 字体名称（与自动创建的 TextStyle 同名）
  kind?: 'woff' | 'ttf' | 'otf' | 'shx';  // 字体类型
}

MCP 参考：vjcad/doc/guide/quick-start.md。

三、Playground 完整配置（CDN 全局）

const { MainView, initCadContainer, message } = vjcad;

const cadView = new MainView({
  appname: '唯杰CAD',
  version: 'v1.0.0',
  serviceUrl: env.serviceUrl,
  accessToken: env.accessToken,
  accessKey: '',
  sidebarStyle: 'right',
  pluginMarketUrl: '',   // 空串 = 使用默认市场地址（见上表）
  fonts: []              // 空数组 = 不加载任何字体；不传 fonts 才默认加载 simkai.woff + _default.shx
});

initCadContainer('map', cadView);
await cadView.onLoad();
message.info('WebCAD 引擎初始化完成');

MCP 参考：vjcad/example/basic/01init.js。

四、initCadContainer 签名

initCadContainer(container: string | HTMLElement, cadViewElement?: HTMLElement): HTMLElement
  • container：容器 DOM 的 id 或元素本身。
  • cadViewElement：new MainView({...}) 创建的实例（MainView 继承 LitElement，本身即 HTMLElement）。
  • 调用前必须保证容器存在且有非零宽高，否则首屏会黑屏（与初始化无关）。

反例

  • 在 await cadView.onLoad() 之前就调 Engine.addEntities(...) 或 Engine.eventManager.on(...)：此时 Engine 尚未就绪。
  • 配置 viewerMode: true：示例里实际配置项是 viewMode: "viewer"（注意拼写）。
  • 把 new vjmap.Service() / new vjmap.Map() 也写进来：vjcad 不需要这些，初始化只走 MainView + initCadContainer。

参考（官方文档 MCP）

  • 文档：vjcad/doc/guide/quick-start.md
  • 示例：vjcad/example/basic/01init.js、vjcad/example/basic/02onload.js