Create Drawing Examples

// --Auto-generate from template data--Auto-generate and export DWG from a CAD template using data
// Template map ID and version
let templateId = "sys_drawtemplate";
let templateSecVersion = "v1";
let svc = new vjmap.Service(env.serviceUrl, env.accessToken);
// Note: objectids below can be obtained by:
// Opening the template in VJMap Cloud Platform in Memory mode, clicking the entity, and reading the object value in the attributes panel
// Or opening the template in Geometry Rendering mode, clicking the entity, and reading the object value in the attributes panel. For block entities (objectid with multiple _), use the string before the first _
let symbols = {
    "symbol1": "8F9",// symbol1 objectid
    "symbol2": "92A" ,// symbol2 objectid
}
let lineObjectId = "905"; // line objectid
let arrowObjectId = "909"; // arrow objectid
let textObjectId = "8FA"; // text objectid
// Mock data
const mockData = (num) => {
    num = num || 5;
    let lines = []
    for(let i = 0; i <  num; i++) {
        let items = {
            points: [],
            textColor: vjmap.randomColor(),
            lineColor: vjmap.randomColor(),
            arrowColor: vjmap.randomColor()
        }
        for(let k = 0; k <  3; k++) {
            items.points.push({
                symbol: (k % 2 == 0) ? "symbol1" : "symbol2", // Mock: even points use symbol1, odd use symbol2
                text: "CY" + vjmap.randInt(0, 1000), // Random text value
                position: [vjmap.randInt(-50, 50), vjmap.randInt(-50, 50)],
                symbolColor: vjmap.randomColor()
            })
        }
        lines.push(items);
    }
    return lines
}
// Create drawing
const createDoc = async (Data) => {
    // Get drawing data
    let drawData = Data;
    let doc = new vjmap.DbDocument();
    // Data source
    doc.from = `${templateId}/${templateSecVersion}`;
    // Clear all data from source (this template does not need clearing, used as-is)
    doc.isClearFromDb = true;
    let entitys = [];
    // All lines
    for(let ln = 0; ln <  drawData.length; ln++) {
        let lineItem = drawData[ln];
        let textColor = lineItem.textColor; // Text color
        let lineColor = lineItem.lineColor; // Line color
        let arrowColor = lineItem.arrowColor; // Arrow color
        // All points on the line
        for(let pt = 0; pt <  lineItem.points.length; pt++) {
            let point = lineItem.points[pt];
            entitys.push(new vjmap.DbBlockReference({
                cloneObjectId: symbols[point.symbol],
                position: point.position,
                color: vjmap.htmlColorToEntColor(point.symbolColor)
            }))
            entitys.push(new vjmap.DbText({
                cloneObjectId: textObjectId,
                position: [point.position[0], point.position[1]-0.5],
                horizontalMode: vjmap.DbTextHorzMode.kTextCenter, // kTextCenter
                verticalMode: vjmap.DbTextVertMode.kTextTop, // kTextVertMid,
                color: vjmap.htmlColorToEntColor(textColor)
            }))
            if (pt != 0) {
                // Create line between two points
                let startPt = lineItem.points[pt - 1].position;
                let endPt = lineItem.points[pt].position;
                entitys.push(new vjmap.Db2dPolyline({
                    cloneObjectId: lineObjectId,
                    points: [startPt, endPt],
                    color: vjmap.htmlColorToEntColor(lineColor)
                }))
                // Create arrow at midpoint
                let midPt = [(startPt[0] + endPt[0]) / 2.0, (startPt[1] + endPt[1]) / 2.0];
                entitys.push(new vjmap.DbBlockReference({
                    cloneObjectId: arrowObjectId,
                    position: midPt,
                    // Rotation
                    matrix: [
                        {
                            op: "rotate", // Rotate
                            angle: vjmap.geoPoint(startPt).angleTo(vjmap.geoPoint(endPt)), // Radians
                            origin: midPt // Rotation center
                        }
                    ],
                    color: vjmap.htmlColorToEntColor(arrowColor)
                }))
                let arrowTextPoint = [midPt[0], midPt[1] + 1];
                let arrowTextAngle = vjmap.geoPoint(startPt).angleTo(vjmap.geoPoint(endPt));
                if (arrowTextAngle > Math.PI / 2 && arrowTextAngle <  Math.PI * 3 / 2 ) {
                    // Keep text upright
                    arrowTextAngle += Math.PI
                }
                // Text above arrow
                entitys.push(new vjmap.DbText({
                    cloneObjectId: textObjectId,
                    position: arrowTextPoint,
                    horizontalMode: vjmap.DbTextHorzMode.kTextCenter, // kTextCenter
                    verticalMode: vjmap.DbTextVertMode.kTextVertMid, // kTextVertMid,
                    color: vjmap.htmlColorToEntColor(arrowColor),
                    // Rotation
                    matrix: [
                        {
                            op: "rotate", // Rotate
                            angle: arrowTextAngle, // Radians
                            origin: arrowTextPoint // Rotation center
                        }
                    ],
                }))
            }
        }
    }
    doc.entitys = entitys;
    return doc;
}
// Set an initial bounds for the map (exact values do not matter). Final DWG export will compute real bounds from entity coordinates.
let mapBounds = '[-10000,-10000,10000,10000]'
let mapExtent = vjmap.GeoBounds.fromString(mapBounds);
mapExtent = mapExtent.square(); // Convert to square
svc.setCurrentMapParam({
    darkMode: true, // Set dark mode since no map opened yet
    bounds: mapExtent.toString()
})
// Create coordinate system
let prj = new vjmap.GeoProjection(mapExtent);
// Create map object
let map = new vjmap.Map({
    container: 'map', // container ID
    style: {
        version: svc.styleVersion(),
        glyphs: svc.glyphsUrl(),
        sources: {},
        layers: []
    },// Vector tile style
    center: [0,0], // Center
    zoom: 2,
    renderWorldCopies: false
});
// Attach service and projection to map
map.attach(svc, prj);
// Fit map to bounds
map.fitMapBounds();
await map.onLoad();
// Create geometry data
const createGeomData = async (map, doc) => {
    let svc = map.getService();
    let res = await svc.cmdCreateEntitiesGeomData({
        filedoc: JSON.stringify(doc)
    });
    if (res.error) {
        message.error(res.error);
        return {
            type: "FeatureCollection",
            features: []
        };
    }
    if (res.metadata && res.metadata.mapBounds) {
        // If metadata contains map bounds, update map extent
        map.updateMapExtent(res.metadata.mapBounds);
    }
    const features = [];
    if (res && res.result && res.result.length > 0) {
        for (let ent of res.result) {
            if (ent.geom && ent.geom.geometries) {
                let clr = map.entColorToHtmlColor(ent.color); // Entity color to HTML color
                let featureAttr = {};
                // Distinguish line and polygon colors for composite entities
                if (ent.isPolygon) {
                    featureAttr.color = clr; // Fill color, polygons only
                    featureAttr.noneOutline = true; // No polygon outline, polygons only
                } else {
                    featureAttr.color = clr; // Color
                    featureAttr.line_width = ent.lineWidth; // Line width
                }
                for(let g = 0; g <  ent.geom.geometries.length; g++) {
                    if (ent.geom.geometries[g].type == "Point") {
                        // Convert to line with same start and end
                        ent.geom.geometries[g].type = "LineString";
                        ent.geom.geometries[g].coordinates = [
                            ent.geom.geometries[g].coordinates, // Start
                            ent.geom.geometries[g].coordinates // End
                        ]
                    }
                }
                let ft = {
                    id: vjmap.RandomID(10),
                    type: "Feature",
                    properties: {
                        objectid: ent.objectid,
                        opacity: ent.alpha / 255,
                        ...featureAttr,
                    }
                }
                if (ent.geom.geometries.length == 1) {
                    features.push({
                        ...ft,
                        geometry: ent.geom.geometries[0],
                    });
                } else {
                    features.push({
                        ...ft,
                        geometry: {
                            geometries: ent.geom.geometries,
                            type: "GeometryCollection"
                        },
                    });
                }
            }
        }
    }
    return {
        type: "FeatureCollection",
        features: features,
    };
};
// Clear previous map data
const clearMapData = () => {
    svc.setCurrentMapParam({
        darkMode: true, // Set dark mode since no map opened yet
        bounds: mapExtent.toString()
    })
    map.disableLayerClickHighlight();
    map.removeDrawLayer();
    let sources = map.getStyle().sources;
    for(let source in sources) {
        map.removeSourceEx(source);
    }
}
// Create map with data
const createDataMap = async (doc) => {
    clearMapData();
    let geojson = await createGeomData(map, doc);
    map.getDrawLayer().set(geojson);
}
// Create DWG map
const createDwgMap = async (doc) => {
    // Clear previous drawing first
    clearMapData();
    // js code
    let res = await svc.updateMap({
        // Get temporary map id (temporary maps auto-delete when expired)
        mapid: vjmap.getTempMapId(1), // Temp map auto-delete time in minutes when not viewed. Default 30
        filedoc: JSON.stringify(doc),
        mapopenway: vjmap.MapOpenWay.Memory,
        style: {
            backcolor: 0 // Set to 0xFFFFFF if div background is light
        }
    })
    if (res.error) {
        message.error(res.error)
    }
    await map.switchMap(res);
}
let curDoc;
const exportDwgOpen = async () => {
    if (!curDoc) return;
    const mapid = 'exportdwgmap';
    let res = await svc.updateMap({
        mapid: mapid,
        filedoc: JSON.stringify(curDoc),
        mapopenway: vjmap.MapOpenWay.Memory,
        style: {
            backcolor: 0 // Set to 0xFFFFFF if div background is light
        }
    })
    if (res.error) {
        message.error(res.error)
    } else{
        window.open(`https://vjmap.com/app/cloud/#/map/${res.mapid}?version=${res.version}&mapopenway=Memory&vector=false`)
    }
}
const creatDataMap = async () => {
    let Data = mockData(5);
    const doc = await createDoc(Data);
    await createDataMap(doc);
    map.fitMapBounds();
    curDoc = doc;
}
const creatDwgMap = async () => {
    let Data = mockData(15);
    const doc = await createDoc(Data);
    await createDwgMap(doc);
    map.fitMapBounds();
    // Highlight on click (elements highlight when clicked)
    map.enableLayerClickHighlight(svc, e => {
        if (!e) return;
        let msg = {
            content: `type: ${e.name}, id: ${e.objectid}, layer: ${e.layerindex}`,
            key: "layerclick",
            duration: 5
        }
        e && message.info(msg);
    })
    curDoc = doc;
}
// Generate random drawing
creatDataMap();
const mousePositionControl = new vjmap.MousePositionControl();
map.addControl(mousePositionControl, "bottom-left");