浙江龙网

  1. 首页 > 生活百科 > >

如何实现通过Leaflet加载dwg格式的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);}}}}Leaflet中图形绘制实现思路为：利用leaflet提供的图形绘制插件https://github.com/Leaflet/Leaflet.draw进行图形绘制 。
如何实现通过Leaflet加载dwg格式的CAD图

文章插图
var editableLayers = new L.FeatureGroup();map.addLayer(editableLayers);var MyCustomMarker = L.Icon.extend({options: {shadowUrl: null,iconAnchor: new L.Point(12, 41),iconSize: new L.Point(25, 41),iconUrl: './js/leaflet2.0/plugins/images/marker-icon.png'}});var options = {position: 'topright',draw: {polyline: {shapeOptions: {color: '#f357a1',weight: 10}},polygon: {allowIntersection: false, // Restricts shapes to simple polygonsdrawError: {color: '#e1e100', // Color the shape will turn when intersectsmessage: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect},shapeOptions: {color: '#bada55'}},circle: false, // Turns off this drawing toolrectangle: {shapeOptions: {clickable: false}},marker: {icon: new MyCustomMarker()}},edit: {featureGroup: editableLayers, //REQUIRED!!remove: false}};var drawControl = new L.Control.Draw(options);map.addControl(drawControl);map.on(L.Draw.Event.CREATED, function (e) {var type = e.layerType,layer = e.layer;if (type === 'marker') {layer.bindPopup('A popup!');}editableLayers.addLayer(layer);});

推荐阅读


上一篇：Dubbo2.7详解

下一篇：生产系统CPU飙高问题排查