瓦片打开模式
大约 7 分钟
瓦片打开模式
瓦片打开模式适用于打开大型图纸（如城市规划图、大型建筑图等），通过类似 GIS 的瓦片地图技术实现流畅的浏览和编辑体验。
适用场景
- 超大图纸：图纸坐标范围很大，实体数量众多
- 快速预览：需要快速浏览图纸整体，无需立即编辑所有内容
- 局部编辑：只需编辑图纸的某个区域或某些图层
核心概念
瓦片模式特点
- 不加载完整数据到前端
- 使用 WMS 瓦片图层渲染
- 按需加载编辑区域数据
- 支持超大型图纸（数GB）
- 初始为只读模式
启用编辑的方式
TILEEDITAREA: 选择矩形区域编辑TILEEDITLAYER: 选择图层编辑
瓦片地图原理
瓦片打开方式将 CAD 图纸在服务端预渲染为多级分辨率的图片瓦片（类似在线地图），客户端只需加载当前视口内的瓦片即可快速显示。
缩放级别示意图：
Level 0 (概览) Level 1 Level 2 (详细)
┌─────────┐ ┌────┬────┐ ┌──┬──┬──┬──┐
│ │ │ │ │ │ │ │ │ │
│ 全图 │ → ├────┼────┤ → ├──┼──┼──┼──┤
│ │ │ │ │ │ │ │ │ │
└─────────┘ └────┴────┘ └──┴──┴──┴──┘
每个瓦片 256×256 像素，缩放级别越高，瓦片越多，细节越清晰瓦片打开图纸
API 方式
import { MainView, initCadContainer, Engine, DrawingManagerService, GeoBounds, Point2D } from 'vjcad';
// 初始化视图
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();
// 创建图纸管理服务
const drawingManager = new DrawingManagerService();
const service = drawingManager.getService();
const mapid = 'your-map-id';
const version = 'v1';
// 1. 获取图纸元数据
const metadata = await service.metadata(mapid, version);
const bounds = GeoBounds.fromString(metadata.bounds);
// 2. 创建空白文档
Engine.view.newDocument();
Engine.currentDoc.name = `${mapid}_${version}_tile`;
// 3. 配置并启用 WMS 瓦片图层
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. 设置视口
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. 设置为只读并保存来源信息
Engine.currentDoc.isReadOnly = true;
Engine.currentDoc.serverSource = {
type: 'imports',
mapid: mapid,
version: version,
branchName: 'main',
lastPatchId: 'base'
};
console.log('瓦片模式已启用，使用 TILEEDITAREA 选择编辑区域');命令方式
// 执行 OPENFROMSERVER 命令
// 在图纸浏览器中选择图纸，点击「瓦片打开」按钮
await Engine.editor.executerWithOp('OPENFROMSERVER');瓦片配置参数
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mapid | string | - | 地图ID |
version | string | - | 地图版本 |
layers | string | - | 要显示的图层 |
tileSize | number | 256 | 瓦片尺寸（像素） |
maxZoom | number | 20 | 最大缩放级别 |
minZoom | number | 0 | 最小缩放级别 |
transparent | boolean | true | 是否透明背景 |
preloadBuffer | number | 1 | 预加载边界瓦片数 |
maxConcurrent | number | 6 | 最大并发请求数 |
cacheSize | number | 200 | 瓦片缓存大小 |
区域编辑
在瓦片模式下，使用 TILEEDITAREA 命令选择矩形区域进行编辑。
区域编辑特点
- 支持多次选择不同区域（累积模式）
- 与编辑图层是「或」的关系
- 实体和块定义自动合并去重
- 保存时只保存编辑区域的变更
API 方式
import { TileEditAreaCommand, DrawingManagerService } from 'vjcad';
// 假设已经以瓦片方式打开图纸
const drawingManager = new DrawingManagerService();
// 定义编辑区域（取图纸中心区域作为示例）
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
};
// 加载编辑区域
const loadResult = await TileEditAreaCommand.loadEditArea(
editArea,
Engine.currentDoc.serverSource,
Engine.pcanvas,
Engine.currentDoc,
drawingManager
);
if (loadResult.success) {
Engine.currentDoc.isReadOnly = false;
console.log(`加载完成: ${loadResult.loadedCount} 个可编辑实体`);
}批量加载多个编辑区域
import { TileEditAreaCommand } from 'vjcad';
// 定义多个编辑区域
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(`共加载 ${result.totalLoadedCount} 个实体`);
console.log(`编辑区域数: ${result.areasCount}`);
}命令方式
// 执行区域编辑命令
// 1. 指定编辑区域的第一个角点
// 2. 指定编辑区域的对角点
// 3. 系统加载区域内的实体数据
// 4. 添加遮盖层覆盖瓦片内容
// 5. 区域内实体变为可编辑
await Engine.editor.executerWithOp('TILEEDITAREA');图层编辑
在瓦片模式下，使用 TILEEDITLAYER 命令选择图层进行编辑。
与区域编辑的区别
| 特性 | 区域编辑 | 图层编辑 |
|---|---|---|
| 加载范围 | 指定矩形区域内的实体 | 指定图层的所有实体 |
| 遮盖层 | 有（覆盖编辑区域瓦片） | 无（图层范围不固定） |
| 关系 | 两者是「或」的关系，可以同时使用 |
图层编辑特点
- 支持多选图层
- 图层范围不固定，不添加遮盖层
- 实体和块定义自动合并去重
API 方式
import { TileEditLayerCommand, DrawingManagerService } from 'vjcad';
// 假设已经以瓦片方式打开图纸
const drawingManager = new DrawingManagerService();
const serverSource = Engine.currentDoc.serverSource;
// 1. 获取图层列表（返回 ILayerInfo[] 对象数组）
const layerInfos = await TileEditLayerCommand.getLayerListFromService(
serverSource.mapid,
serverSource.version
);
const layerNames = layerInfos.map(l => l.name);
console.log(`可用图层: ${layerNames.join(', ')}`);
// 2. 加载指定图层
const selectedLayers = ['0', '标注层'];
const loadResult = await TileEditLayerCommand.loadEditLayers(
selectedLayers,
serverSource,
Engine.pcanvas,
Engine.currentDoc,
drawingManager
);
if (loadResult.success) {
Engine.currentDoc.isReadOnly = false;
console.log(`加载完成: ${loadResult.layersCount} 个图层，共 ${loadResult.totalLoadedCount} 个实体`);
}命令方式
// 执行图层编辑命令
// 1. 在对话框中选择要编辑的图层
// 2. 点击确定
// 3. 系统加载选中图层的所有实体
// 4. 图层内实体变为可编辑
await Engine.editor.executerWithOp('TILEEDITLAYER');透明度设置
瓦片图层透明度
使用 TILEALPHA 命令设置 WMS 瓦片图层的透明度。
// 透明度范围：0（完全透明）- 1（完全不透明）
// 获取当前透明度
const currentAlpha = Engine.pcanvas.getWmsTileAlpha();
console.log(`当前透明度: ${Math.round(currentAlpha * 100)}%`);
// 设置透明度为 50%
Engine.pcanvas.setWmsTileAlpha(0.5);
Engine.pcanvas.redraw();
// 或通过命令设置
await Engine.editor.executerWithOp('TILEALPHA');使用场景：
- 对比编辑区域与底图的差异
- 降低底图干扰，专注编辑区域
- 检查编辑内容与原图的对齐
遮盖层透明度
使用 TILEMASKALPHA 命令设置编辑区域遮盖层的透明度。
什么是遮盖层？
- 使用
TILEEDITAREA选择编辑区域后 - 系统会在该区域添加背景色遮盖层
- 遮盖层覆盖底图瓦片，显示可编辑实体
// 透明度范围：0（完全透明，可见底图）- 1（完全不透明，只见实体）
// 获取当前遮盖层透明度
const currentAlpha = Engine.pcanvas.getReadOnlyAlpha();
console.log(`当前遮盖层透明度: ${Math.round(currentAlpha * 100)}%`);
// 设置遮盖层透明度为 30%（可以看到底图）
Engine.pcanvas.setReadOnlyAlpha(0.3);
Engine.pcanvas.redraw();
// 或通过命令设置
await Engine.editor.executerWithOp('TILEMASKALPHA');使用场景：
- 检查编辑区域边界对齐
- 对比编辑前后的变化
- 辅助定位和参照
保存与恢复
瓦片模式下的编辑结果会保存编辑区域和编辑图层信息：
// 保存时会自动包含编辑区域和编辑图层信息
const saveResult = await drawingManager.saveDrawing({
type: 'imports',
mapid: mapid,
version: version,
branchName: 'main',
originalJson: originalJson,
currentJson: currentJson,
parentId: 'base',
editAreas: serverSource.editAreas, // 编辑区域列表
editLayers: serverSource.editLayers, // 编辑图层列表
tileAlpha: Engine.pcanvas.getWmsTileAlpha() // 瓦片透明度
});重新打开保存的图纸时，会自动恢复编辑区域和编辑图层。
相关命令
| 命令 | 说明 |
|---|---|
TILEEDITAREA | 选择矩形区域进行编辑 |
TILEEDITLAYER | 选择图层进行编辑 |
TILEALPHA | 设置瓦片透明度 |
TILEMASKALPHA | 设置遮盖层透明度 |
最佳实践
1. 选择合适的编辑方式
- 区域编辑：适合编辑特定位置的内容，如修改某栋建筑
- 图层编辑：适合编辑特定类型的内容，如修改所有标注
2. 控制编辑范围
- 尽量选择较小的编辑区域，减少数据加载量
- 优先使用图层编辑而非区域编辑，如果要修改的内容集中在某些图层
3. 性能优化
// 调整瓦片缓存大小（适用于低内存设备）
Engine.pcanvas.updateWmsTileConfig({
cacheSize: 100 // 减少缓存大小
});
// 调整并发请求数（适用于带宽受限环境）
Engine.pcanvas.updateWmsTileConfig({
maxConcurrent: 3 // 减少并发数
});4. 处理大坐标图纸
瓦片模式特别适合大坐标图纸（如城市规划图，坐标可能达到数百万），因为：
- 瓦片坐标支持负数索引，以 (0,0) 为中心
- 缩放级别会自动调整以适应视图范围
- 不需要一次性加载所有实体数据