网页适量绘图，VML+SVG双剑合璧打造GIS客户端应用

来源：互联网发布：java变量命名规则编辑：程序博客网时间：2024/06/03 21:33

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

发布日期：2010年1月07日

作者：老刀http://www.baiduux.com/blog/2010/01/07/vml_svg_in_gis_app/comment-page-1/

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 性能解决方案

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

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

4.1 客户端应能优化

4.1.1 客户端数据抽稀

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

4.1.2 可视区域截取

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

算法研究

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

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

线段与可视区矩形相交

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

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