echarts自定义地图数据的方法和地图数据的引用

为什么80%的码农都做不了架构师?>>>   hot3.png

最近在做一个BI的项目,项目做了一半,发现系统平台选型出了问题。客户的需求在细化的时候,发现平台做不了了。客户习惯于基于gis的数据可视化,可现有的BI在GIS方面全都是半吊子。这个可以理解,毕竟地图能展示的东西只是各种图表中的一小部分。于是,推翻了原来的设计和架构,重新来过。前端的数据可视化选择了Echarts,因为客户说,页面要“炫” -_-!

言归正传,虽然echarts使用很方便,但是对于一些搞程序开发的同学没有怎么接触过gis,一旦上地图图表,显然会一头雾水。第一个遇到的问题是怎样加入自己的地图。echart提供的地图够用,但有两个问题:1、中文地图,要显示英文标注咋整(这个还好说,毕竟属性可以替换,虽然麻烦);2、自定义地图,比如中国地图提供了分省,但很多商业需求是在省的层次上有划分区域,比如东北区、华北区之类。这个肯定是个性的,使用官方给的数据显然是不够的。

自定义地图,官方给出的说明是使用GeoJson格式的地图数据。

其实,首先一点,是先找到地图数据,因为做这一行,如果手里一点数据都没有,全靠矢量化和测绘,会死人的。前者是累死人,后者则是困在山里等死。如果你找中国的数据,请搜索国家基础地理信息中心,那里会提供一些开放的、符合标准的、交换格式数据。精度不高,但一般的数据可视化够用了,又不是导航。

其次,你需要一个好用的地图编辑软件,我比较习惯用mapinfo,版本一般不超过9,后来的版本界面太难看。开源软件推荐udig或者qgis,这两个软件都可以做地图编辑,比如将几个省合并。重绘或者切割地区面等等操作。具体使用还是看文档吧。

第三,则是要转出geojson格式,一般来说,开源软件都支持这种格式的导出。上面提到的两种软件如果没提供这种功能(主要是我不常用,不太确定),可以安装Global Mapper这个工具,这个工具简直是万金油,几乎支持你能知道的所有地图数据格式以及他们之间的转换。商业软件,不注册只能打开一个图层,转数据应该是够了。

最后,把转出的内容,参考着echarts提供的地图文件,拷贝到对应的位置上去,记得改掉注册名。和官方给出的json文件不同,一般软件输出的json文件是开放的,所以你能看到里面的坐标值和属性信息,为了减少文件大小,最好存放之前压缩一下json,去掉空格回车之类的,能减小不少体积。如果精度也不需要那么高,文件体积应该可以更小一点。 至于官方网站的坐标加密是咋弄的,我觉得我没啥动力去研究,在此不做讨论。

这里补一段echart代码,直接拷贝的hebei.js,在需要替换的地方放了临时文字注释

 (function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
    echarts.registerMap('
河北//在这里替换注册地图的名字
', 
{}//在这里用另存出来的geojson文件内容替换这个空对象
);
}));

转载于:https://my.oschina.net/rodger/blog/830902

你可能感兴趣的:(echarts自定义地图数据的方法和地图数据的引用)