index.html

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>vjmap cdn starter</title>
  <!-- 版本号按需替换；unpkg 与 jsdelivr 均可 -->
  <link rel="stylesheet" href="https://unpkg.com/vjmap@1.0.161/dist/vjmap.min.css" />
  <script src="https://unpkg.com/vjmap@1.0.161/dist/vjmap.min.js"></script>
  <style>
    html, body, #map { margin: 0; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    (async () => {
      const serviceUrl = "https://vjmap.com/server/api/v1"; // 本地服务 http://localhost:27660/api/v1
      const accessToken = "";                       // 填你的 token
      const mapid = "sys_zp";

      const svc = new vjmap.Service(serviceUrl, accessToken);
      const res = await svc.openMap({
        mapid,
        mapopenway: vjmap.MapOpenWay.GeomRender,
        style: vjmap.openMapDarkStyle(),
      });
      if (res.error) { alert(res.error); return; }

      const mapExtent = vjmap.GeoBounds.fromString(res.bounds);
      const prj = new vjmap.GeoProjection(mapExtent);
      const map = new vjmap.Map({
        container: "map",
        style: svc.rasterStyle(),
        center: prj.toLngLat(mapExtent.center()),
        zoom: 2,
        renderWorldCopies: false,
        doubleClickZoom: false,
      });
      map.attach(svc, prj);
      await map.onLoad();
      console.log("map ready", res.mapid);
    })();
  </script>
</body>
</html>