blank-map

本文回答：如何打开一张空白地图（不依赖任何 DWG 源图），适用于纯自绘 / 新建图 / 工具演示。

一、什么叫空白地图

两类：

1. 纯空白：没打开任何后端图，仅用前端坐标范围渲染一张底色纯净的 "画布"，后续添加 Marker / 自绘图形 / vjmapext 实体。
2. 新建图：通过 svc.updateMap({ filedoc: ... }) 上传一份 JSON 图形定义，生成一张临时图。见 backend/upload-create-map。

本文聚焦第 1 种；第 2 种请跳到 backend 主题。

二、纯空白地图完整模板

// 自己定义想要的坐标范围
const mapExtent = vjmap.GeoBounds.fromArray([-1000, -1000, 1000, 1000]); // 范围必须是正方形
const prj = new vjmap.GeoProjection(mapExtent);

// 必须先告诉 Service 当前"map 参数"（因为没打开过图）
const svc = new vjmap.Service(SERVICE_URL, TOKEN);
svc.setCurrentMapParam({
  darkMode: true,
  // d.ts 里 bounds 类型是 GeoBounds；运行时兼容字符串（同 res.bounds 的形态）。
  // TS 工程写 bounds: mapExtent（直接传 GeoBounds 实例）
  bounds: mapExtent.toString()
});

const map = new vjmap.Map({
  container: "map",
  style: svc.rasterBlankStyle(0, 24),                   // 空白栅格样式，0~24 级缩放
  center: prj.toLngLat(mapExtent.center()),
  zoom: 1,
  renderWorldCopies: false
});
map.attach(svc, prj);
await map.onLoad();

// 现在可以自由地画东西
new vjmap.Marker().setLngLat(prj.toLngLat([0, 0])).addTo(map);

三、常用 style 选型

裸样式写法（遵循 vjmap 样式规范）：

style: {
  version: svc.styleVersion(),                          // 必填（整数，vjmap 版本号决定）
  glyphs: svc.glyphsUrl(),                              // 文字字体地址（用 text 图层时需要）
  sources: {},
  layers: [
    // 可自行塞入互联网底图源 + layer，参见 internet-map/ 主题
  ]
}

四、背景色对齐

容器背景色 + 地图背景色 + svc 的 dark/light 模式三者必须一致，否则首屏闪色：

body { background: #022B4F; }
#map { background: #022B4F; }

svc.setCurrentMapParam({ darkMode: true, bounds: ... });

五、后面叠加 CAD 实体

在空白地图上通常会挂 vjmapext：

import { MapCadLayer, LineEnt, CircleEnt, TextEnt } from "vjmapext";
// ... 前面 map 初始化 ...
await map.onLoad();
const cad = new MapCadLayer();
map.addControl(cad);
cad.createUI({ theme: "dark" });

cad.addEntity(Object.assign(new LineEnt([-200, 0], [200, 0]), { color: 0xff4444 }));
cad.addEntity(Object.assign(new CircleEnt([0, 200], 100), { color: 0x00ffff }));

六、常见坑

1. 没调用 svc.setCurrentMapParam 就开空白图 → 某些 API（svc.getConstData 等）会出错。
2. style 为空对象 → 底色会变成引擎默认灰，容器主题色对不上。至少要用 rasterBlankStyle 或裸样式。
3. 没等 onLoad 就画东西 → 偶发 source 未就绪，画出来没反应。