【记录】自定义svg图片获取geojson格式文件

1.必要性

1.地图资源一般是只有省、市、县级别的 geojson 文件，而我们可能需要更细粒度的地图来展示（如：街道、社区）
2.数据来源不统一（全国、省使用的是百度的加密地图；市、县使用的是高德地图），就有可能在地图合并时，边界不重合，所以在必要时也需要对已有地图进行微调。

2.资源准备

1.http://geojson.io 可以预览及简单编辑 geojson 文件的网站
2.https://www.npmjs.com/package/svg2geojson 将 svg 转换成 geojson 的工具
3.http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5 可获取一般地图资源

3.具体步骤

1.绘制 svg 图片，生成的 svg 图片中的描点信息只能包含直线，也尽量使用 path 来绘制，否则在转换成 geojson 时可能会出问题
2.获取 svg 的边界信息（在 chrome 中打开设计好的 svg 图片）

// 打开控制台，然后执行如下指令，用来获取 svg 的边界信息（如果获取不到，或不正确，可能是图的问题，要想别的办法）
var box = document.getElementsByTagName('svg')[0].getBBox();
console.log(box.x, box.y, box.x + box.width, box.y + box.height);

3.获取svg地图的最大最小经纬度（横维竖经）
将想要获取的geojson（比如是想要广州白云区的具体街道，这个时候去拿白云区的轮廓）在http://geojson.io中标点获取

4. 将第2.3步骤拿到的数据填到相应的位置

<MetaInfo xmlns="http://www.prognoz.ru">
    <Geo>
        <GeoItem 
                X="{{svg图片边界的X坐标（小）}}" Y="{{svg图片边界的Y坐标（小）}}" 
                Latitude="{{geojson边界的伟度坐标（高）}}" Longitude="{{geojson边界的经度坐标（左）}}"
        />
        <GeoItem 
                X="{{svg图片边界的X坐标（大）}}" Y="{{svg图片边界的Y坐标（大）}}" 
                Latitude="{{geojson边界的伟度坐标（低）}}" Longitude="{{geojson边界的经度坐标（右）}}"
        />
    </Geo>
</MetaInfo>

5.在svg图片的根节点中加入这段代码

6.svg转geojson

// 使用前的全局安装（只需安装一次）
npm install -g svg2geojson
// 然后在svg存放的目录  运行git bash 输入下面的命令 生成 geojson 文件
svg2geojson file.svg

注：可以通过http://geojson.io 去着色和添加区域的信息，自己去摸索吧