Tile Mode

About 3 min

Tile Mode

Guide to opening and editing large drawings in tile mode.

Concepts

Tile Mode vs Vector Mode

Feature	Vector Mode	Tile Mode
Data loading	Fully loaded on the frontend	Visible area loaded on demand
Applicable scenario	Small and medium drawings (<50MB)	Large drawings (multiple GB)
Initial state	Editable directly	Read-only; must choose an edit area
Rendering mode	Real-time vector rendering	WMS tile layer
Memory usage	Depends on drawing size	Fixed and low

Edit Modes

Mode	Command	Description
Area edit	`TILEEDITAREA`	Select entities inside a rectangular area
Layer edit	`TILEEDITLAYER`	Select all entities on specified layers

The two modes are an "OR" relationship and can be used together.

Open Drawing in Tile Mode

Command Mode

// Open drawing browser and choose "Open in Tile Mode"
await Engine.editor.executerWithOp('OPENFROMSERVER');

API Mode

const { 
    DrawingManagerService, Engine, 
    GeoBounds, Point2D 
} = vjcad;

const drawingManager = new DrawingManagerService();
const service = drawingManager.getService();

const mapid = 'drawing-123';
const version = 'v1';

// 1. Get drawing metadata
const metadata = await service.metadata(mapid, version);
const bounds = GeoBounds.fromString(metadata.bounds);

// 2. Create blank document
Engine.view.newDocument();
Engine.currentDoc.name = `${mapid}_${version}_tile`;

// 3. Configure tile layer
const pcanvas = Engine.pcanvas;
const tileConfig = {
    mapid: mapid,
    version: version,
    layers: metadata.styles?.[0]?.layername,
    tileSize: 256,
    maxZoom: 20,
    minZoom: 0,
    transparent: true,
    preloadBuffer: 1,     // Preload buffer
    maxConcurrent: 6,     // Maximum concurrent requests
    cacheSize: 200        // Cache size
};

// 4. Enable WMS tile layer
pcanvas.enableWmsTileLayer(service, tileConfig);

// 5. Set viewport
const centerX = (bounds.min.x + bounds.max.x) / 2;
const centerY = (bounds.min.y + bounds.max.y) / 2;
const width = bounds.max.x - bounds.min.x;
const height = bounds.max.y - bounds.min.y;

const zoom = Math.min(
    pcanvas.div.clientWidth / width,
    pcanvas.div.clientHeight / height
) * 0.9;

Engine.currentSpace.setZoom(zoom);
Engine.currentSpace.lookPt = new Point2D(centerX * zoom, centerY * zoom);
pcanvas.setCenter(new Point2D(centerX, centerY), true);

// 6. Set read-only
Engine.currentDoc.isReadOnly = true;

// 7. Save source info
Engine.currentDoc.serverSource = {
    type: 'imports',
    mapid: mapid,
    version: version,
    branchName: 'main',
    lastPatchId: 'base'
};

Area Editing

Select entities within a rectangular area for editing.

Command Mode

// Run in tile mode
await Engine.editor.executerWithOp('TILEEDITAREA');
// Operation: specify first corner → specify diagonal corner → load area data

API Mode

const { TileEditAreaCommand, DrawingManagerService, Engine } = vjcad;

const drawingManager = new DrawingManagerService();
const pcanvas = Engine.pcanvas;

// Define edit area
const editArea = {
    minX: 1000,
    minY: 1000,
    maxX: 2000,
    maxY: 2000
};

// Load edit area
const loadResult = await TileEditAreaCommand.loadEditArea(
    editArea,
    Engine.currentDoc.serverSource,
    pcanvas,
    Engine.currentDoc,
    drawingManager
);

if (loadResult.success) {
    Engine.currentDoc.isReadOnly = false;
    console.log(`Load completed: ${loadResult.loadedCount} editable entities`);
}

Area Editing Features

Supports selecting different areas multiple times (accumulation mode)
Adds a mask layer to cover tile content
Automatically merges and deduplicates entities and block definitions
Only saves changes inside editable areas

Layer Editing

Select all entities on specified layers for editing.

Command Mode

// Run in tile mode
await Engine.editor.executerWithOp('TILEEDITLAYER');
// Operation: select layers in the dialog → load layer data

API Mode

const { TileEditLayerCommand, DrawingManagerService, Engine } = vjcad;

const drawingManager = new DrawingManagerService();
const pcanvas = Engine.pcanvas;

const mapid = Engine.currentDoc.serverSource.mapid;
const version = Engine.currentDoc.serverSource.version;

// 1. Get layer list
const layerInfos = await TileEditLayerCommand.getLayerListFromService(mapid, version);
const layerNames = layerInfos.map(l => l.name);
console.log('Available layers:', layerNames);

// 2. Select layers to edit
const selectedLayers = ['0', 'AnnotationLayer'];

// 3. Load editable layers
const loadResult = await TileEditLayerCommand.loadEditLayers(
    selectedLayers,
    Engine.currentDoc.serverSource,
    pcanvas,
    Engine.currentDoc,
    drawingManager
);

if (loadResult.success) {
    Engine.currentDoc.isReadOnly = false;
    console.log(`Load completed: ${loadResult.layersCount} layers, ${loadResult.totalLoadedCount} entities in total`);
}

Layer Editing Features

Supports multi-select layers
Layer scope is not fixed and does not add a mask layer
Automatically merges and deduplicates entities and block definitions

Transparency Settings

Tile Layer Transparency

// Command mode
await Engine.editor.executerWithOp('TILEALPHA');

// API mode
const pcanvas = Engine.pcanvas;

// Get current transparency
const currentAlpha = pcanvas.getWmsTileAlpha();
console.log(`Current transparency: ${Math.round(currentAlpha * 100)}%`);

// Set transparency (0-1)
pcanvas.setWmsTileAlpha(0.5);  // 50%
pcanvas.redraw();

Value	Effect
0	Fully transparent
0.5	Semi-transparent
1	Fully opaque (default)

Mask Layer Transparency

// Command mode
await Engine.editor.executerWithOp('TILEMASKALPHA');

// API mode
const pcanvas = Engine.pcanvas;

// Set mask layer transparency
pcanvas.setTileMaskAlpha(0.8);
pcanvas.redraw();

Usage scenarios:

Compare differences between the editable area and the base map
Reduce base map interference and focus on the editable area
Check the alignment between edited content and the original drawing

Command	Description
`OPENFROMSERVER`	Open drawing (tile mode optional)
`TILEEDITAREA`	Select rectangular area for editing
`TILEEDITLAYER`	Select layers for editing
`TILEALPHA`	Set tile layer transparency
`TILEMASKALPHA`	Set mask layer transparency
`SAVESERVER`	Save (only saves changes in editable areas)

Tile Configuration Parameters

Parameter	Description	Default
`mapid`	Drawing ID	-
`version`	Version number	-
`layers`	Layer names	All layers
`tileSize`	Tile size (pixels)	256
`maxZoom`	Maximum zoom level	20
`minZoom`	Minimum zoom level	0
`transparent`	Whether transparent	true
`preloadBuffer`	Preload buffer	1
`maxConcurrent`	Maximum concurrent requests	6
`cacheSize`	Cache size	200

Complete Example

const { 
    MainView, initCadContainer, Engine,
    DrawingManagerService, TileEditAreaCommand, TileEditLayerCommand,
    GeoBounds, Point2D, LineEnt, message
} = vjcad;

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

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

const drawingManager = new DrawingManagerService();
const service = drawingManager.getService();

const mapid = 'large-drawing';
const version = 'v1';

// === 1. Open drawing in tile mode ===
const metadata = await service.metadata(mapid, version);
const bounds = GeoBounds.fromString(metadata.bounds);

Engine.view.newDocument();
Engine.currentDoc.name = `${mapid}_tile`;

const pcanvas = Engine.pcanvas;
pcanvas.enableWmsTileLayer(service, {
    mapid, version,
    tileSize: 256,
    transparent: true
});

const centerX = (bounds.min.x + bounds.max.x) / 2;
const centerY = (bounds.min.y + bounds.max.y) / 2;
pcanvas.setCenter(new Point2D(centerX, centerY), true);

Engine.currentDoc.isReadOnly = true;
Engine.currentDoc.serverSource = {
    type: 'imports', mapid, version,
    branchName: 'main', lastPatchId: 'base'
};

message.info('Tile mode enabled');

// === 2. Load edit area ===
const width = bounds.max.x - bounds.min.x;
const height = bounds.max.y - bounds.min.y;

const editArea = {
    minX: centerX - width * 0.1,
    minY: centerY - height * 0.1,
    maxX: centerX + width * 0.1,
    maxY: centerY + height * 0.1
};

const loadResult = await TileEditAreaCommand.loadEditArea(
    editArea,
    Engine.currentDoc.serverSource,
    pcanvas,
    Engine.currentDoc,
    drawingManager
);

if (loadResult.success) {
    Engine.currentDoc.isReadOnly = false;
    message.info(`Loaded ${loadResult.loadedCount} entities`);
}

// === 3. Edit drawing ===
const line = new LineEnt([centerX - 50, centerY], [centerX + 50, centerY]);
line.setDefaults();
line.color = 1;
Engine.addEntities(line);

// === 4. Set transparency for comparison ===
pcanvas.setWmsTileAlpha(0.5);
pcanvas.redraw();

// === 5. Save (only editable-area changes are saved) ===
// await Engine.editor.executerWithOp('SAVESERVER');