main.js

import * as THREE from "three";
import * as vjmap3d from "vjmap3d";
import "vjmap3d/dist/vjmap3d.min.css";

// ===== 换成你的服务配置（公有云 https://vjmap.com/server/api/v1，私有化 http://<ip>:27660/api/v1）=====
const serviceUrl = import.meta.env.VITE_VJMAP_SERVICE_URL ?? "https://vjmap.com/server/api/v1";
const accessToken = import.meta.env.VITE_VJMAP_TOKEN ?? "";      // 必填（为空时 new App 直接抛错）；不要把真实 token 提交进仓库
const exampleMapId = import.meta.env.VITE_VJMAP_MAPID ?? "";     // 必填：已存在的 CAD 图 mapid（无内置演示图）

async function main() {
  // 1. 服务
  const svc = new vjmap3d.Service(serviceUrl, accessToken);

  // 2. 应用（container 传容器 id 或 HTMLElement）
  const app = new vjmap3d.App(svc, {
    container: "map",
    stat: { show: true, left: "0" },
    scene: { gridHelper: { visible: true } },
    camera: { viewHelper: { enable: true, position: "leftBottom" } },
    control: { leftButtonPan: true } // 左键平移 + 右键旋转，与 2D 地图习惯一致
  });
  // webgpu 引擎下 renderer 异步初始化，必须先等；webgl 下立即 resolve
  // （v2.0.0 起提供；旧版 1.0.23 无此方法，webgl 同步就绪可省略本行）
  await app.whenReady();

  // 3. 打开 CAD 图作地面
  const res = await app.svc.openMap({
    mapid: exampleMapId,
    mapopenway: vjmap3d.MapOpenWay.GeomRender,
    style: vjmap3d.openMapDarkStyle()
  });
  if (res.error) {
    console.error(res.error);
    return;
  }

  const provider = new vjmap3d.MapProvider(
    [{ url: app.svc.rasterTileUrl() }],
    { transparent: true }
  );
  const mapBounds = vjmap3d.GeoBounds.fromString(res.bounds);
  const mapviewEnt = new vjmap3d.MapViewEntity({
    provider,
    baseScale: 100,
    mapBounds: mapBounds.toArray()
  });
  mapviewEnt.addTo(app);

  // 4. 验证坐标：CAD 图中心点放一个 Marker2D
  const world = mapviewEnt.mapToWorld(mapBounds.center().toArray());
  const marker2d = new vjmap3d.Marker2D({ color: "#f00" });
  marker2d.setPosition(world);
  marker2d.addTo(app);
}

main().catch(console.error);