Map Secondary Development Guide for Extension Plugins
When the URL parameter map=true is present in the project, the map will automatically load and initialize.
The map is created based on mapboxgl and combines CAD drawings overlaid in mapbox's custom layers, allowing us to implement secondary map development projects. The project is currently developed based on "mapbox-gl": "2.8.2". Coordinate system conversion between geographic coordinates and AutoCAD drawing units.
Initialization Configuration
import { MxCADPluginBase, MxCADUI } from "mxcad";
import { MxFun } from "mxdraw";
class MxCADPlugin extends MxCADPluginBase {
constructor() {
super();
// Default map data during initialization
this.map_default_data = {
/** Alignment position between map and CAD drawing */
mapOrigin: [114.06825863001939, 22.54283198132819],
/** Alignment point between CAD drawing and map */
cadOrigin: [0, 0],
/** Coordinate system conversion between geographic coordinates and CAD drawing units */
meterInCADUnits: 1,
/** Mapbox map token */
mapbox_accessToken: "xxxx",
/** CAD drawing file to open */
openFile: "demo/road.dwg.mxweb",
/** Raster tile layer list */
rasterTileLayerList: [],
/** Vector tile key */
rasterTileKey: "mapbox://styles/mapbox/satellite-v9",
providers: [],
/** Background color */
viewColor: {
red: 255,
green: 255,
blue: 255,
},
};
}
}
let mxcadUi: MxCADUI;
MxFun.on("mxcadApplicationStart", (mxcadUiImp: MxCADUI) => {
mxcadUi = mxcadUiImp;
mxcadUi.init(new MxCADPlugin());
});
// Listen for map initialization event
MxFun.on("mxcadApplicationInitMap", () => {
// Configure the map through exposed mxmap
const mxmap = mxcadUi.mxmap;
// Get mapbox map instance
const map = mxmap.getMapbox();
});| Initialization Config | Detailed Description |
|---|---|
| mapOrigin | This records a longitude and latitude coordinate that aligns with the cadOrigin point in the CAD drawing, determining where the drawing appears on the map |
| cadOrigin | The alignment point between CAD drawing and map mapOrigin. For example, if the drawing's 0,0 point corresponds to the latitude and longitude position on mapOrigin |
| meterInCADUnits | Coordinate system conversion between geographic coordinates and CAD drawing units. For example, how many meters in the map equals 1 unit in the CAD drawing. A value of 1 means a 1:1 relationship, where 1 unit in CAD equals 1 meter on the map |
| mapbox_accessToken | Mapbox map token required to use mapbox-provided maps. Please refer to official documentation for details |
| openFile | CAD drawing file to open (specific mxweb file format) |
| rasterTileLayerList | List of raster tile layers to be added when the map opens. Specifies layer IDs and addresses, e.g., [["gdsl", "GaoDe.Normal.Map"]] creates a layer with ID 'gdsl' using the source 'GaoDe.Normal.Map'. The source address must be provided in providers |
| rasterTileKey | Vector tile key for API keys. For example, some sources require API keys that can be filled here. For TianDiTu API: "http://t{s}.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk={key}", where {key} is the API key to be set in rasterTileKey |
| providers | Map providers format: Set in providers like { GaoDe: { Normal: { Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}' } } }. Use in rasterTileLayerList as: [["gdsl", "GaoDe.Normal.Map"]] |
| viewColor | Background color |
TIP
rasterTileLayerList and providers are necessary during initialization, though you can also add layers through the mapbox map instance. For adding layers, please refer to the mapbox documentation
mapbox-gl
mapbox-gl is mapbox's JavaScript library, already integrated into the project and ready to use in plugins. Please refer to mapbox-gl documentation for details.
You can directly access mapboxgl in extension plugins as mapbox-gl is mounted on the window object.
You can normally use "mapbox-gl": "2.8.2" version APIs for further map development. MxCAD's drawing and editing won't affect it since CAD drawings in MxCAD are always placed on a webgl layer provided by mapbox.
In the standard extension plugin project, you can find the vite.config.ts file. Add mapboxgl to external to exclude it from the plugin bundle, and add the "mapbox-gl": "mapboxgl" property to rollupOptions.output.globals.
Finally, install the mapbox-gl@2.8.2 dependency, and you can directly import it in ts files.
import mapboxgl from "mapbox-gl";