需求描述
我想自己做一个室内地图但是并没有地图数据（Geojson），因为各大平台只提供了像全国地图、世界地图这种通用地图数据 。这篇文章告诉你怎么将一个矢量图纸转成地图数据，并结合echarts的线图、点图、关系图做出丰富的地图图表！
最终效果
这里只为介绍如何实现效果，echarts、highcharts、G2官网都有提供丰富的图表
底图准备
-
通常情况下设计师会将绘制好的地图给开发员，这里要求设计稿必须为矢量图，有一点需要注意的是为了方便后期开发，作图的时候需要将每个图形和你需要表示的东西关联起来，譬如在我的业务中，这里的每一个图形代表一个商铺，所以在下图左侧可以看到我将图形命名为商铺名称+位置。
设计稿.png -
接着我将整个图导出来，格式选择SVG；来看一下导出的文件；可以看到我给图形的命名就是这个图形的id，这样我们就可以在生成geojson的时候用图形的id来标识图形。
导出svg图.png
图形转数据（SVG转Geojson）
网络上有一些svgtogeojson的库，经过我的挑选之后，找到一个非常好用的但仍然不符合我需求的库，地址是这个 https://github.com/Phrogz/svg2geojson ，这个库可以说相当不错了，唯一的缺点是，它不会读取图形的id信息，它导出的geojson不能区分每一个图形，所以在它的基础上做了修改，这个修改是将id里的信息检索出来放在geojson的properties属性中，修改后的代码地址：https://github.com/lastcaveman/svg2geojson
- 根据我的业务修改的主要代码如下：将商铺的名称和位置检索出来
- 你可以根据自己的需要在原作者的基础上做修改
- 具体的导出方法 原作者的github上已经说了
将geojson导出，来看一下数据格式：
它是这样的json数据，properties里是我们想要的标识图形的属性，coordinates存放的是构成图形的点的坐标集。
绘制地图
以上是数据准备，最后效果的代码地址在这里：https://github.com/ZhenhuaChen/customizeMap/blob/master/mall_map.html
图表库可以选择G2 也可以选择echarts，这里介绍Echarts。
$.getJSON('http://testcdn.zhimatech.com/map.json',function(value) {
echarts.registerMap('mallMap',value);
})
echarts 提供自定义地图的api，registerMap('地图名称',地图数据），这里为了方便我读取数据我将geojson的后缀改为json，使用上是一样的。
接下来就是地图的样式部分，我们知道echarts中绘制地图可以选择geo也可以选择series的type为map，如果你要在地图上绘制别的图表，譬如线图、点图那么这里你需要将地图以Echarts中的geo方式呈现
geo: {
map: 'mallMap',
roam:true,
...
},
这样地图就有了
画图表
如果你使用echarts绘制线图，还需要知道每个图形的中心点；这里就需要借助G2的Dataset：
// value为地图的json数据
var shop_center_point_arr = {}
var worldMap = ds.createView().source(value, {
type: 'GeoJSON'
}).transform({
type: 'map',
callback: function callback(row) {
let t_key = row.name
let obj = {};
shop_center_point_arr[t_key] = [row.centroidX,row.centroidY]
return row;
}
})
// shop_center_point_arr:{'汉堡王',[x,y]}
shop_center_point_arr 就存储了图形的名称和对应中心点坐标
这时候就可以绘制线图了(lines) ，具体绘制方法可以参考echarts官网，或者去https://github.com/ZhenhuaChen/customizeMap/blob/master/mall_map.html查看我写的小示例！
完成地图的绘制后echarts官网上所有有关地图的图表就都可以搬到你自己的地图上实现啦！帮到你的话点赞吧！
