前言

公司需要开发某个村镇的网格地图，个大搜索引擎找了地图板块都只能到村镇级的，在高德地图上搜索出来只是一个标记并没有详细的网格分布，并使用BigMap等工具尝试也只能到村镇不能到具体下面的网格。下文将介绍一种思路用于获取村镇的geojson。

准备工作

• 
  
• 需要转换村镇的png/svg图
  
• Vector Magin用于将png转换为svg工具
  
• Svg2geojson工具，git地址：Svg2geojson
  
• geojson添加属性工具：geojson.io（需要T子）
  
• geojson压缩工具：mapshaper（需要T子）
  

整体思路

PNG转SVG

导入png图片

配置Vector Magic参数

我这里是一直点击下一步直到出现转换界面，这里也可基于自己的图片配置参数。出现下面界面表示已经转换完成，这里选择Edit Result能够对转换完成的svg进行编辑

Vector Magic操作

• 
  
• Pan（A）移动画布
  
• Zap（D）删除某块区域
  
• Fill（F）对某块区域进行填充颜色
  
• Pencil（X）使用画笔进行绘制
  
• Color（C）吸取颜色
  

操作完成点击Update完成svg更新

保存为svg

如果有svg图片本步骤可以省略，另外如果是UI出的svg图片注意边与边不能重合，不能到时候只能识别为一块区域

SVG转换为GeoJson

安装工具

npm install svg2geojson

获取村镇经纬度边界

使用BigMap选择对应的村镇，获取边缘四个点的经纬度并记录

编辑svg加入边界经纬度

<MetaInfo xmlns="http://www.prognoz.ru">

    <Geo>

        <GeoItem 

                X="0" Y="0"

                Latitude="最右边的lat" Longitude="最上边的lng" 

        />

        <GeoItem 

                X="1445" Y="1047"

                Latitude="最左边的lat" Longitude="最下边的lng" 

        />

    </Geo>

</MetaInfo>

最终的svg文件如下

转换svg

svg2geojson canggou.svg

使用geojson.io添加对应的属性

右边粘贴转换出来的geojson，点击对应的区域即可添加属性

注意事项⚠️

1. 
   
2. 转换出来的geojson可能复制到geojson.io不能使用，可以先放到mapshaper里面然后导出geojson再使用geojson.io使用。
   
3. 部分区域粘连问题（本来是多个区域，编辑时却是同一个区域），需要使用Vector Magin重新编辑下生成出来的svg，注意边界。
   

最终效果

PS：具体使用geojson需要自己百度下，下面是最终呈现的效果，地图有点丑请忽略还未来得及优化