自定义解析SVG地图

发表于 & 归档在 地图.

制图行业,地图的美观是重要的指标,不是GIS系统直接配色设置格式就可以出图的,往往还需要细节调整,甚至出版社更多时候用的是corel draw这样的图形格式,完全没有传统地图坐标的概念,同样的SVG作为一种标准矢量图形格式,也是地图最常见的输出格式,Qunee示例中就有将SVG地图转换成Qunee地图的例子,但由于SVG是一种非常复杂的图形格式,将SVG百分百还原成基于Canvas技术的Qunee目前还没有通用的解决办法,通常都需要定制解析,下面是一张韩国地图的例子,自己解析SVG的path元素,转换成Qunee的Path对象,最终得到与SVG原图一样的效果,可作为参考

韩国地图-qunee

使用Qunee组件制作在线地图

发表于 & 归档在 HTML, HTML5, JavaScript, Web, 地图, 案例.

地图是一种普遍应用,按准确度分精确地图(GIS)和示意地图(MapChart),前者支持各种地图投影与坐标系,譬如ArcGIS,后者使用相对坐标系,或者支持简单的WGS84经纬网坐标系,比如ILOG Elixir地图组件,示意地图再按图片类型分,可分为:栅格地图与矢量地图,Qunee组件适合制作矢量示意地图。

maps

HTML5之图形绘制技术(Canvas Vs SVG)

发表于 & 归档在 HTML, HTML5, JavaScript, Web.

Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新)

Canvas_Vs_SVG1

Firefox上的两个SVG Bug

发表于 & 归档在 HTML, Web.

SVG Use 标签bug
一个是use类型引用image第一次不显示的问题,究其根源是image load后,不会派发事件告诉use节点刷新,这个问题困扰我们很久,后来给firefox提交了 bug(https://bugzilla.mozilla.org/show_bug.cgi?id=575210),

问题表现是,第一打开图片不显示,刷新一次就可以了

firefox很快回复了bug,与bug548795相同,而Bug 548795 depends on bug 558663