index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>vjmap3d cdn demo</title>
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="https://unpkg.com/vjmap3d@2.0.0/dist/vjmap3d.min.css" />
  <style>
    html, body, #map { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }
  </style>
</head>
<body>
  <div id="map"></div>
  <!-- vjmap3d 是 ES 模块，内部 import "three"：必须用 importmap，不能 <script src>。
       three 版本必须与所引 vjmap3d 的 peer 一致：npm 上 vjmap3d@2.0.0 声明 peer
       three@>=0.185.0，故 pin 0.185.x。该版 dist 在 WebGPU 引擎下动态 import
       three/webgpu|three/tsl（webgl 引擎不触发，但保留映射无害）。
       旧版 vjmap3d@1.0.23（webgl-only，peer three@^0.165）没有 webgpu/tsl 导入，
       用旧版时这两项映射与 engine:"webgpu" 均不可用。 -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.185.0/build/three.module.js",
        "three/webgpu": "https://unpkg.com/three@0.185.0/build/three.webgpu.js",
        "three/tsl": "https://unpkg.com/three@0.185.0/build/three.tsl.js",
        "three/examples/jsm/": "https://unpkg.com/three@0.185.0/examples/jsm/",
        "vjmap3d": "https://unpkg.com/vjmap3d@2.0.0/dist/vjmap3d.min.js"
      }
    }
  </script>
  <script type="module">
    import * as THREE from "three";
    import * as vjmap3d from "vjmap3d";

    // ===== 换成你的服务配置 =====
    const serviceUrl = "https://vjmap.com/server/api/v1";
    const accessToken = "";   // 必填（为空时 new App 直接抛错）；不要把真实 token 提交进仓库
    const exampleMapId = "";  // 必填：已存在的 CAD 图 mapid（无内置演示图）

    const svc = new vjmap3d.Service(serviceUrl, accessToken);
    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 }
    });
    // webgpu 引擎下 renderer 异步初始化，需等待就绪；webgl 下立即 resolve
    // （v2.0.0 起提供；旧版 1.0.23 无此方法，webgl 同步就绪可省略本行）
    await app.whenReady();

    const res = await app.svc.openMap({
      mapid: exampleMapId,
      mapopenway: vjmap3d.MapOpenWay.GeomRender,
      style: vjmap3d.openMapDarkStyle()
    });
    if (res.error) { console.error(res.error); } else {
      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);

      const world = mapviewEnt.mapToWorld(mapBounds.center().toArray());
      const marker2d = new vjmap3d.Marker2D({ color: "#f00" });
      marker2d.setPosition(world);
      marker2d.addTo(app);
    }
  </script>
</body>
</html>