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);