经验总结

  1. 首页 > 生活 > >

如何实现通过Leaflet加载dwg格式的CAD图( 三 )

生活百科

Leaflet中深色浅色切换主题实现思路为：通过修改后台样式，通过返回的样式名，修改leaflet栅格图层的瓦片地址即可 。

如何实现通过Leaflet加载dwg格式的CAD图

文章插图
let curIsDarkTheme = true;const switchToDarkTheme = async () => {if (curIsDarkTheme) return;curIsDarkTheme = true;document.body.style.background = "#022B4F"; // 背景色改为深色await updateStyle(curIsDarkTheme)}const switchToLightTheme = async () => {if (!curIsDarkTheme) return;curIsDarkTheme = false;document.body.style.backgroundImage = "linear-gradient(rgba(255, 255, 255, 1), rgba(233,255,255, 1), rgba(233,255,255, 1))"await updateStyle(curIsDarkTheme)}const updateStyle = async (isDarkTheme) => {style.backcolor = isDarkTheme ? 0 : 0xFFFFFF;//深色为黑色，浅色为白色let res = await svc.cmdUpdateStyle(style);layer.setUrl(svc.rasterTileUrl()) // 唯杰地图服务提供的cad的栅格瓦片服务地址}Leaflet中自定义CAD地图样式通过修改CAD地图后台样式数据自定义地图 。
如何实现通过Leaflet加载dwg格式的CAD图

文章插图
// 更改样式const expressionList = [] ;// 表达式数组const updateStyle = async (style) => {let res = await svc.cmdUpdateStyle({name: "customStyle2",backcolor: 0,expression: expressionList.join("\n"),...style});layer.setUrl(svc.rasterTileUrl());// 唯杰地图服务提供的cad的栅格瓦片服务地址}// 表达式语法和变量请参考// 服务端条件查询和表达式查询 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;}Leaflet中对CAD图处理组合对多个cad图进行图层开关裁剪旋转缩放处理后合并成一个新的cad图
如何实现通过Leaflet加载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} */Leaflet中查询图中所有文字并绘制边框实现思路为：通过条件查询去后台获取所有文字的属性数据和geojson数据，在前端通过leaflet的geojson图层绘制每个文字的边框 。
如何实现通过Leaflet加载dwg格式的CAD图

文章插图
let highlightLayer; // 高亮图层const queryTextAndDrawBounds = async () => {if (highlightLayer) {highlightLayer.remove(); // 先删除之前的高亮图层highlightLayer = null;}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(),],}})}let data = https://www.huyubaike.com/biancheng/{type:"FeatureCollection",features: features}if (data.features.length > 0) {highlightLayer = L.geoJSON(data, {style: function (feature) {return {color: "#FF6EA0", fillColor: "#FF6EA0", fillOpacity: 0.4}; // feature.properties.color}})highlightLayer.addTo(map);}}}}

经验总结扩展阅读


上一篇：守村人是什么意思网络用语

下一篇：2023年2月9日安置床铺行吗 2023年2月9日是安置床铺吉日吗