浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

Leaflet中上传打开CAD的DWG图形

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

文章插图
// 地图服务对象，调用唯杰地图服务打开地图 ， 获取地图的元数据let svc = new vjmap.Service(env.serviceUrl, env.accessToken)// 上传dwg文件const uploadDwgFile = async file => {message.info("正在上传图形，请稍候", 2);let res = await svc.uploadMap(file); // 上传地图// 输入图idlet mapid = prompt("请输入图名称ID", res.mapid);res.mapid = mapid;res.mapopenway = vjmap.MapOpenWay.GeomRender; // 几何渲染，内存渲染用vjmap.MapOpenWay.Memoryres.isVector = false; // 使用栅格瓦片res.style = vjmap.openMapDarkStyle(); // 深色样式 ， 浅色用openMapDarkStylemessage.info("正在打开图形 ， 请稍候，第一次打开时根据图的大小可能需要几十秒至几分钟不等", 5);let data = https://www.huyubaike.com/biancheng/await svc.openMap(res); // 打开地图if (data.error) {message.error(data.error)return;}openMap(data);}Leaflet中切换CAD图层实现思路为：调用后台服务切换CAD图层，获取切换的图层样式id，修改leaflet栅格图层的瓦片地址即可 。
如何实现通过Leaflet加载dwg格式的CAD图

文章插图
// 切换图层const switchLayer = async layers => {let res = await svc.cmdSwitchLayers(layers); // 调用唯杰服务切换图层 ， 返回图层id {layerid： "xxxx"}let source = layer.getSource();// 重新设置新的唯杰地图服务提供的cad的栅格瓦片服务地址source.setUrl(svc.rasterTileUrl());// 刷新source.refresh();}Leaflet中切换CAD图形实现思路为：切换图层时重新新成一个新的div对象 ， 重新new一个新的map对新的div对象相关联 。
如何实现通过Leaflet加载dwg格式的CAD图

文章插图
const switchToMapId = async (mapId)=> {let res = await svc.openMap({mapid: mapId, // 地图IDmapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式})if (res.error) {// 如果打开出错message.error(res.error)return;}// 获取地图范围let mapBounds = vjmap.GeoBounds.fromString(res.bounds);let mapPrj = new vjmap.GeoProjection(mapBounds);// 建立一个基于CAD图范围的坐标系let CadCRS = L.Class.extend({includes: L.CRS.Simple,initialize: function (bounds) {// 当前CAD图的范围this.bounds = bounds;// 投影this.projection = L.Projection.LonLat;// 计算分辨率let r = (256 / Math.abs(this.bounds.getEast() - this.bounds.getWest()));// 设置转换参数 一个仿射变换:一组系数a, b, c, d，用于将一个形式为(x, y)的点变换为 (ax + b, cy + d)并做相反的变换this.transformation = new L.Transformation(r, -r * this.bounds.getWest(), -r, r * this.bounds.getNorth());}});// 当前CAD地图范围let bounds = new L.LatLngBounds([L.XY(mapBounds.min.toArray()), L.XY(mapBounds.max.toArray())]);let center = mapBounds.center(); // 地图中心点// 创建leaflet的地图对象map = L.map(createNewMapDivId(), {// 坐标系crs: new CadCRS(bounds),attributionControl: false}).setView(L.XY([center.x, center.y]), 2); // 设置初始中心点和缩放级别// 如果要用L.latLng设置的话，x,y应写反进行设置 。如// map.setView(L.latLng([center.y, center.x]), 2);// 增加一个栅格瓦片图层let layer = L.tileLayer(svc.rasterTileUrl(),// 唯杰地图服务提供的cad的栅格瓦片服务地址{bounds: bounds // 当前CAD地图范围}).addTo(map);// 把图层增加至地图中layer.addTo(map);map.on('click', (e) => message.info({content: `您点击的坐标为： ${e.latlng.lng}, ${e.latlng.lat}}`, key: "info", duration: 3}));}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的栅格瓦片服务地址}

推荐阅读


上一篇：Dubbo2.7详解

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