main.js

import vjmap from "vjmap";
import "vjmap/dist/vjmap.min.css";
import vjmapext from "vjmapext";

const { MapCadLayer, LineEnt, CircleEnt, PolylineEnt, TextEnt, VjmapextEvents } = vjmapext;

// ===== 按需修改 =====
const serviceUrl = import.meta.env.VITE_VJMAP_SERVICE_URL ?? "https://vjmap.com/server/api/v1";
const accessToken = import.meta.env.VITE_VJMAP_TOKEN ?? "";

async function main() {
  // 空白 CAD 画布（不打开已有地图，直接建一块 CAD 坐标范围）
  const svc = new vjmap.Service(serviceUrl, accessToken);
  const mapExtent = vjmap.GeoBounds.fromArray([-1000, -1000, 1000, 1000]);
  const prj = new vjmap.GeoProjection(mapExtent);

  const map = new vjmap.Map({
    container: "map",
    style: svc.rasterBlankStyle(0, 24), // 空白底图
    center: prj.toLngLat(mapExtent.center()),
    zoom: 1,
    renderWorldCopies: false,
  });
  map.attach(svc, prj);
  await map.onLoad();

  // 挂 CAD 绘图层 + 工具栏
  const mapcadLayer = new MapCadLayer();
  map.addControl(mapcadLayer); // addControl 即 onAdd，无需 ready
  mapcadLayer.createUI({ theme: "dark" }); // 内置工具栏；不需要可去掉

  // 标题
  const title = new TextEnt([-900, 850], "vjmapext 空白地图绘图示例", 45);
  title.color = 0xffffff;
  mapcadLayer.addEntity(title);

  // 一些实体
  const axis = new LineEnt([-600, 0], [600, 0]);
  axis.color = 0x445566;
  mapcadLayer.addEntity(axis);

  const orbit = new CircleEnt([0, 0], 300);
  orbit.color = 0x3a4a6a;
  mapcadLayer.addEntity(orbit);

  const pl = new PolylineEnt(
    [
      [-400, -200],
      [0, 200],
      [400, -200],
    ],
    true // 闭合
  );
  pl.color = 0x00ccff;
  pl.lineWidth = 2;
  mapcadLayer.addEntity(pl);

  // 命令式绘图：等用户点两点画一条线
  // await mapcadLayer.executeCommand("LINE");
  mapcadLayer.eventBus.on(VjmapextEvents.CommandEnded, (e) =>
    console.log("命令结束", e)
  );
}

// vite 默认构建 target 不支持顶层 await，包一层 async main
main().catch(console.error);