需求描述

我想自己做一个室内地图但是并没有地图数据（Geojson），因为各大平台只提供了像全国地图、世界地图这种通用地图数据 。这篇文章告诉你怎么将一个矢量图纸转成地图数据，并结合echarts的线图、点图、关系图做出丰富的地图图表！

最终效果

模拟商场人流效果.gif
这里只为介绍如何实现效果，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

• 根据我的业务修改的主要代码如下：将商铺的名称和位置检索出来

image.png

• 你可以根据自己的需要在原作者的基础上做修改
• 具体的导出方法 原作者的github上已经说了

将geojson导出，来看一下数据格式：

image.png

它是这样的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,
        ...
    },

这样地图就有了

image.png

画图表

如果你使用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官网上所有有关地图的图表就都可以搬到你自己的地图上实现啦！帮到你的话点赞吧！