创建图形示例

// --基于模板数据自动成图--根据一个cad图模板，用数据自动生成导出dwg图形
// 图模板来源地图id和版本
let templateId = "sys_drawtemplate";
let templateSecVersion = "v1";
let svc = new vjmap.Service(env.serviceUrl, env.accessToken);
// 注：以下所的有objectid来源方法为：
// 在唯杰云端管理平台里面以内存方式打开模板图，然后点击相应实体，在属性面板中获取object值
// 或者以几何渲染方式打开模板图，点击相应实体，在属性面板中获取object值，如果是块实体(objectid中有多个_),取第一个_前面的字符串
let symbols = {
    "symbol1": "8F9",//符号一objectid
    "symbol2": "92A" ,//符号二objectid
}
let lineObjectId = "905"; //线objectid
let arrowObjectId = "909"; //箭头objectid
let textObjectId = "8FA"; //文字objectid
// 模拟数据
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", // 模拟用，偶数点用符号二，奇数点用符号二
                text: "CY" + vjmap.randInt(0, 1000), // 随机生成一个文本值
                position: [vjmap.randInt(-50, 50), vjmap.randInt(-50, 50)],
                symbolColor: vjmap.randomColor()
            })
        }
        lines.push(items);
    }
    return lines
}
// 创建图
const createDoc = async (Data) => {
    // 获取要绘制的数据
    let drawData = Data;
    let doc = new vjmap.DbDocument();
    // 数据来源
    doc.from = `${templateId}/${templateSecVersion}`;
    // 把来源图的数据最后都清空，（这里的模板不需要清空，直接用了)
    doc.isClearFromDb = true;
    let entitys = [];
    // 所有线
    for(let ln = 0; ln <  drawData.length; ln++) {
        let lineItem = drawData[ln];
        let textColor = lineItem.textColor; // 文本颜色
        let lineColor = lineItem.lineColor; // 线颜色
        let arrowColor = lineItem.arrowColor; // 箭头颜色
        // 线上所有点
        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) {
                // 创建两点之间的线
                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)
                }))
                // 在中点创建一个箭头
                let midPt = [(startPt[0] + endPt[0]) / 2.0, (startPt[1] + endPt[1]) / 2.0];
                entitys.push(new vjmap.DbBlockReference({
                    cloneObjectId: arrowObjectId,
                    position: midPt,
                    // 旋转
                    matrix: [
                        {
                            op: "rotate", // 旋转
                            angle: vjmap.geoPoint(startPt).angleTo(vjmap.geoPoint(endPt)), // 弧度
                            origin: midPt // 旋转基点
                        }
                    ],
                    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 ) {
                    // 使文字不倒立
                    arrowTextAngle += Math.PI
                }
                // 箭头上方的文本
                entitys.push(new vjmap.DbText({
                    cloneObjectId: textObjectId,
                    position: arrowTextPoint,
                    horizontalMode: vjmap.DbTextHorzMode.kTextCenter, // kTextCenter
                    verticalMode: vjmap.DbTextVertMode.kTextVertMid, // kTextVertMid,
                    color: vjmap.htmlColorToEntColor(arrowColor),
                    // 旋转
                    matrix: [
                        {
                            op: "rotate", // 旋转
                            angle: arrowTextAngle, // 弧度
                            origin: arrowTextPoint // 旋转基点
                        }
                    ],
                }))
            }
        }
    }
    doc.entitys = entitys;
    return doc;
}
// 先得设置一个要图形的所有范围，这个范围是随便都没有有关系的。最后导出dwg时，会根据实体的所有坐标去自动计算真实的范围。
let mapBounds = '[-10000,-10000,10000,10000]'
let mapExtent = vjmap.GeoBounds.fromString(mapBounds);
mapExtent = mapExtent.square(); // 要转成正方形
svc.setCurrentMapParam({
    darkMode: true, // 由于没有打开过图，所以主动设置黑色模式
    bounds: mapExtent.toString()
})
// 建立坐标系
let prj = new vjmap.GeoProjection(mapExtent);
// 新建地图对象
let map = new vjmap.Map({
    container: 'map', // container ID
    style: {
        version: svc.styleVersion(),
        glyphs: svc.glyphsUrl(),
        sources: {},
        layers: []
    },// 矢量瓦片样式
    center: [0,0], // 中心点
    zoom: 2,
    renderWorldCopies: false
});
// 地图关联服务对象和坐标系
map.attach(svc, prj);
// 使地图全部可见
map.fitMapBounds();
await map.onLoad();
// 创建一个几何对象
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) {
        // 如果返回的元数据里面有当前地图的范围，则更新当前地图的坐标范围
        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); // 实体颜色转html颜色
                let featureAttr = {};
                // 因为要组合成一个组合实体，所以线和多边形的颜色得区分
                if (ent.isPolygon) {
                    featureAttr.color = clr; // 填充色，只对多边形有效
                    featureAttr.noneOutline = true; // 不显示多边形边框，只对多边形有效
                } else {
                    featureAttr.color = clr; // 颜色
                    featureAttr.line_width = ent.lineWidth; // 线宽
                }
                for(let g = 0; g <  ent.geom.geometries.length; g++) {
                    if (ent.geom.geometries[g].type == "Point") {
                        // 改成起始和终点一样的线
                        ent.geom.geometries[g].type = "LineString";
                        ent.geom.geometries[g].coordinates = [
                            ent.geom.geometries[g].coordinates, // 始点
                            ent.geom.geometries[g].coordinates // 终点
                        ]
                    }
                }
                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,
    };
};
// 清空之前的地图数据
const clearMapData = () => {
    svc.setCurrentMapParam({
        darkMode: true, // 由于没有打开过图，所以主动设置黑色模式
        bounds: mapExtent.toString()
    })
    map.disableLayerClickHighlight();
    map.removeDrawLayer();
    let sources = map.getStyle().sources;
    for(let source in sources) {
        map.removeSourceEx(source);
    }
}
// 创建一个有数据的地图
const createDataMap = async (doc) => {
    clearMapData();
    let geojson = await createGeomData(map, doc);
    map.getDrawLayer().set(geojson);
}
// 创建一个dwg的地图
const createDwgMap = async (doc) => {
    // 先清空之前绘制的
    clearMapData();
    // js代码
    let res = await svc.updateMap({
        // 获取一个临时的图id(临时图形只会用临时查看，过期会自动删除)
        mapid: vjmap.getTempMapId(1), // 临时图形不浏览情况下过期自动删除时间，单位分钟。默认30
        filedoc: JSON.stringify(doc),
        mapopenway: vjmap.MapOpenWay.Memory,
        style: {
            backcolor: 0 // 如果div背景色是浅色，则设置为oxFFFFFF
        }
    })
    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 // 如果div背景色是浅色，则设置为oxFFFFFF
        }
    })
    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();
    // 点击有高亮状态（鼠标点击地图元素上时，会高亮)
    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;
}
// 随机生成一个图
creatDataMap();
const mousePositionControl = new vjmap.MousePositionControl();
map.addControl(mousePositionControl, "bottom-left");