> **本文回答**：如何打开一张空白地图（不依赖任何 DWG 源图），适用于纯自绘 / 新建图 / 工具演示。

## 一、什么叫空白地图

两类：

1. **纯空白**：没打开任何后端图，仅用前端坐标范围渲染一张底色纯净的 "画布"，后续添加 Marker / 自绘图形 / vjmapext 实体。
2. **新建图**：通过 `svc.updateMap({ filedoc: ... })` 上传一份 JSON 图形定义，生成一张临时图。见 [backend/upload-create-map](../backend/upload-create-map.md)。

本文聚焦第 1 种；第 2 种请跳到 backend 主题。

## 二、纯空白地图完整模板

```js
// 自己定义想要的坐标范围
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 选型

| API | 说明 |
|---|---|
| `svc.rasterBlankStyle(minZoom, maxZoom)` | 栅格空白（服务端固定返回透明瓦片，与 `darkMode` 无关；底色由容器 CSS 背景决定） |
| 自己构造裸样式 | 完全不依赖 svc 返回 |

裸样式写法（遵循 vjmap 样式规范）：

```js
style: {
  version: svc.styleVersion(),                          // 必填（整数，vjmap 版本号决定）
  glyphs: svc.glyphsUrl(),                              // 文字字体地址（用 text 图层时需要）
  sources: {},
  layers: [
    // 可自行塞入互联网底图源 + layer，参见 internet-map/ 主题
  ]
}
```

## 四、背景色对齐

容器背景色 + 地图背景色 + svc 的 dark/light 模式三者必须一致，否则首屏闪色：

```css
body { background: #022B4F; }
#map { background: #022B4F; }
```

```js
svc.setCurrentMapParam({ darkMode: true, bounds: ... });
```

## 五、后面叠加 CAD 实体

在空白地图上通常会挂 vjmapext：

```js
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 未就绪，画出来没反应。
