经验总结

  1. 首页 > 生活 > >

通过openlayers加载dwg格式的CAD图并与互联网地图叠加( 三 )

生活百科

Openlayers中自定义CAD地图样式通过修改CAD地图后台样式数据自定义地图

通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
// 更改样式const expressionList = [] ;// 表达式数组const updateStyle = async (style) => {let res = await svc.cmdUpdateStyle({name: "customStyle2",backcolor: 0,expression: expressionList.join("\n"),...style});let source = layer.getSource();// 重新设置新的唯杰地图服务提供的cad的栅格瓦片服务地址source.setUrl(svc.rasterTileUrl());// 刷新source.refresh();}// 表达式语法和变量请参考// 服务端条件查询和表达式查询 https://vjmap.com/guide/svrStyleVar.html// 服务端渲染表达式语法 https://vjmap.com/guide/expr.html// 修改颜色红color.r, 绿color.g, 蓝color.b, 透明度color.a,如果输入了级别的话，表示此级别及以上的设置const modifyColor = (color, zoom) => {let result = "";let z = Number.isInteger(zoom) ? `[${zoom + 1}]` : '';if ("r" in color) result += `gOutColorRed${z}:=${color.r};`;if ("g" in color) result += `gOutColorGreen${z}:=${color.g};`;if ("b" in color) result += `gOutColorBlue${z}:=${color.b};`;if ("a" in color) result += `gOutColorAlpha${z}:=${color.a};`;return result;}Openlayers中对CAD图处理组合对多个cad图进行图层开关裁剪旋转缩放处理后合并成一个新的cad图
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
// 组合成新的图,将sys_world图进行一定的处理后，再与sys_hello进行合成，生成新的地图文件名let rsp = await svc.composeNewMap([{mapid: "sys_world", // 地图id// 下面的参数可以根据实际需要来设置，可以对图层，范围，坐标转换来进行处理layers: ["经纬度标注","COUNTRY"], // 要显示的图层名称列表//clipbounds: [10201.981489534268, 9040.030491346213, 26501.267379,4445.465999], // 要显示的范围//fourParameter: [0,0,1,0] // 对地图进行四参数转换计算},{mapid: "sys_hello"}])if (!rsp.status) {message.error(rsp.error)}// 返回结果为/*{"fileid": "pec9c5f73f1d","mapdependencies": "sys_world||sys_hello","mapfrom": "sys_world&&v1&&&&0&&&&&&&&&&00A0&&10||sys_hello&&v1&&&&0&&&&&&&&&&&&2","status": true} */Openlayers中查询图中所有文字并绘制边框
通过openlayers加载dwg格式的CAD图并与互联网地图叠加

文章插图
// 实体类型ID和名称映射const { entTypeIdMap } = await svc.getConstData();const getTypeNameById = name => {for(let id in entTypeIdMap) {if (entTypeIdMap[id] == name) {return id}}}const queryTextAndDrawBounds = async () => {let queryTextEntTypeId = getTypeNameById("AcDbText"); // 单行文字let queryMTextEntTypeId = getTypeNameById("AcDbMText"); // 多行文字let queryAttDefEntTypeId = getTypeNameById("AcDbAttributeDefinition"); // 属性定义文字let queryAttEntTypeId = getTypeNameById("AcDbAttribute"); // 属性文字let query = await svc.conditionQueryFeature({condition: `name='${queryTextEntTypeId}' or name='${queryMTextEntTypeId}' or name='${queryAttDefEntTypeId}' or name='${queryAttEntTypeId}'`, // 只需要写sql语句where后面的条件内容,字段内容请参考文档"服务端条件查询和表达式查询"fields: "",limit: 100000 //设置很大，相当于把所有的圆都查出来 。不传的话，默认只能取100条}, pt => {// 查询到的每个点进行坐标处理回调return mapPrj.fromMercator(pt);// 转成cad的坐标})if (query.error) {message.error(query.error)} else {message.info(`查询到符合的记数条数：${query.recordCount}`)if (query.recordCount > 0) {let features = [];for(var i = 0; i < query.recordCount; i++) {let bounds = vjmap.getEnvelopBounds(query.result[i].envelop, mapPrj);let clr = vjmap.entColorToHtmlColor(query.result[i].color); // 实体颜色转html颜色(features.push({type: "Feature",properties: {name: "objectid:" + query.result[i].objectid,color: clr},geometry: {'type': 'Polygon','coordinates': [bounds.toPointArray(),],}})}if (!vectorSource) {// 如果之前没有高亮矢量图层addHighLightLayer();}vectorSource.clear();let geojsonObject = {'type': 'FeatureCollection','features': features}// 修改矢量数据源数据vectorSource.addFeatures( new ol.format.GeoJSON().readFeatures(geojsonObject, {dataProjection: cadProjection}))}}}

经验总结扩展阅读


上一篇：2023年2月10日是回娘家吉日吗 2023年农历正月廿十回娘家吉日

下一篇：2024年九月廿六出生郭姓女孩名字怎么取好名字推荐