Tile Open Mode

About 5 min

Tile Open Mode

Tile open mode is suitable for opening large drawings (such as urban planning maps, large architectural drawings, etc.), providing smooth browsing and editing experience through GIS-like tile map technology.

Applicable Scenarios

Very Large Drawings: Drawings with large coordinate ranges and numerous entities
Quick Preview: Need to quickly browse the overall drawing without immediately editing all content
Partial Editing: Only need to edit a specific area or certain layers of the drawing

Core Concepts

Tile Mode Features

Does not load complete data to the frontend
Uses WMS tile layer for rendering
Loads edit area data on demand
Supports very large drawings (several GB)
Initially read-only mode

Ways to Enable Editing

TILEEDITAREA: Select rectangular area for editing
TILEEDITLAYER: Select layer for editing

Tile Map Principle

The tile open method pre-renders the CAD drawing on the server into multi-resolution image tiles (similar to online maps). The client only needs to load tiles within the current viewport for fast display.

Zoom Level Diagram:

Level 0 (overview)   Level 1          Level 2 (detailed)
┌─────────┐      ┌────┬────┐      ┌──┬──┬──┬──┐
│         │      │    │    │      │  │  │  │  │
│  full   │  →   ├────┼────┤  →   ├──┼──┼──┼──┤
│         │      │    │    │      │  │  │  │  │
└─────────┘      └────┴────┘      └──┴──┴──┴──┘

Each tile 256×256 pixels, higher zoom levels have more tiles and clearer details

Opening Tile Drawings

API Method

import { MainView, initCadContainer, Engine, DrawingManagerService, GeoBounds, Point2D } from 'vjcad';

// Initialize view
const cadView = new MainView({
    appname: "唯杰CAD",
    version: "v1.0.0",
    serviceUrl: 'https://your-service-url',
    accessToken: 'your-access-token',
    sidebarStyle: "none",
});

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

// Create drawing manager service
const drawingManager = new DrawingManagerService();
const service = drawingManager.getService();

const mapid = 'your-map-id';
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 and enable WMS 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,
    maxConcurrent: 6,
    cacheSize: 200
};

pcanvas.enableWmsTileLayer(service, tileConfig);

// 4. 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);

// 5. Set to read-only and save source info
Engine.currentDoc.isReadOnly = true;
Engine.currentDoc.serverSource = {
    type: 'imports',
    mapid: mapid,
    version: version,
    branchName: 'main',
    lastPatchId: 'base'
};

console.log('Tile mode enabled, use TILEEDITAREA to select edit area');

Command Method

// Execute OPENFROMSERVER command
// Select drawing in drawing browser, click "Tile Open" button
await Engine.editor.executerWithOp('OPENFROMSERVER');

Tile Configuration Parameters

Parameter	Type	Default	Description
`mapid`	string	-	Map ID
`version`	string	-	Map version
`layers`	string	-	Layers to display
`tileSize`	number	256	Tile size (pixels)
`maxZoom`	number	20	Maximum zoom level
`minZoom`	number	0	Minimum zoom level
`transparent`	boolean	true	Transparent background
`preloadBuffer`	number	1	Preload buffer tile count
`maxConcurrent`	number	6	Maximum concurrent requests
`cacheSize`	number	200	Tile cache size

Area Editing

In tile mode, use the TILEEDITAREA command to select a rectangular area for editing.

Area Editing Features

Supports selecting different areas multiple times (cumulative mode)
"Or" relationship with edit layers
Entities and block definitions are automatically merged and deduplicated
Only saves changes in edit areas when saving

API Method

import { TileEditAreaCommand, DrawingManagerService } from 'vjcad';

// Assume drawing is already opened in tile mode

const drawingManager = new DrawingManagerService();

// Define edit area (use drawing center as example)
const bounds = Engine.currentDoc.currentSpace.initBounds;
const centerX = (bounds[0] + bounds[2]) / 2;
const centerY = (bounds[1] + bounds[3]) / 2;
const width = bounds[2] - bounds[0];
const height = bounds[3] - bounds[1];

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

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

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

Batch Load Multiple Edit Areas

import { TileEditAreaCommand } from 'vjcad';

// Define multiple edit areas
const editAreas = [
    { minX: 0, minY: 0, maxX: 1000, maxY: 1000 },
    { minX: 2000, minY: 2000, maxX: 3000, maxY: 3000 }
];

const result = await TileEditAreaCommand.loadEditAreas(
    editAreas,
    serverSource,
    Engine.pcanvas,
    currentDoc,
    drawingManager
);

if (result.success) {
    console.log(`Total loaded: ${result.totalLoadedCount} entities`);
    console.log(`Edit areas: ${result.areasCount}`);
}

Command Method

// Execute area edit command
// 1. Specify first corner of edit area
// 2. Specify diagonal corner of edit area
// 3. System loads entity data within the area
// 4. Add mask layer to cover tile content
// 5. Entities in area become editable
await Engine.editor.executerWithOp('TILEEDITAREA');

Layer Editing

In tile mode, use the TILEEDITLAYER command to select layers for editing.

Differences from Area Editing

Feature	Area Editing	Layer Editing
Load Scope	Entities within specified rectangular area	All entities of specified layer(s)
Mask Layer	Yes (covers edit area tiles)	No (layer scope not fixed)
Relationship	Both are "or" relationship, can be used together

Layer Editing Features

Supports multi-select layers
Layer scope not fixed, no mask layer added
Entities and block definitions automatically merged and deduplicated

API Method

import { TileEditLayerCommand, DrawingManagerService } from 'vjcad';

// Assume drawing is already opened in tile mode

const drawingManager = new DrawingManagerService();
const serverSource = Engine.currentDoc.serverSource;

// 1. Get layer list (returns ILayerInfo[] array)
const layerInfos = await TileEditLayerCommand.getLayerListFromService(
    serverSource.mapid, 
    serverSource.version
);
const layerNames = layerInfos.map(l => l.name);
console.log(`Available layers: ${layerNames.join(', ')}`);

// 2. Load specified layers
const selectedLayers = ['0', 'Annotation'];

const loadResult = await TileEditLayerCommand.loadEditLayers(
    selectedLayers,
    serverSource,
    Engine.pcanvas,
    Engine.currentDoc,
    drawingManager
);

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

Command Method

// Execute layer edit command
// 1. Select layers to edit in dialog
// 2. Click OK
// 3. System loads all entities of selected layers
// 4. Entities in layers become editable
await Engine.editor.executerWithOp('TILEEDITLAYER');

Transparency Settings

Tile Layer Transparency

Use the TILEALPHA command to set WMS tile layer transparency.

// Transparency range: 0 (fully transparent) - 1 (fully opaque)

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

// Set transparency to 50%
Engine.pcanvas.setWmsTileAlpha(0.5);
Engine.pcanvas.redraw();

// Or set via command
await Engine.editor.executerWithOp('TILEALPHA');

Use Cases:

Compare differences between edit area and base map
Reduce base map interference, focus on edit area
Check alignment of edit content with original

Mask Layer Transparency

Use the TILEMASKALPHA command to set edit area mask layer transparency.

What is the mask layer?

After using TILEEDITAREA to select an edit area
The system adds a background color mask layer in that area
The mask layer covers base map tiles and displays editable entities

// Transparency range: 0 (fully transparent, base map visible) - 1 (fully opaque, entities only)

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

// Set mask layer transparency to 30% (base map visible)
Engine.pcanvas.setReadOnlyAlpha(0.3);
Engine.pcanvas.redraw();

// Or set via command
await Engine.editor.executerWithOp('TILEMASKALPHA');

Use Cases:

Check edit area boundary alignment
Compare before and after changes
Assist positioning and reference

Save and Restore

Edit results in tile mode save edit area and edit layer information:

// Save automatically includes edit area and edit layer info
const saveResult = await drawingManager.saveDrawing({
    type: 'imports',
    mapid: mapid,
    version: version,
    branchName: 'main',
    originalJson: originalJson,
    currentJson: currentJson,
    parentId: 'base',
    editAreas: serverSource.editAreas,   // Edit area list
    editLayers: serverSource.editLayers, // Edit layer list
    tileAlpha: Engine.pcanvas.getWmsTileAlpha()  // Tile transparency
});

When reopening a saved drawing, edit areas and edit layers are automatically restored.

Command	Description
`TILEEDITAREA`	Select rectangular area for editing
`TILEEDITLAYER`	Select layer for editing
`TILEALPHA`	Set tile transparency
`TILEMASKALPHA`	Set mask layer transparency

Best Practices

1. Choose the Right Editing Method

Area Editing: Suitable for editing content at specific locations, e.g., modifying a building
Layer Editing: Suitable for editing specific types of content, e.g., modifying all annotations

2. Control Edit Scope

Prefer smaller edit areas to reduce data load
Prefer layer editing over area editing when modifications are concentrated in certain layers

3. Performance Optimization

// Adjust tile cache size (for low-memory devices)
Engine.pcanvas.updateWmsTileConfig({
    cacheSize: 100  // Reduce cache size
});

// Adjust concurrent requests (for bandwidth-limited environments)
Engine.pcanvas.updateWmsTileConfig({
    maxConcurrent: 3  // Reduce concurrency
});

4. Handling Large-Coordinate Drawings

Tile mode is especially suitable for large-coordinate drawings (e.g., urban planning maps with coordinates in the millions) because:

Tile coordinates support negative indices, centered at (0,0)
Zoom levels automatically adjust to fit view range
No need to load all entity data at once

Next Steps

Version Control - Learn about version management and branch operations
Command System - Learn how to create custom commands
Entity System - Learn detailed entity usage