VML+SVG双剑合璧 打造GIS客户端应用

1 引语

WebGIS 是Internet技术应用于GIS开发的产物。WebGIS，即互联网地理信息系统，以互联网为环境，以Web页面作为GIS软件的用户界面，把 Internet和GIS技术结合在一起，为各种地理信息应用提供GIS功能。
百度地图采用预生成地理图片结合web端矢量绘图技术，从而大大减轻服务器的负担和提高用户体验。Web端矢量绘图技术也就成了webGIS的最重要的核心技术之一。本文就是讲解通过vml和svg实现web端矢量绘图技术。

2 VML+SVG优势

矢量绘图技术主要是为了解决GIS中的点、线、面应用实现，用于公交、驾车路线以及行政区绘面。百度地图使用VML和SVG。VML仅IE浏览器支持，为了兼容非IE内核浏览器我们使用了SVG。使用VML和SVG两种技术，可以使我们基本兼容目前所有主流浏览器。
VML和SVG 都是兼容 XML、HTML4、XHTML 等语言并符合 CSS、DOM 等规范。这就意味着 VML和SVG 将是可扩展、可样式化、可脚本化和易于集成的。

 

3 性能问题

VML和SVG是完全可以满足我们GIS应用需求。但也有一个重要问题就是性能，尤其VML的性能问题在浏览器上的表现确实不是很理想。GIS系统是一个数据量巨大的系统，路线检索数据经常存在四五千个地理坐标点和几百条线路，大大增加了客户端矢量绘图性能开销。

4 性能解决方案

为了解决矢量绘制性能问题，我们采用了多种技术和方案。后端数据优化方案因不是本文重点，简单说一点.

1. 后端数据层，对线路数据抽稀优化，检索绘制坐标点数量。
2. 数据base64压缩、gzip压缩，减少物理下载开销。

4.1 客户端应能优化

4.1.1 客户端数据抽稀

通过抽稀的方法，减少矢量绘制点数量从而降低性能开销。因为后端数据层已经对数据进行里合理抽稀。客户端抽稀原理很简单，就是隔点抽稀。如“京珠高速公路”数据有几千个地理坐标点，如在第5级别下矢量绘图没有必要将这几千个点全部绘制在地图上，只需要隔点抽稀100个以内的地理坐标点就可以保证路线形状和效果达到用户需求。其他级别同理，只需要注意抽稀力度既可。但在13级别以上，为了尽量使地图瓦片路线与矢量绘线部分吻合，我们尽量减小抽稀力度或不对数据进行抽稀。客户端按地图级别进行数据抽稀，在小级别下对性能提升非常明显。为了减少大级别下的开发我们使用了另一种方案“可视区域截取”。

4.1.2 可视区域截取

可视区域截取也是通过减少矢量绘制点数量从而降低性能开销。它的原理就是将可视区域以外的数据过滤掉，只绘制可视区域内的部分，同样可以大大降低矢量绘制的性能开销。 它在处理大级别下绘制路线意义最大。如我们上面提到“京珠高速公路”，我们将地图放大到13级别以上，如果只绘视野内的部分，需要绘制的点可能只需要几十个就可以，与绘制几千个点性能开销对比肯定非常低。

1. 算法研究

线路截取最小单元为两点间线段。两端点与可视区矩形可能存在3种关系。

1) 两端点都在可视区内，不需要截取。
2) 两端点都在可视区域外，存在两种情况：

• 线段与可视区矩形相交
   

  

• 
  图例：一条线段穿过矩形，线段及线段延长线会与矩形及矩形延长线产生4个交点。再通过线段区域bounds与4个交点对比。如果交点包含在线段bounds区域内并且在可视区矩形上即为所求点，这两红点为我们需要的绘制点。
• 线段与可视区矩形无相交部分
   

  

• 
  图例：线段及线段延长线会与矩形及矩形延长线产生4个交点。再通过可视区矩形与4个交点对比，4个交点是否在可视区内。

3) 两端点只有一个在可视区域外

图例：在可视区内的线段端点，为确定的结果点之一。另一结果点在，线段矩形区域内的两点。判断这两点是否在可视区域矩形内，如果在为需要截取的另一结果点。

从上几个图例我们可以总结出几点思路：

• 第一步，判断两点与可视区域之间的关系。
• 第二步，获取线段及其延长线与可视区及其延长线，4个交点。
• 第三步，通过线段矩形区域和可视区矩形区，利用排除法，将无用的交点排除。

注意：通过上面3步基本可以正确取到可视区域的数据了。注意一下数据特例，例如线与可视区域是平行关系。这里就不重点说明了。

4.1.3 多Path路线合并

地图矢量绘线，每条线都会创建一个Polyline对象，每条线都是有Dom标签（VML使用shape标签、SVG使用path标签）。在有些检索数据会返回几百条线结构，那需要创建几百个dom标签。这样性能肯定不会好。

我们通过将几百条线路，通过创建一个DOM元素实现。这样性能将得到大幅提升。

 

【本文首发于： 百度泛用户体验】 http://www.baiduux.com/blog/2010/01/07/vml_svg_in_gis_app/

【 关注百度技术沙龙】