基于SVG的面状地图符号设计与实现
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
面符号是三种地图符号中较为复杂的一种 , 它通常由 点符号与线符号组装而成 , 在地图上占据较大的面积 , 所 以面符号设计在整幅地图中对表现制图对象的空间分布状 态有着极其重要的意义 。 SVG ( Scalable Vector Graphics,可升 级矢量图形 ) 是有着统一设计标准的文本式矢量图形描述 语言 [1 ] 。由于它是基于 XML开放式标准的矢量图形描述语 言 , 因此它在矢量图形的描述表达和网络传输等方面有着 许多独特的优点 [2 ] 。鉴于上述分析 , 本文就拟以我国国家 标准地形图图式为设计标准 , 介绍并实现新的利用 SVG规 范设计面状符号的方法 , 以便为目前网络地图中符号设计 的标准化 、完备化 、提高符号的共享程度提供研究的基础 。
根据 W 3C组织 2003年 1月公布的 SVG规范 111 以及
对现有面状地图符号设计方法的分析与总结 , 首先介绍基
于 SVG元素的符号设计方法 , 这种方法面向 SVG规范中所
设定的各种元素和属性 , 具有直接 、简明易懂的特点 。
311 基于颜色填充的面符号设计
SVG规范向使用者提供了对基本几何图形 、路径和文
“fill Οopacity”等 。以 简 单路径图形填充为例 , 其
图 1 常年湖符号
第 3期 王 Μ等 基于 SVG的面状地图符号设计与实现
169
设计过程可以分两步进行 : 首先用设定的颜色绘制组成面 域的轮廓线 , 然后在面域内部填充表示其属性的颜色 。面 域轮廓线可以采用 < polygon >元素表达 。该元素是用顶点 坐标的组合来描述一个封闭多边形的 , 其重 要 的 参 数 为 “points: points”, 即构成面域轮廓线的顶点坐标串 。在图 形样式 ( style)属性中定义 “fill”元素并使用相应的颜色便 可以完成这类面状地图符号的设计 , 地形图中常年湖泊 、 依比 例 尺 居 民 地 等 就 是 常 见 的 颜 色 填 充 面 符 号 例 子 (图 1) 。 312 基于模板的 “井 ”型面符号设计
虽然经过多年的研究与实践 , 面状地图符号的设计与 表达在原理方法 、实现技术以及实际应用中已有了巨大的
发展与提高 , 但是这些研究与实践几乎都是建立在某一特 定的 GIS平台基础之上的 , 而基于 XML 的开放式标准矢量 图形描述语言 SVG在显示地图数据时却具有显示方式灵 活 、可以任意调整大小而不损失图像质量 , 能够实现分布 式地图制图的功能 , 满足日益增长的地理数据在网络上进 行有效表达的需要 。为此本文将我国地形图符号的设计规 范与开放标准的矢量格式 SVG相结合 , 设计表达图式规范 中的面状符号 , 从而为地图符号的标准化 、完备化 、共享 以及实现地图互操作提供研究基础 。
第三步 : 确定填充底板内个体对象定位点坐标 。此时 需要考虑的是如何有效地避免新生成个体对象之间由于使
用伪随机数方法带来的定位点坐标相同或相近问题 。经过 相关试验后 , 我们认为要解决这个问题必须向个体对象属 性内添加两个参数 , 它们分别表示该个体对象在横向和纵 向上的偏移量 。如果任意两个个体对象之间的横向 (纵向 ) 偏移量之差小于某个阈值就人为地将该偏移量扩大一定数 量单位 , 拉大填充个体之间的距离 , 以此避免个体对象之 间出现重叠和压盖 。
字进行填充操作的通用属性 “fill” (填充 ) 。其操作对象是
一个由简单路径或复合路
径构成的图形内部 (包括
其边界 ) 。对于简单路径
构成的图形 , 填充比较简
单 , 不需要其他额外的规
定 , 但对于本身包含多个
子路径并纵横交叉的图形
对象 , 就必须使用其他填
充参 数 , 如 “fill Οrule ”、
【摘 要 】面状地图符号的设计与实现是计算机地图制图领域研究的基本问题 , 而面符号的共享则是当前开放地 理信息技术研究的重要内容 。本文结合面状地图符号设计的基本方法与开放标准的二维矢量标记语言 SVG, 提出 并详细设计了基于 SVG的面状地图符号 。实验通过基于 XML 的地图表达原型系统测试 , 其结果证明能够满足我 国地形图图式规范的符号表达要求 。 【关键词 】SVG; 面状地图符号设计 ; 空间数据共享 ; 地形图图式 【中图分类号 】P282 【文献标识码 】A 【文章编号 】1009Ο2307 (2007) 03Ο0168Ο04
1 引言
地图符号是直观表达地理事物和地理现象的一种可视 化工具 , 又称为地图语言 。互联网技术与地理信息系统的 结合 , 改善了地理空间信息的获取 、共享 、发布与分析方 法 。综合考察目前已有的符号设计方法和制图软件所提供 的符号设计手段 , 由于各个系统的差异 , 使地图符号不仅 在数量 、种类等方面存在较大差别 , 而且在符号的规范化 、 完备性 、可移植性与开放性等方面都很难满足当前网络地 图表达的需要 。因此 , 如何利用一种开放式的描述方法来 编绘符合我国国家标准的地图符号 , 并以此作为地理空间 数据存储 、传输和显示的基础 , 是目前 W eb GIS领域研究 的基本问题 。
4 基于 SVG实体引用设计方法
综合考察这类面符号的特点 , 在绘制时需要考虑两个 问题 : ①构建一种良好的面域填充算法 : 这是针对任意形 状面域都可以实现的填充算法 , 而且能够保证填充个体在 面域内的分布具有随机性 ; ②填充个体既可以是简单图形 , 也可以是复杂的组合图形 。
根据以上分析 , 我们分四步实现基于随机分布的面符 号设计 。
第一步 : 确定一个矩形的填充区域用以充当填充底板 , 一般使用面域的最小外接矩形 ;
第二步 : 利用 JavaScrip t脚本语言中的函数 , 定义出填 充个体 。定义函数一般需要两个参数 , 即 cx和 cy, 它们是 填充个体外接矩形的中心点坐标 , 具体数值由随机数生成 方法 “M ath1 random ( ) ”得到 , 在该函数体内 , 需要利用 DOM 新创建一个 “path”元素来描述填充个体并设置相关 属性 , 执行后函数值返回一个新定义的个体对象 ;
信息块方法和线晕 、符晕 、瓦晕模板填充法都利用了
作者简介 : 王 Μ ( 1981 Ο) , 男 , 武 汉 大 学资源与环境科学学院硕士研究生 , 主 要研究方向是地理信息系统可视化 、地 理信息智能化表达 。 EΟmail: wong_ korea@1631com
收稿日期 : 2006Ο03Ο03 基金项目 : 国家测绘局基金项目 : 数字 地图 制图 知 识 工 程 的 研 究 ( 1469990324231 )
第四步 : 利用沿路径裁剪的 “clipPath”元素对填充底 板做任意封闭路径裁剪 , 最终获得任意区域的面状地图符 号 (图 6) 。
Байду номын сангаас
基于这一特点 , 考虑构造模板时 , 在一块模板内引用 两个预定义个体符号单元 , 这样当模板依次平铺后 , 在视 觉上便能够满足个体单元横向 (纵向 )交错分布的设计要求 。 为提高符号设计的美观性 , 配置时需要将个体符号对精确
图案填充法则将图案表示与矩阵结合 , 用矩阵元素的 变化来体现图案的变化 [6 ] 。考虑到颜色 、网纹 、密度 (间 距 )以及内部结构等视觉变量对地图符号的综合影响 , 基于 分层的面状符号设计方法把符号分成若干层 , 每层采用一 种填充方式 , 最后各层按照一定的约束关系进行组合 [7 ] 。
第 32卷第 3期 2007年 5月
测绘科学 Science of Surveying and M app ing
Vol132 No13 M ay1
基于 SVG的面状地图符号设计与实现
王 Μ① , 李 霖 ① , 尹章才 ②
( ①武汉大学 资源与环境科学学院 ,武汉 430079; ②武汉理工大学 资源与环境工程学院 , 武汉 430070)
图 2 基于模板的 “井 ”型符号设计过程
在实现时 , 需要考虑两个问题 : 首先是填充模板的定 义 , 其次是如何使用该填充模板 。 SVG规范中提供了对填 充模板的定义 < pattern >元素 [8 ] 。该元素主要有两个参数 : 填充范围和待填充内容 。其中待填充内容可以由 < symbol > 元素描述 。需要注意的是 , 设计好的填充内容应有唯一标 识码 ( id)与其对应 , 以方便后续操作 。而模板图形的填充 范围则由 < pattern >元素的各个属性规定 , 主要有 : id (用 以标识模板图形 ) 、patternUnits(表示规定模板的长度单位 ) 和 patternTransform (用以当模板填充施加在具体元素时添加 坐标变换效果 )等 。填充模板的引用 , 一般可以通过使用 xlink: href完成 。实验证明 , 采用该方法可以设计出符合要 求的 “井 ”型填充面符号 (图 3) 。 313 基于模板的 “品 ”型面符号设计
不同疏密 、粗细 、排列 、组合 、形状的晕线花纹或个体符 号构成的填充单元 , 在面域中按不同的方式进行填充 [3 ] 。 所不同的是 , 后者在矢量数据地图符号库中必须设定一系 列的填充参数表才能达到理想的设计效果 [4 ] 。对以上设计 方式进行改进 , 地图符号的全开放式设计中采用面向对象 的设计思想 , 将填充单元拆分细化成最小单元 , 然后利用 这些最 小 单 元 的 组 合 或 变 形 生 成 满 足 需 要 的 面 符 号 [5 ] 。 矩阵
由于 fill属性一般供封闭图形区域填充颜色使用 , 并不 能直接接受除颜色码以外的其他任何一种填充对象 , 因此 在设计个体单元填充的面符号时需要使用新的填充方式 。 在 SVG规范中 , 对于一个具体的可视化元素 , 其填充有 4 种设置方式 , 除了使用单一颜色外 , 还可以使用色彩渐变 、 模式和自定义填充 。其中 , 模式填充就是使用一小块特定 的图形作为模板铺满所需要绘制的区域 (图 2) 。这种填充模 式非常适合个体单元呈 “井 ”型分布的面符号设计 。
除 “井 ”型面符号以外 , 图式中还有大量个体单元在 面域内呈 “品 ”型分布的符号 , 如大面积经济林 、荒草地 等 。与 “井 ”型排列方式不同 , 这种面符号内的填充单元 呈横向 (纵向 )交错分布 , 在不改变模板排列方式的前提下 设计此类符号 , 需要对填充单元的排布方式进行改进 。
仔细分析 “品 ”型填充方式 , 可以发现在这种面符 号内任意两个位于同一条水平线或竖直线上的相邻个体 单元总是和线外两侧相邻的个体单元构成等边三角形结 构 (图 4 ) 。
地定位在填充模板上 , 本例中所使用的模板是一个长 、宽 均为 3cm 的正方形 , 为便于坐标计算 , 利用 “viewBox”属 性 , 将其长宽分别划分为 300 个单位 , 经计算后两个符号 单元的 中 心 点 定 位 坐 标 分 别 取 为 : ( 75, 40 ) 和 ( 225, 18018) , 成图效果理想 (图 5) 。 314 基于随机分布的面符号设计
基于随机分布面状符号的特点是面域内所有填充个体
均按照随机数值的旋转角度 、行距 、列距不规则分布 。而 在 SVG规范中并没有现成可用的随机填充元素 , 不过借助 规范中定义的内嵌脚本语言 < scrip t >元素 , 利用 JavaScrip t 脚本语言与 DOM (Document Object Modal, 文档对象模型 ) 的伪随机数相关知识 , 通过自行定义个体对象的配置方式 , 便可以设计出符合要求的面符号 。
2 面状符号的设计方法
3 基于 SVG元素的设计方法
面符号通常是指在具有某种特定属性的空间分布范围 内 , 由颜色或符号填充的具有明显精确或隐喻模糊范围的 面域 。目前 , 面状地图符号的绘制方法主要有信息块方法 、 矩阵图案填充法 、线晕符晕瓦晕模板填充法 、地图符号全 开放式设计以及基于分层的面状地图符号设计方法等 。
根据 W 3C组织 2003年 1月公布的 SVG规范 111 以及
对现有面状地图符号设计方法的分析与总结 , 首先介绍基
于 SVG元素的符号设计方法 , 这种方法面向 SVG规范中所
设定的各种元素和属性 , 具有直接 、简明易懂的特点 。
311 基于颜色填充的面符号设计
SVG规范向使用者提供了对基本几何图形 、路径和文
“fill Οopacity”等 。以 简 单路径图形填充为例 , 其
图 1 常年湖符号
第 3期 王 Μ等 基于 SVG的面状地图符号设计与实现
169
设计过程可以分两步进行 : 首先用设定的颜色绘制组成面 域的轮廓线 , 然后在面域内部填充表示其属性的颜色 。面 域轮廓线可以采用 < polygon >元素表达 。该元素是用顶点 坐标的组合来描述一个封闭多边形的 , 其重 要 的 参 数 为 “points: points”, 即构成面域轮廓线的顶点坐标串 。在图 形样式 ( style)属性中定义 “fill”元素并使用相应的颜色便 可以完成这类面状地图符号的设计 , 地形图中常年湖泊 、 依比 例 尺 居 民 地 等 就 是 常 见 的 颜 色 填 充 面 符 号 例 子 (图 1) 。 312 基于模板的 “井 ”型面符号设计
虽然经过多年的研究与实践 , 面状地图符号的设计与 表达在原理方法 、实现技术以及实际应用中已有了巨大的
发展与提高 , 但是这些研究与实践几乎都是建立在某一特 定的 GIS平台基础之上的 , 而基于 XML 的开放式标准矢量 图形描述语言 SVG在显示地图数据时却具有显示方式灵 活 、可以任意调整大小而不损失图像质量 , 能够实现分布 式地图制图的功能 , 满足日益增长的地理数据在网络上进 行有效表达的需要 。为此本文将我国地形图符号的设计规 范与开放标准的矢量格式 SVG相结合 , 设计表达图式规范 中的面状符号 , 从而为地图符号的标准化 、完备化 、共享 以及实现地图互操作提供研究基础 。
第三步 : 确定填充底板内个体对象定位点坐标 。此时 需要考虑的是如何有效地避免新生成个体对象之间由于使
用伪随机数方法带来的定位点坐标相同或相近问题 。经过 相关试验后 , 我们认为要解决这个问题必须向个体对象属 性内添加两个参数 , 它们分别表示该个体对象在横向和纵 向上的偏移量 。如果任意两个个体对象之间的横向 (纵向 ) 偏移量之差小于某个阈值就人为地将该偏移量扩大一定数 量单位 , 拉大填充个体之间的距离 , 以此避免个体对象之 间出现重叠和压盖 。
字进行填充操作的通用属性 “fill” (填充 ) 。其操作对象是
一个由简单路径或复合路
径构成的图形内部 (包括
其边界 ) 。对于简单路径
构成的图形 , 填充比较简
单 , 不需要其他额外的规
定 , 但对于本身包含多个
子路径并纵横交叉的图形
对象 , 就必须使用其他填
充参 数 , 如 “fill Οrule ”、
【摘 要 】面状地图符号的设计与实现是计算机地图制图领域研究的基本问题 , 而面符号的共享则是当前开放地 理信息技术研究的重要内容 。本文结合面状地图符号设计的基本方法与开放标准的二维矢量标记语言 SVG, 提出 并详细设计了基于 SVG的面状地图符号 。实验通过基于 XML 的地图表达原型系统测试 , 其结果证明能够满足我 国地形图图式规范的符号表达要求 。 【关键词 】SVG; 面状地图符号设计 ; 空间数据共享 ; 地形图图式 【中图分类号 】P282 【文献标识码 】A 【文章编号 】1009Ο2307 (2007) 03Ο0168Ο04
1 引言
地图符号是直观表达地理事物和地理现象的一种可视 化工具 , 又称为地图语言 。互联网技术与地理信息系统的 结合 , 改善了地理空间信息的获取 、共享 、发布与分析方 法 。综合考察目前已有的符号设计方法和制图软件所提供 的符号设计手段 , 由于各个系统的差异 , 使地图符号不仅 在数量 、种类等方面存在较大差别 , 而且在符号的规范化 、 完备性 、可移植性与开放性等方面都很难满足当前网络地 图表达的需要 。因此 , 如何利用一种开放式的描述方法来 编绘符合我国国家标准的地图符号 , 并以此作为地理空间 数据存储 、传输和显示的基础 , 是目前 W eb GIS领域研究 的基本问题 。
4 基于 SVG实体引用设计方法
综合考察这类面符号的特点 , 在绘制时需要考虑两个 问题 : ①构建一种良好的面域填充算法 : 这是针对任意形 状面域都可以实现的填充算法 , 而且能够保证填充个体在 面域内的分布具有随机性 ; ②填充个体既可以是简单图形 , 也可以是复杂的组合图形 。
根据以上分析 , 我们分四步实现基于随机分布的面符 号设计 。
第一步 : 确定一个矩形的填充区域用以充当填充底板 , 一般使用面域的最小外接矩形 ;
第二步 : 利用 JavaScrip t脚本语言中的函数 , 定义出填 充个体 。定义函数一般需要两个参数 , 即 cx和 cy, 它们是 填充个体外接矩形的中心点坐标 , 具体数值由随机数生成 方法 “M ath1 random ( ) ”得到 , 在该函数体内 , 需要利用 DOM 新创建一个 “path”元素来描述填充个体并设置相关 属性 , 执行后函数值返回一个新定义的个体对象 ;
信息块方法和线晕 、符晕 、瓦晕模板填充法都利用了
作者简介 : 王 Μ ( 1981 Ο) , 男 , 武 汉 大 学资源与环境科学学院硕士研究生 , 主 要研究方向是地理信息系统可视化 、地 理信息智能化表达 。 EΟmail: wong_ korea@1631com
收稿日期 : 2006Ο03Ο03 基金项目 : 国家测绘局基金项目 : 数字 地图 制图 知 识 工 程 的 研 究 ( 1469990324231 )
第四步 : 利用沿路径裁剪的 “clipPath”元素对填充底 板做任意封闭路径裁剪 , 最终获得任意区域的面状地图符 号 (图 6) 。
Байду номын сангаас
基于这一特点 , 考虑构造模板时 , 在一块模板内引用 两个预定义个体符号单元 , 这样当模板依次平铺后 , 在视 觉上便能够满足个体单元横向 (纵向 )交错分布的设计要求 。 为提高符号设计的美观性 , 配置时需要将个体符号对精确
图案填充法则将图案表示与矩阵结合 , 用矩阵元素的 变化来体现图案的变化 [6 ] 。考虑到颜色 、网纹 、密度 (间 距 )以及内部结构等视觉变量对地图符号的综合影响 , 基于 分层的面状符号设计方法把符号分成若干层 , 每层采用一 种填充方式 , 最后各层按照一定的约束关系进行组合 [7 ] 。
第 32卷第 3期 2007年 5月
测绘科学 Science of Surveying and M app ing
Vol132 No13 M ay1
基于 SVG的面状地图符号设计与实现
王 Μ① , 李 霖 ① , 尹章才 ②
( ①武汉大学 资源与环境科学学院 ,武汉 430079; ②武汉理工大学 资源与环境工程学院 , 武汉 430070)
图 2 基于模板的 “井 ”型符号设计过程
在实现时 , 需要考虑两个问题 : 首先是填充模板的定 义 , 其次是如何使用该填充模板 。 SVG规范中提供了对填 充模板的定义 < pattern >元素 [8 ] 。该元素主要有两个参数 : 填充范围和待填充内容 。其中待填充内容可以由 < symbol > 元素描述 。需要注意的是 , 设计好的填充内容应有唯一标 识码 ( id)与其对应 , 以方便后续操作 。而模板图形的填充 范围则由 < pattern >元素的各个属性规定 , 主要有 : id (用 以标识模板图形 ) 、patternUnits(表示规定模板的长度单位 ) 和 patternTransform (用以当模板填充施加在具体元素时添加 坐标变换效果 )等 。填充模板的引用 , 一般可以通过使用 xlink: href完成 。实验证明 , 采用该方法可以设计出符合要 求的 “井 ”型填充面符号 (图 3) 。 313 基于模板的 “品 ”型面符号设计
不同疏密 、粗细 、排列 、组合 、形状的晕线花纹或个体符 号构成的填充单元 , 在面域中按不同的方式进行填充 [3 ] 。 所不同的是 , 后者在矢量数据地图符号库中必须设定一系 列的填充参数表才能达到理想的设计效果 [4 ] 。对以上设计 方式进行改进 , 地图符号的全开放式设计中采用面向对象 的设计思想 , 将填充单元拆分细化成最小单元 , 然后利用 这些最 小 单 元 的 组 合 或 变 形 生 成 满 足 需 要 的 面 符 号 [5 ] 。 矩阵
由于 fill属性一般供封闭图形区域填充颜色使用 , 并不 能直接接受除颜色码以外的其他任何一种填充对象 , 因此 在设计个体单元填充的面符号时需要使用新的填充方式 。 在 SVG规范中 , 对于一个具体的可视化元素 , 其填充有 4 种设置方式 , 除了使用单一颜色外 , 还可以使用色彩渐变 、 模式和自定义填充 。其中 , 模式填充就是使用一小块特定 的图形作为模板铺满所需要绘制的区域 (图 2) 。这种填充模 式非常适合个体单元呈 “井 ”型分布的面符号设计 。
除 “井 ”型面符号以外 , 图式中还有大量个体单元在 面域内呈 “品 ”型分布的符号 , 如大面积经济林 、荒草地 等 。与 “井 ”型排列方式不同 , 这种面符号内的填充单元 呈横向 (纵向 )交错分布 , 在不改变模板排列方式的前提下 设计此类符号 , 需要对填充单元的排布方式进行改进 。
仔细分析 “品 ”型填充方式 , 可以发现在这种面符 号内任意两个位于同一条水平线或竖直线上的相邻个体 单元总是和线外两侧相邻的个体单元构成等边三角形结 构 (图 4 ) 。
地定位在填充模板上 , 本例中所使用的模板是一个长 、宽 均为 3cm 的正方形 , 为便于坐标计算 , 利用 “viewBox”属 性 , 将其长宽分别划分为 300 个单位 , 经计算后两个符号 单元的 中 心 点 定 位 坐 标 分 别 取 为 : ( 75, 40 ) 和 ( 225, 18018) , 成图效果理想 (图 5) 。 314 基于随机分布的面符号设计
基于随机分布面状符号的特点是面域内所有填充个体
均按照随机数值的旋转角度 、行距 、列距不规则分布 。而 在 SVG规范中并没有现成可用的随机填充元素 , 不过借助 规范中定义的内嵌脚本语言 < scrip t >元素 , 利用 JavaScrip t 脚本语言与 DOM (Document Object Modal, 文档对象模型 ) 的伪随机数相关知识 , 通过自行定义个体对象的配置方式 , 便可以设计出符合要求的面符号 。
2 面状符号的设计方法
3 基于 SVG元素的设计方法
面符号通常是指在具有某种特定属性的空间分布范围 内 , 由颜色或符号填充的具有明显精确或隐喻模糊范围的 面域 。目前 , 面状地图符号的绘制方法主要有信息块方法 、 矩阵图案填充法 、线晕符晕瓦晕模板填充法 、地图符号全 开放式设计以及基于分层的面状地图符号设计方法等 。