CAD/DWG图Web网页可视化技术之栅格和矢量瓦片 - vjmap - 博客园

背景

在上一篇博文中CAD图DWG解析WebGIS可视化技术分析总结提到，实现CAD/DWG图形Web展示的思路一般为解析AutoCAD图形格式，然后转成html5所能绘制的格式如svg,geojson,栅格瓦片,矢量瓦片，在前端渲染。而在WebGIS中地图底图一般采用的是栅格瓦片或 矢量瓦片。下面就相关技术的原理做个分析。

瓦片地图

概念：瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第0层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小(比如256x256像素)的正方形地图瓦片，形成第0层瓦片矩阵;在第0层地图图片的基础上，按每像素分割为2×2个像素的方法生成第1层地图图片，并对其进行分块，分割成与下一层相同大小的正方形地图瓦片，形成第1层瓦片矩阵;采用同样的方法生成第2层瓦片矩阵;…;如此下去，直到第N一1层，构成整个瓦片金字塔。

地图缓存技术是一种非常有效的提高在线地图访问效率的方式，用空间换取时间的方式。按地图缓存的分类可分为 栅格瓦片 和 矢量瓦片 。

栅格瓦片

概念：将地图中所有图层都切分并存储为栅格格式的地图瓦片。

优点：使用最广，技术成熟

栅格瓦片的原理与机制:

栅格瓦片采用四叉树金字塔模型的分级方式，将地图切割成无数大小相等的矩形栅格图片，由这些矩形栅格图片按照一定规则拼接成不同层级的地图显示。

矢量瓦片

概念：矢量图层以矢量瓦片的形式进行切分和存储。
优点：创建效率高，传输和渲染速度快，前端可自定义渲染样式

矢量瓦片的原理与机制:

矢量瓦片类似栅格瓦片，是将矢量数据用多层次模型分割成矢量要素描述文件存储在服务器端，再到客户端根据指定样式进行渲染绘制地图，在单个矢量瓦片上存储着投影于一个矩形区域内的几何信息和属性信息。当客户端通过分布式网络获取矢量瓦片、地图标注字体、图标、样式文件等数据后，最终在客户端进行渲染输出地图。

矢量瓦片没有统一数据标注，mapbox基于Google protocol buffers制定了MAPBOX CECTOR TILE SPECIFICATION通用的矢量瓦片数据标准，被许多公司和组织采用。

矢量瓦片数据组织分成两层，一层是地图表达范围内的瓦片数据集组织模型，另一层是单个瓦片内要素的组织模型。

矢量瓦片数据集的组织模型类似栅格瓦片金字塔模型，包含坐标系、投影方式、瓦片编号已实现任意精度、空间位置与矢量瓦片的对应关系，并被栅格瓦片规范相互兼容，这样方便将矢量瓦片转换成栅格瓦片，毕竟两者采用相似的投影方式和瓦片编号方式。

单个瓦片要素的组织模型将几何信息和属性信息分开存储，几何信息主要包括点、线、面和未知要素类，元数据信息包含了图层属性和要素属性。

虽然矢量瓦片也采用金字塔的方式进行存储数据，但是由于其默认网格数较高，以PBF为例，单个矢量瓦片的网格是4096*4096，所以在视网膜屏等设备上也显示地很清楚，而不会出现锯齿，同时这个网格数可以随时进行修改调整，以更精确的方式来记录几何位置信息从而适应不同屏幕的要求。同时，在矢量瓦片中，会将其几何信息转换成指令集表达，再将指令存储到32位无符号整数进行存储。而在存储属性信息是，则是以不同的是表示，geojson直接标注，PBF则是用索引号进行标注。

矢量瓦片的数据格式可参考地图渲染技术（2）瓦片矢量数据格式 - lzhooooo - 博客园

可在chrome浏览器里安装插件来调试矢量瓦片的数据内容

栅格瓦片和矢量瓦片的对比

项目	矢量瓦片	栅格瓦片
地图瓦片	将矢量数据通过不同的描述文件来组织和定义，在客户端实时解析数据完成绘制	预先在服务端绘制好固定的PNG或其他格式的图片集合
瓦片体量	小	大
生成瓦片效率	高	低
更新机制	持平	持平
样式修改	支持	不支持
前端技术要求	高(HTML5)	低
显示差异	有差异	无差异
成熟度	一般	高
应用场景	特殊（移动端、风格修改）	广泛
管理机制	持平	持平

	优势	劣势
矢量瓦片	瓦片占用空间低，瓦片切图效率高，渲染地图效果快，可以随时动态调整地图样式，地图分辨率高。	对客户端性能要求比较高，对旧设备兼容性存在问题。
栅格瓦片	瓦片提前渲染，对客户端性能要求低，性能稳定。	瓦片占用空间高，瓦片切图效率低，无法随时动态调整地图样式，地图分辨率低，加载速度比较慢。

实现

栅格瓦片这个技术很成熟，开源的GIS项目如MapServer或GeoServer都能生成栅格瓦片。

矢量瓦片这个技术比较新，可参考一些开源的项目来实现。如：

https://github.com/mapbox/awesome-vector-tiles

https://github.com/mapbox/mapnik-vector-tile

https://github.com/SpatialServer/Leaflet.MapboxVectorTile

MVT: Mapbox Vector Tiles — GDAL documentation

唯杰地图vjmap 为CAD图WebGIS可视化显示开发提供的一站式解决方案, 完全兼容dwg格式，23d效果完美切换，高性能webgl渲染，个性化地图，跨平台私有化部署，矢量栅格瓦片全支持, 实现把CAD地图通过栅格瓦片或矢量瓦片Web展示，只需两步：

第一步：设置渲染方式为几何渲染 GeomRender

第二步：设置样式为栅格瓦片风格(rasterStyle)或矢量瓦片(vectorStyle)

效果

相比之下，矢量瓦片相比栅格瓦片，渲染效果更好，前端能自定义样式。

可以访问此 Demo vjmap-webclient-javascript 在线体验下。

CAD/DWG图Web网页可视化技术之栅格和矢量瓦片相关推荐

前端前沿web 3d可视化技术 ThreeJS学习全记录
前端前沿web 3d可视化技术随着浏览器性能和网络带宽的提升使得3D技术不再是桌面的专利打破传统平面展示模式前端方向主要流向的3D图形库包括Three.js和WebGL WebGL灵活高性能, ...
wpbakery Visual Composer - web网页可视化编辑器介紹
wpbakery Visual Composer web网页可视化编辑器介紹近日在做關鍵字研究時,無意間發現到這篇文章,放棄 WordPress 選用 Joomla! CMS 的5個理由.內容 ...
【CAD-Web】CAD/DWG的Web化
2022.11.19更新. 一.背景近期需要做个信息系统,能将一些2D的平面示意图(DWG格式文件)放到Web上,供放大.浏览,甚至可对元素进行交互,如点击.拖动.改变元素颜色线条等.于是,需要寻找 ...
java可视化压缩_WEB可视化技术发展
EverCraft一直在关注Web可视化技术的发展,本文对国外一篇感觉很不错的综述性文章进行翻译,供这一领域的爱好者相互学习.这篇paper的信息为:"Mwalongo, F., et al ...
java可视化压缩_web可视化技术发展（1/6）
EverCraft一直在关注Web可视化技术的发展,在本系列文章里,小编将对国外一篇感觉很不错的综述性文章进行翻译,供这一领域的爱好者相互学习.这篇paper的信息为:"Mwalongo, ...
cad导出pdf_如何使用浩辰CAD看图王软件来快速导出PDF功能？
浩辰CAD旗下产品都是具有导出PDF功能的,如果是浩辰CAD平台软件或者专业软件选择 dwg to pdf 打印机,就可以输出pdf文件,如果是浩辰CAD看图王则直接就有导出PDF的功能. 浩辰CAD ...
基于矢量瓦片技术的Web电子海图优化方法
范梦琪, 宋伟东, 郑人维, 何欢. 2021. 基于矢量瓦片技术的Web电子海图优化方法[J]. 海洋科学, 45(2): 68-75. FAN Meng-qi, SONG Wei-dong, ZH ...
CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap
背景 DWG图是AutoCAD是私有格式,只能在CAD软件上编辑查看,如何发布至Web上做数据展示,GIS分析应用开发,一直是业内头疼的事情. 传统的办法采用的解析AutoCAD图形绘制,并封装成Ac ...
技术15期：4种常用的可视化技术【web前端】
说到可视化这个词,可能有的人会一脸懵逼,感觉很陌生,有的人会觉得索然无味,感觉这又是程序员闲暇之余想出的噱头而已. no,no,no,如果这么想你就错了. 可视化的应用已经深入我们的生活中,能以非常炫 ...

	`// --打开地图[矢量瓦片]--以矢量瓦片方式打开已上传的CAD的DWG格式的图`
	`// js代码`
	`// 新建地图服务对象，传入服务地址和token`
	`let svc = new vjmap.Service(env.serviceUrl, env.accessToken)`
	`// 打开地图`
	`let res = await svc.openMap({`
	`mapid: env.exampleMapId, // 地图ID,(请确保此ID已存在，可上传新图形新建ID)`
	`mapopenway: vjmap.MapOpenWay.GeomRender, // 以几何数据渲染方式打开`
	`style: vjmap.openMapDarkStyle() // div为深色背景颜色时，这里也传深色背景样式`
	`})`
	`if (res.error) {`
	`message.error(res.error)`
	`}`
	`// 获取地图的范围`
	`let mapExtent = vjmap.GeoBounds.fromString(res.bounds);`
	`// 建立坐标系`
	`let prj = new vjmap.GeoProjection(mapExtent);`

	`// 新建地图对象`
	`let map = new vjmap.Map({`
	`container: 'map', // container ID`
	`style: svc.vectorStyle(), // 矢量瓦片样式如需栅格样式需改成 rasterStyle()`
	`center: prj.toLngLat(mapExtent.center()), // 中心点`
	`zoom: 2,`
	`renderWorldCopies: false`
	`});`
	`// 地图关联服务对象和坐标系`
	`map.attach(svc, prj);`
	`// 使地图全部可见`
	`map.fitMapBounds();`
	`// 点击有高亮状态（鼠标点击地图元素上时，会高亮)`
	`map.enableLayerClickHighlight(svc, e => {`
	`let msg = {`
	content: `type: ${e.name}, id: ${e.objectid}, layer: ${e.layerindex}`,
	`key: "layerclick",`
	`duration: 5`
	`}`
	`e && message.info(msg);`
	`})`

CAD/DWG图Web网页可视化技术之栅格和矢量瓦片