Skip to main content

Basic Examples

Less than 1 minute

Basic Examples

WebCAD basic getting started examples to help you quickly understand the core features of WebCAD.

Online Examples

ExampleDescriptionLink
Initialize EngineMainView initialization and configuration optionsOnline Demo{target="_blank"}
Wait for LoadingonLoad async await exampleOnline Demo{target="_blank"}
Viewer ModeDisplay drawing area only, hide menu toolbar command lineOnline Demo{target="_blank"}
Viewer Remote DrawingOpen backend drawing in read-only modeOnline Demo{target="_blank"}
Map Overlay ModeOverlay WebCAD onto vjmap mapOnline Demo{target="_blank"}

Core Concepts

Initialize Engine

The entry point of WebCAD is the MainView class, which requires a service URL and access token:

const { MainView, initCadContainer } = vjcad;

const cadView = new MainView({
    appname: "唯杰CAD",
    version: "v1.0.0",
    serviceUrl: env.serviceUrl,
    accessToken: env.accessToken,
    sidebarStyle: "none",
});

initCadContainer("map", cadView);
await cadView.onLoad();

Viewer Mode

If you only need to view drawings without editing capabilities, you can use Viewer mode:

const cadView = new MainView({
    // ... other options
    viewerMode: true,
});