import vjmap from "vjmap"; import "vjmap/dist/vjmap.min.css"; // ===== 按需修改:服务地址 / token / 地图 ===== // 本地部署的服务形如 http://localhost:27660/api/v1 ;官方云服务见 https://vjmap.com const serviceUrl = import.meta.env.VITE_VJMAP_SERVICE_URL ?? "https://vjmap.com/server/api/v1"; const accessToken = import.meta.env.VITE_VJMAP_TOKEN ?? ""; // 生产填自己的 token;vite 只暴露 VITE_ 前缀 const mapid = "sys_zp"; // 换成你的 mapid async function main() { const svc = new vjmap.Service(serviceUrl, accessToken); // 打开地图 const res = await svc.openMap({ mapid, mapopenway: vjmap.MapOpenWay.GeomRender, // 几何渲染方式打开 style: vjmap.openMapDarkStyle(), // 深色背景样式;浅色用 openMapLightStyle() }); if (res.error) { throw new Error(res.error); // 打开失败先报错 } // res.bounds 是字符串,先转成 GeoBounds const mapExtent = vjmap.GeoBounds.fromString(res.bounds); // CAD 坐标 → 渲染坐标 的投影 const prj = new vjmap.GeoProjection(mapExtent); const map = new vjmap.Map({ container: "map", style: svc.rasterStyle(), // 栅格样式;也可用 svc.vectorStyle() center: prj.toLngLat(mapExtent.center()), // CAD 中心 → 渲染坐标 zoom: 2, renderWorldCopies: false, // 不显示多屏地图 doubleClickZoom: false, }); map.attach(svc, prj); await map.onLoad(); // map.fitMapBounds(); // 需要整图显示时打开 // 覆盖物 / 交互 从这里开始…… console.log("map ready", res.mapid); } // vite 默认构建 target 不支持顶层 await,包一层 async main main().catch(console.error);