一种大场景Web三维注记可视化技术

周友生，倪慧珠，王杰栋，孔 晖

(浙江省第二测绘院，浙江 杭州 311100)

语义信息表达是采用文字、符号直观地展现地物属性值，如道路名称、建筑物名称等。注记(annotation)或称标注(label)，是语义信息表达的直接方式，也是地图语言的重要组成部分[1-4]。三维注记展示属于三维地理环境图形化表达中的语义信息表达研究范畴[3]。

新型基础测绘的服务内容和形式多样化，从静态的二维平面到动态的基于图形信息和影像信息的三维可视化是其必然趋势[5-6]。以往针对三维注记方面的研究大多是面向注记配置方面，主要研究注记的位置、压盖、可见性等[1-4]。不同数据体量的地理场景，其加载机制、渲染机制、内存控制、语义信息表达机制具有本质差异[7-8]。大规模地理场景数据多采用分块索引加载渲染机制，按需加载，避免内存超负荷，如数据调度流水线方法、流式加载、八叉树等;小规模地理场景数据一般采用直接加载渲染机制，避免频繁调用数据进入内存[9-13]。而在Web三维环境下，由于网页对数据承载容量的限制，海量三维注记的数据组织、服务发布、可视化，成为一项重要的研究内容[14-15]。

1.1 大场景Web三维

大场景Web三维是面向大范围场景的基于WebGL的浏览器端三维展示，主要有两个特点。

1.1.1 基于WebGL的浏览器无插件三维展示

以往浏览器端三维展示技术大多采用插件的形式提供，客户端庞大，安装使用烦琐。Khronos Group发布了一款免插件、跨平台、免费、高性能的JavaScript API—WebGL[25]。WebGL自面世后，得到Web三维开发人员的广泛认可，被应用于医学、网络游戏开发、三维GIS等领域。WebGL使得浏览器无需安装插件即可直接展示三维场景。

1.1.2 海量三维数据快速加载和展示

大场景三维数据的容量往往超过浏览器所能承载的数据量，无法一次性将所有数据读入浏览器。大场景Web三维需对数据调度和展示进行特别定制和优化，使三维数据的展示速度能够保证用户观感，不出现明显的卡顿、延迟。

1.2 CesiumJS三维展示机制

CesiumJS是一个开源的三维地图JavaScript库。它基于WebGL开发，可跨浏览器使用，支持地形、影像、矢量、注记、三维模型、点云等数据的展示，可采用开放标准的WMTS、GeoJSON、地形服务和3D Tiles服务等作为数据源，为开发人员的开发扩展和应用提供便利。

CesiumJS的三维数据展示机制从原理上可以分为两种形式，一种是全量加载，另一种是按需加载。全量加载主要是指少量的矢量图形、注记、三维模型、点云数据的加载，即将所有的数据全部加载到浏览器上，该方式对内容占用高，只适合少量的数据。按需加载是指对大量的数据建立LOD模型，根据地图所显示的范围、摄像机角度、地图窗口分辨率等要素按需加载不同粒度的三维数据，这样可在保证可视化效果的基础上加载最少的数据量，以便能够提供最快速的展示效率，该方式一般应用于地形、影像、三维模型和点云等。

由上述分析可知，注记在CesiumJS中是以全量加载的形式出现的，对于海量的注记无法快速加载和展示。

三维注记可视化关键技术主要包括3个方面，三维注记数据组织、三维注记数据服务和三维注记展示。

2.1 三维注记数据组织

三维注记数据组织要面向三维注记的展示。在不同的比例尺下，三维注记应按照其权重、密度进行配置，以便在该比例尺下能够获得最佳的展示效果。二维电子地图注记组织已经取得良好的效果，天地图注记是其范例。二维电子地图是按照固定级别的比例尺进行展示的，而三维电子地图则没有固定的比例尺，即在任何比例尺下都需要注记的展示。但三维注记数据仍然可以按照二维注记的形式进行组织。

参考天地图各级地图比例尺划分，三维电子地图同样可划分为20级比例尺。比例尺级别从1至20级按两倍比例逐级增大，第1级比例尺为1∶295 829 355.45，第20级比例尺为1∶564.25。每一个注记都应当确定其显示的最小比例尺级别，即当地图放大时，注记在哪一级比例尺上最早出现。根据注记可显示的最小比例尺级别，可以获取任意比例尺和任意范围下需要展示的注记数据。通过这种方式，可以建立三维注记的LOD模型。该模型可认为是一个松散的LOD模型，即没有固定的网格大小，只有明确的网格尺度(比例尺)。

2.2 三维注记数据服务技术

基于松散的LOD模型，三维注记数据可发布为WFS服务。WFS服务在松散的LOD模型基础上，发布松散的三维注记LOD数据服务，即没有固定的网格大小，只有明确的网格尺度。客户端可通过地图范围、网格尺度两个参数进行数据查询。应用端可根据客户端的要求，将网格大小、位置进行固定，以便能够进行数据缓存等性能优化。

2.3 三维注记可视化技术

2.3.1 三维注记数据调度

CesiumJS加载LOD数据有两种形式，一种是Add模式，一种是Replace模式。Add模式是随着视图范围放大，在粗略LOD数据的基础上增加更详细的LOD数据，以便达到更加详细的数据粒度；
Replace模式是用详细的LOD数据替代粗略的LOD数据。

CesiumJS的影像图层就是一个以Add模式加载影像数据的加载机制。地图视图放大时，CesiumJS会计算已经超出当前视图范围的影像瓦片，并将其剔除出浏览器内存，处于当前视图范围的粗略影像当作背景衬托在详细影像的后面，详细影像未加载完之前，浏览器给用户呈现粗略的影像，实现地图缩放的平滑过渡。

CesiumJS的影像图层有UrlTemplateImagery Provider和ImageryLayer两个重要的接口。UrlTem-plateImageryProvider接口负责获取影像瓦片，并对影像瓦片进行预处理以便绘制。ImageryLayer接口负责管理影像瓦片的引用，其对影像瓦片的调度是通过Imagery接口实现的。

仿照影像图层的调度机制，可对UrlTemplate-ImageryProvider、ImageryLayer、Imagery进行扩展形成注记图层。修改UrlTemplateImageryProvider接口，替换其获取影像瓦片的方法获取同比例尺级别、同瓦片注记的方法。修改ImageryLayer接口，将注记与影像瓦片同步调度，以此实现三维注记的调度。

2.3.2 三维注记展示

在CesiumJS中，三维注记展示一般可使用Entity和LabelGraphics接口。Entity用于存储三维注记的位置，LabelGraphics用于存储三维注记的大小、字体、颜色等样式要求，还可以配合Billboard Graphics接口设置三维注记的图标。

GeoJsonDataSource接口是最常用的三维矢量数据接口，CesiumJS框架中可将GeoJsonDataSource数据直接加载到三维电子地图中，但是GeoJsonData-Source接口中只将注记表示为图标，未将注记的文字显示到地图上。

在实际应用中，UrlTemplateImageryProvider中获取的注记数据可转换为GeoJsonDataSource对象，通过ImageryLayer添加到三维电子地图上，对GeoJson-DataSource接口进行扩展，使注记文字和图标同时展示出来，为三维电子地图提供明确的语义指引。

浙江省新型基础测绘成果包括数字高程模型、正射影像、数字线划图和地名地址等数据成果。三维平台将数字高程模型发布为地形服务，正射影像、数字线划图发布为WMTS瓦片服务。数字线划图中的房屋可在三维平台中以白模的形式立体展示，地名地址数据以三维注记的形式立体展示。

3.1 总体架构

三维平台由数据层、服务层、展示层3层架构组成。数据层采用PostGIS作为空间数据库；
服务层采用GeoServer软件作为空间数据服务器；
展示层采用CesiumJS作为三维前端展示框架。如图1所示。

图1 三维平台框架

3.2 数据组织和服务搭建

地名地址数据以单表的形式存放，主要属性包括名称、建成时间、别名、位置等字段。对三维注记可视化展示而言，最重要的是FSCALE字段。FSCALE字段存储的是比例尺级别(1～20)。表1为地名地址(兴趣点)的属性定义。

表1 地名地址属性定义

使用GeoServer对地名地址数据进行发布，坐标系确定为CGCS2000，将其发布为WFS服务，服务命名为placename。

3.3 前端展示

应用下列代码可调用地名地址的WFS服务：

new Cesium.UrlTemplateImageryProvider({

url:‘/geoserver/wfs?request=GetFeature&version=1.1.0 &typeName=xc%3Aplacename&outputFormat=json’,

dataSources:viewer.dataSources

});

其中，url参数中需要设置WFS输出格式为json。

3.3.1 三维注记数据获取扩展

UrlTemplateImageryProvider要接收前端展示传过来的dataSources参数，将其作为自身的属性，并修改UrlTemplateImageryProvider中的requestImage方法，关键代码如下：

resource.setQueryParameters(″Filter″,″此处进行WFS的空间和属性过滤″)

var promise=

GeoJsonDataSource.load(resource);

return promise.then(function(value){

canvas.dataSource=value;

return canvas;

}).otherwise(function(error){

return canvas;

});

关键代码中，首先对WFS请求的Filter参数进行空间和属性条件设置，然后使用GeoJsonData Source接口对WFS查询结构进行封装，并以属性形式置入canvas对象中，以便代入ImageryLayer接口。

3.3.2 三维注记调度扩展

修改ImageryLayer中的createTexture方法，关键代码如下：

if(defined(image.dataSource)){

imagery.dataSource=image.dataSource;

imageryProvider._dataSources.add(image.dataSource);

delete image.dataSource;

image.dataSource=null;

image.dataSource=undefined;

}

与createTexture方法调用的同时，将三维注记放入CesiumJS的数据源中。

修改ImageLayer的releaseReference方法，增加如下代码：

if(defined(this.dataSource)){

this.imageryLayer._imageryProvider._dataSources.remove(this.dataSource);

delete this.dataSource;

}

瓦片释放的同时从CesiumJS的数据源中删除三维注记。

通过上述修改，本文实现了三维注记的调度。

3.3.3 三维数据展示扩展

修改GeoJsonDataSource中的createPoiont方法，给entity设置label属性，代码如下：

entity.label=new LabelGraphics({

……

});

3.4 应用效果

本文通过对浙江省新型基础测绘成果三维注记可视化的应用，实现了三维注记的LOD数据组织、三维注记服务发布，以及前端三维注记的立体展示。通过测试，地名地址达500万条，可快速在三维电子地图上立体展示。

在WebGL环境下全量加载注记的形式，首次加载效率低，时间长达40 s不等，在缩放漫游过程中，卡顿现象严重，基本无法使用。本文技术完全弥补了上述缺陷，经测试，三维注记加载显示时间在100 ms以内，缩放、漫游流畅，为三维电子地图的语义导引提供了切实可行的技术手段。

本文提出的大场景Web三维注记展示技术为WebGL三维电子地图展示提供了一种新的解决方案，填补了CesiumJS框架的空白，应用于浙江省新型基础测绘成果的三维可视化展示中，取得了较好的效果。该技术也可为自然资源基础空间信息平台、不动产管理平台等领域提供接口服务。但该技术只解决了大场景三维注记的展示在效率方面的难点，下一步应与以往的注记配置相关研究相结合，研发三维注记的自动配置，实现效率和展示效果两方面的提升。

猜你喜欢电子地图瓦片浏览器基于百度地图开放平台的导航电子地图课程实践教学研究导航定位学报(2022年2期)2022-04-11打水漂扬子江(2021年4期)2021-08-09电子地图在地理课堂教学中的运用科学导报·学术(2020年12期)2020-04-14浅谈电子地图在高中地理教学中的应用读与写·教育教学版(2019年12期)2019-12-31微软发布新Edge浏览器预览版下载换装Chrome内核中国计算机报(2019年12期)2019-06-21乡村瓦语散文百家(2019年2期)2019-03-13惯性扬子江(2019年1期)2019-03-08城市交通旅游电子地图的研究与应用分析科学与财富(2017年9期)2017-06-09浏览器网络传播(2009年5期)2009-05-26lE8设置技巧大放送网络与信息(2009年11期)2009-05-12