基于flex及SVG技术打造交互式地图（数据篇）

本文部分取自网络,其他文字版权归小能所有,转载麻烦标明出处,谢谢! 写作过程中也参阅了大量其他网络文档，如果您觉得侵犯版权，请和我联系：chinazhousheng#gmail.com

前记：从某种意义上来说，这篇文章并不属于GIS专业方面的文章，但贴出来，仅作抛砖引玉作用，以期对GIS从业者对地图的应用有所启发。

通常在日常众多需要应用地图的过程中，很大程度并不需要使用到实际的地理坐标，而仅仅是作为一个普通显示方案来进行，因此，此时，通常来说会采用flash来进行实现，但flash也有天生的短板，也就是与后台数据交互会比较差点，前一阵子基于SVG以及Flex技术做了一个简单的销售地图，偶尔也在网上看到有人求助这方面，因此本着共享的精神，先回出来分享一下。

先上图再说。

基本功能及原理：销售地图可以与分别与饼图以及柱状图进行交互显示，以体现不同的业务功能，地图可根据不同的指标显示由浅至深的不同颜色。其整体基于flex技术来实现，其核心在于地图的显示，而地图的显示则是采用开源控件Degrafa来实现，而在degrafa中，各个面的形状则是借助于SVG技术来实现。

Degrafa是一套很强大的图形算法类库，并且开源，对各种曲线、面以及其他形状绘制提供了很好的支持。

SVG是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。

从上面的描述可以看出，整体功能基本上依赖于SVG的数据，因此，首先讲的是如何来根据一幅普通图片来获取SVG数据。

地图数据制作的最终目的是将采集的数据应用至销售地图上，下面以中国地图的制作为例，详细的说明制作过程。

相关软件：svgDeveloper 1.0（仅试用期一个月）

Photoshop

具体步骤：

寻取合适的地图图片，可以网络上寻找相关的地图数据，而我们的中国地图如下所示：

1、为了符合一致大小，请将图片的大小在photoshop或者其他图像处理软件中进行处理，将其大小修改成740宽、480宽。（注：单位都为像素）

2、打开svgDeveloper，新建一个Svg文件

3、在以下代码中，修改宽度和长度为740、480

<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

4、下面准备将图片插入至svgDeveloper中，点击工具栏中的Image按钮

鼠标呈十字状，在操作界面上进行拉框，一般拉满整个屏幕，结束后，会提示选择图片，此时，选择处理后的图片，点确定即可

5、下面进行数据采集，适当放大图片后，点击钢笔工具

此时鼠标呈钢笔形状，此时依次在地图上沿着边界线进行点选择，注意的是，最好选择好合适的填充颜色 ，尤其注意透明度的选择，这样可以在选面时，避免纯色而无法看清边界线。

依次在地图上进行点选择，并最终形成一个闭合的圈，此时，可以在代码区域找到以下代码：

<path d="M355 304L355.25 303.75L362 310L364 310L371 304L374 296L376 290C376 290 376 288 378 288C379 288 383 288 383 288L388 290L390 292C390 292 394 293 394 294C396 294 399 298 399 298L401 301L399 304L394 307L391 308L384 309L384 313L384 316L386 320L388 323L391 328L392 335L392 339L389 338L384 331L383 327L378 326L375 328L371 333L367 335L362 334L358 333L359 328L354 322L354 315L355 310Z" fill="#000000" fill-opacity="0.2" stroke="none" stroke-opacity="0" />

而相应的path 中的d信息即为我们所用，须注意的是，有时候可能线圈并没有闭合，此时，最后结束的字符可能没有Z，此时，可以人工给添加上“Z”

数据篇暂告一段，如果大家还是有兴趣，我将在后面贴上代码及开发过程。