一种基于SVG的Google用户地图文本标注方法
【专利摘要】本发明公开了一种基于SVG的Google用户地图文本标注方法，它将带有路径文本的svg对象加入Google地图的自定义叠加层，并且在绘制此叠加层时，调用getProjection()方法获取当前地图投影；将经纬度表示的标注路径转换为当前投影下的像素路径；计算像素路径长度，并与标注文本长度比较，如果太短，则不显示svg对象；确定标注文本在像素路径的起点位置，以确保文本处于路径中部；按文本长度确定标注文本实际占据的像素路径；比较确定标注文本像素路径的最小坐标值，并将其作为svg对象的左上角坐标；计算标注文本相对svg左上角的像素路径；将坐标串表示的文本像素路径转换为svg中path元素的路径表示形式，并替换其d属性。本发明解决文本标注问题，为Google用户地图文本标注找到一条新的途径。
【专利说明】—种基于SVG的Google用户地图文本标注方法
【技术领域】
[0001]本发明属于计算机【技术领域】，涉及一种基于SVG的Google用户地图文本标注方法。
【背景技术】
[0002]地图上没有文字是很难理解的，每个地图元素都需要文字注解。传统GIS (Geographic Information System,地理信息系统)软件，如 ArcGIS、Maplnfo 等本身具有丰富的文本标注自动生成功能，在二次开发建立应用系统时无需考虑标注问题。但近年来随着Google地图的广泛应用，越来越多的用户希望将应用建立在Google地图上。GoogleMaps API V3是建立Google地图应用系统的基本工具，提供了诸多地图绘制功能，但缺少相应的文本标注功能。
[0003]针对标注问题，Google提供了几种解决方案，即利用Marker符号(默认或自定义符号)、弹出式Info window窗口和自定义叠加层。前两种方案根本无法产生类似Google基础地图那样的标注效果。相比之下，自定义叠加层具有较大灵活性，且Google在其实用程序库(Google Maps Utility Library)中提供了 MapLabel类以方便用户在地图上绘制文本。
[0004]MapLabel 是对 Overlay View 类的扩展。而 Overlay View 是 Google Maps APIV3的一个基类，它只为用户提供在创建叠加层时必须实现的若干方法，在用户的自定义叠加层中具体添加什么内容由用户自己决定。MapLabel是将绘有文本的HTML5Canvas元素加入叠加层，并放置在地图指定位置，从而形成对此处地图元素的标注。
[0005]但HTML5Canvas元素在文本绘制方面有很大的局限性，只能在水平方向自左向右绘制。所以，MapLabel可基本满足场点标注的需要。如果要文字倾斜、旋转，或沿道路、河流、各种管线等线状或带状地图元素标绘文字，MapLabel就无能为力了。
【发明内容】
[0006]本发明的目的在于克服上述现有技术缺陷，提供一种基于SVG的Google用户地图文本标注方法，解决文本标注问题，为Google用户地图文本标注找到一条新的途径。其具体技术方案为:
[0007]一种基于SVG的Google用户地图文本标注方法，包括以下步骤:
[0008]首先将含有路径本本的svg元素作为JavaScript对象加入自定义叠加层的地图窗格中；然后在绘制此叠加层的过程中执行以下步骤:
[0009](I)调用Overlay View类的getPro jection O方法获取当前地图投影；
[0010](2)将经纬度表示的标注路径转换为当前投影下的像素路径；
[0011](3)计算像素路径长度，并与标注文本长度比较，如果太短，则不显示svg对象；
[0012](4)确定标注文本在像素路径的起点位置，以使文本居于路径中部；
[0013](5)按文本长度确定标注文本实际占据的像素路径；[0014](6)比较确定标注文本像素路径的最小坐标值，并将其作为svg对象的左上角坐标；
[0015](7)将步骤(5)得到的标注文本像素路径转换为相对svg左上角的像素路径；
[0016](8)将步骤(7)得到的坐标串表示的文本像素路径转换为svg中文本路径path元素的路径表示形式，并替换其d属性。
[0017]进一步优选，每个待标注地图元素均需建立一个或多个文本标注对象，并利用数组进行管理，以适应地图元素长度的不同和变化。
[0018]除了按文本长度控制标注的显示，还可以通过地图缩放级别控制标注的显示。
[0019]当标注对象注销时,Google Maps API调用onRemove O方法从地图上移除svg对象。利用对象方法setMap (null)和setMap (map)可从地图上隐去或复显文本标注。
[0020]与现有技术相比，本发明的有益效果为:本发明将HTML5SVG与Google Maps APIV3 的 Overlay View 类结合，建立一个 JavaScript 类 SVGMapLabel,用于在 Google 地图生成文本标注。SVGMapLabel可以为Google地图上的点、线、区域对象建立文本标注，可用于交互式标注，也可与KML图层结合，对KML图层中的地图要素进行自动标注，其标注效果类似于Google基础地图，完全可以取代MapLabel。在建立基于Google地图的WebGIS时，SVGMapLabel类可用于用户地图的内文本标注。
【专利附图】
【附图说明】
[0021]图1是在独立Web页面上用svg沿路径绘制文本；
[0022]图2是道路中线KML文档结构；
[0023]图3是道路标注，其中图3a为1: 2000通路图，图3b为1: 5000道路图。【具体实施方式】
[0024]下面结合附图和具体实例对本发明的技术方案做进一步详细说明。
[0025]I基于SVG的地图标注类SVGMapLabel
[0026]1.1SVG Text
[0027]SVG是Scalable Vector Graphics (可伸缩矢量图形)的缩写，是HTML5内含的XML风格的图形标记语言。与HTML5Canvas使用API的绘图方式不同，HTML5SVG利用一系列专有标记描述Web页面图形。在文本绘制方面，它利用text元素及其众多样式属性控制文本绘制，如图1上部所示的文档片段。这段文档的作用就是沿路径绘制文本，经浏览器(需支持HTML5)渲染后产生图1下部的输出。
[0028]浏览器在渲染svg时，把svg元素输出为页面上的一个图块，其属性(x，y)指其左上角相对页面左上角的位置(以像素计)。text属性(X，y)指文本相对svg左上角的位置。text属性style指文本自身样式属性。其中glyph-orientation-horizontal指字形相对自身水平基线的方位，其值为O或270。O表示正常输出(图1左下图)，270表示每个字绕字形左下角顺时针旋转270° (图1右下图)。text子元素textPath指明文字按指定路径输出，其属性href的值”#MyPath”是事先定义的路径path的惟一标识id值。路径path在text之前的defs元素中定义。如果text内只是文本元素,没有textPath元素,输出路径默认为水平线。[0029]路径path是通过属性d来描述的。d=〃 M12，12L40，40L100，80"表示在svg图块中将光标移至点(12，12)位置，然后向点(40，40)画线，再向点(100，80)画线。这是一条折线，将作为文字基线，但是并不显示在页面上。在svg中也可以绘制更复杂的曲线作为文字基线。
[0030]HTML5SVG虽然符合W3CXML规则，但其子元素的名称必须处于指定的命名空间，即xmlns = ”http://www.w3.0rg/2000/svg”,而链接属性(如href)的名称必须处于另一个命名空间，即 xmlns:xlink = " htt://www.w3.0rg/1999/xlink"。否则，浏览器无法识别，也就得不到期望的输出。
[0031 ] 有关SVG更详细的说明，参见SVG规范。
[0032]很显然，这样一种文字输出方式与期望的Google地图标注方式是一致的。那么将它引入Google地图生成文本标注，就值得深入研究。
[0033]1.2基于SVG的地图标注类SVGMapLabel
[0034]Google提供的地图标注类MapLabel是将HTML5Canvas元素加入自定义叠加层而形成的，这与Google地图建立在HTML5Canvas上的总体思路是一致的。现在要用上述svg文档片段替换MapLabel中的Canvas元素，需要建立一个新的JavaScript类，名曰SVGMapLabel,以描述在Google地图上如何用svg建立文本标注。
[0035]按照Google地图自定义叠加层的创建要求，SVGMapLabel类由构造函数和三个原型方法onAdd()、draw O、onRemove O组成，并且需要将SVGMapLabel原型设为google.maps.0verlayView的新实例，以继承OverlayView类。SVGMapLabel类的定义如下:
[0036]function SVGMapLabel (options) {/* 对象构造函数 */}
[0037]SVGMapLabel.prototype = new google, maps.0verlayView ;/* 子类化 */
[0038]SVGMapLabe1.prototype.0nAdd = function () {/* 添加 svg 兀素 */}
[0039]SVGMapLabe1.prototype, draw = funetion () {/* 动态计算文本路径及 svg 位置*/}
[0040]SVGMapLabe1.prototype.0nRemove = function () {/* 注销时，删除 svg 兀素 */}
[0041]构造函数SVGMapLabel (options)的作用为创建叠加层对象，并将外部数据转换为对象属性，以利于对象的其他方法共享。外部数据包括标注文本的字体参数、标注路径的经纬度数据及其惟一性标识等。
[0042]当叠加层对象完成首次实例化并处于准备显示的状态时，Google Maps API就会调用叠加层对象的onAdd O方法将其添加到Google地图，也就是把1.1节所示的svg树作为一个DOM节点添加到Google地图窗格对象MapPanes中。svg代码的添加有两种方式:一种是将1.1节的svg文档整块加入到窗格层Pane节点上；另一种是按节点对象逐级加入。前者无法进行节点控制，后者可以控制各级节点的属性。因为Google地图随缩放等级而变化，叠加在它上面的svg图块的位置及标注路径也是动态变化的，这种变化需要后续计算才能确定，因此只能采用后一种方式。窗格对象MapPanes有多个窗格层Pane,且有特定的叠置顺序，文本标注最好放在最上层MapPanes.f 1atPane。
[0043]完成上述叠加层初始化之后，每当需要在地图上绘制叠加层时(包括首次添加叠加层时)，Google MapsAPI都会调用draw O方法。在此方法中，使用基类方法getPro jection O检素叠加层的MapCanvasPro jection对象以得到当前地图的投影，并据此重新确定文本标注路径及所在SVg图块的位置。按照习惯，标注文本应始终处于路径中间部位，且当路径长度小于某个像素值时不再显示。具体处理过程如下:
[0044](I)调用getPro jection O方法获取当前地图投影；
[0045](2)指经纬度表示的标注路径转换为当前投影下的像素路径；
[0046](3)计算像素路径长度，并与标注文本长度比较。如果太短，则不显示svg对象。
[0047](4)确定标注文本在像素路径的起点位置；
[0048](5)按文本长度确定标注文本实际占据的像素路径；
[0049](6)比较确定标注文本像素路径的最小(X，y)像素值，并将其作为svg对象的左上角坐标；
[0050](7)计算标注文本相对svg左上角的像素路径；
[0051](8)将坐标串表示的文本像素路径转换为svg中path元素的路径表示形式，并修改其d属性。
[0052]除了按文本长度控制标注的显示，还可以通过地图缩放级别控制标注的显示与否。
[0053]SVGMapLabel对象注销时，Google Maps API调用onRemove O方法从地图上移除svg对象。利用对象方法setMap (null)和setMap (map)可从地图上隐去或复显文本标注。
[0054]每个待标注地图元素均需建立一个或多个文本标注对象，并利用数组进行管理。
[0055]2应用及效果
[0056]SVGMapLabel类是在客户端进行文本标注的一种方法，可以用于交互标注，也可以与Google地图上的KML图层结合起来，利用KML文档提供的属性数据对KML图层中的地图元素进行自动标注。这里以道路标注为例，说明对KML图层自动标注的过程。
[0057]道路设有三个图层:路面、边线及中线。标注信息来自中线的KML文档，其基本结构如图2所示。每条道路的标注文本取自文档〈Placemark〉的〈name〉元素值，标注路径的经讳度坐标取自〈Placemark〉的〈coordinates〉元素值。
[0058]实际标注时需要解决两个问题，
[0059](I)客户端如何获取KML文档；
[0060](2)对于较长道路，能否增加标注个数。
[0061]利用jQuery函数$.get O可以方便地读取服务器端KML文档，而利用jQuery函数$.xml2json(kml)可以将获得的KML文档进一步转换为JSON格式以方便读取其中的数据。
[0062]一条道路在不同的缩放级别下，其地图长度(以像素计)是不同的。若要求标注间隔固定，道路地图长度增加时，标注的个数也应该增加；反之，则减少，从而使标注个数适应道路长度的变化。实现这种动态标注的方法如下:
[0063](I)按缩放级别(或比例尺)估算出道路在地图上的长度(像素)；
[0064](2)按固定像素值(如3OO像素)的基本长度将通路等分成若干段；
[0065](3)计算出每段道路的经纬度路径；
[0066](4)应用SVGMapLabel为每段道路建立文本标注对象，并设置其对应的缩放级别。
[0067]据此方法，每条道路Road有多个标注对象label，分别对应于地图map的不同缩放级别zoom和道路的不同路段Pathseg,每个路段还必须赋予惟一标识pathID。下面是利用SVGMapLabel类创建一个标注对象并存入道路标注数组Label Road的JavaScript代码:[0068]
【权利要求】
1.一种基于SVG的Google用户地图文本标注方法，其特征在于，将带有路径文本的svg对象加入Google地图的自定义叠加层，并且在绘制此叠加层时,包括以下步骤: (1)调用OverlayView类的getProiection O方法获取当前地图投影； (2)将经纬度表示的标注路径转换为当前投影下的像素路径； (3)计算像素路径长度，并与标注文本长度比较，如果太短，则不显示svg对象； (4)确定标注文本在像素路径的起点位置，以确保文本处于路径中部； (5)按文本长度确定标注文本实际占据的像素路径； (6)比较确定标注文本像素路径的最小坐标值，并将其作为svg对象的左上角坐标； (7)计算标注文本相对svg左上角的像素路径； (8)将坐标串表示的文本像素路径转换为svg中path元素的路径表示形式，并替换其d属性。
2.根据权利要求1所述的基于SVG的Google用户地图文本标注方法，其特征在于，每个待标注地图元素均需建立一个或多个文本标注对象，并利用数组进行管理。
【文档编号】G06F17/30GK103970859SQ201410191069
【公开日】2014年8月6日 申请日期:2014年4月29日 优先权日:2014年4月29日
【发明者】杨立法 申请人:杨立法