经验总结

  1. 首页 > 生活 > >

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

生活百科

前言?在前面介绍了通过openlayers加载dwg格式的CAD图并与互联网地图叠加，openlayers功能很全面，但同时也很庞大，入门比较难，适合于大中型项目中 。而在中小型项目中，一般用开源的leaflet比较多， leaflet小而美，插件很多 。本文介绍如何用Leaflet来加载DWG格式的CAD图，并在上面做应用开发，如与互联网地图叠加显示等 。
Leaflet介绍? Leaflet 是领先的用于移动友好交互式地图的开源 JavaScript 库 。仅仅重约 39KB 的 JS，它拥有大多数开发者所需要的所有地图功能 。Leaflet 在设计时考虑到了简单性、性能和可用性 。它可以在所有主要的桌面和移动平台上高效地工作，可以通过大量的插件进行扩展，拥有一个漂亮的、易于使用的、记录良好的 API，以及一个简单的、可读的源代码 。。
Leaflet 官网地址 https://leafletjs.com/
Leaflet 源码地址 [https://github.com/Leaflet/
Leaflet中加载CAD栅格瓦片在leaflet中加载CAD图，需要建立一个由cad建立的坐标系 。可以由L.CRS.Simple来进行扩展，设置好坐标系的范围、分辨率及转换参数即可 。

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

文章插图
// 地图服务对象，调用唯杰地图服务打开地图，获取地图的元数据let svc = new vjmap.Service(env.serviceUrl, env.accessToken)// 打开地图let mapId = "sys_zp";let res = await svc.openMap({mapid: mapId, // 地图IDmapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式})if (res.error) {// 如果打开出错message.error(res.error)}// 获取地图范围let mapBounds = vjmap.GeoBounds.fromString(res.bounds);// 建立一个基于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());}});// leaflet中坐标是反的，如果要用L.latLng传入坐标的时候要传[y,x]，如果要传[x,y]，官网建议如下方案// https://leafletjs.com/examples/crs-simple/crs-simple.htmlL.XY = function(x, y) {if (L.Util.isArray(x)) {// When doing XY([x, y]);return L.latLng(x[1], x[0]);}return L.latLng(y, x);// When doing XY(x, y);};// 当前CAD地图范围let bounds = new L.LatLngBounds([L.XY(mapBounds.min.toArray()), L.XY(mapBounds.max.toArray())]);let center = mapBounds.center(); // 地图中心点// 创建leaflet的地图对象let map = L.map('map', {// 坐标系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);Leaflet中选择高亮CAD实体选择高亮的实现思路为：响应地图的点击事件，通过当前位置去后台查询当前的实体的数据 。通过返回的geojson数据，在前端用leaflet的geoJSON进行绘制即可 。
如何实现通过Leaflet加载dwg格式的CAD图

文章插图
【如何实现通过Leaflet加载dwg格式的CAD图】

经验总结扩展阅读


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

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