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 去着色和添加区域的信息,自己去摸索吧