专栏首页跟牛老师一起学WEBGIS如何从高德获取地铁数据

如何从高德获取地铁数据

概述

本文讲讲如何在高德获取地铁数据及后期处理,以北京为例。

实现

获取数据

打开高德地铁,按下F12打开调试模式,切换到network面板,如下:

点击右键,“Open in new tab”,在新窗口中打开。

将页面另存为json数据格式。

数据处理

将拿到的数据写代码转换成两个geojson数据,一个是站点数据,一个线路数据。

  1. 站点数据处理
$.get('data/subway.json', function (res) {
    var geojson = {
        'type': 'FeatureCollection',
        'features': []
    };
    res = res['l'];
    var stations = {};
    for (var i = 0; i < res.length; i++) {
        const r = res[i];
        var kn = r['kn'];
        var ln = r['ln'];
        var cl = r['cl'];
        var ls = r['ls'];
        var st = r['st'];
        var lineInfo = {
            kn: kn,
            ln: ln,
            cl: cl,
            ls: ls
        };
        for (let j = 0; j < st.length; j++) {
            var s = st[j];
            // 站点去重
            if(!stations[s['poiid']]) {
                stations[s['poiid']] = true;
                var coords= s.sl.split(',').map(Number);
                var properties = Object.assign(s, lineInfo);
                geojson.features.push({
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: coords
                    },
                    properties: properties
                });
            }
        }
    }
    console.log(JSON.stringify(geojson));
})
  1. 线路数据处理
$.get('data/subway.json', function (res) {
    var geojson = {
        'type': 'FeatureCollection',
        'features': []
    };
    res = res['l'];
    for (var i = 0; i < res.length; i++) {
        const r = res[i];
        var st = r['st'];
        var coords = [];
        for (let j = 0; j < st.length; j++) {
            var s = st[j];
            var _coords= s.sl.split(',').map(Number);
            coords.push(_coords);
        }
        geojson.features.push({
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: coords
            },
            properties: r
        });

    }
    console.log(JSON.stringify(geojson));
})

将浏览器console输出的内容拷贝下来,粘贴到一个文本里面,另存为geojson或者json均可。用QGIS打开并做简单的符号化即可得到如下效果。

同时我们将高德的切片地图加进来,将数据的正确性进行验证。从图上来看数据还是比较准确的。

将站点和线路数据导出为shp。根据点连成的线不是很圆滑,我们在arcgis里面做一下平滑处理,在toolbox工具箱中找到Smooth Line工具,Smoothing Algorithm选择BEZIER_INTERPOLATION。

进行平滑处理后的数据,以及原数据的对比如下:

对处理后的线路和站点数据进行简单的配图,一副地铁图就OK了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Arcgis for js实现北京地铁的展示

    在chrom中输入地址http://map.baidu.com/subways/index.html?c=beijing

    lzugis
  • mapboxGL之风流图

    前面的文章说到了Openlayers4中风场的实现,本文将讲述如何在mapbox GL实现类似的效果。

    lzugis
  • 将数据压缩到图片并在前端做解析渲染

    在做前后端数据交互的时候,你一定遇到过这样的问题:数据量大,尤其是在气象行业!在本文,讲解一种将数据压缩到图片并在前端实现数据的解析与展示的功能。

    lzugis
  • JavaScript变量和数据类型

    变量 变量就是一个元素,类似于数学中的概念,用来指定表示一个对象。 在JavaScript中,用来指定变量的关键字为var。 当声明新变量时,可以使用关键词 "...

    静默虚空
  • [前端]使用曲线将多点连成一条平滑的曲线

    之前在写一个项目需要把多点连成平滑的曲线,而且这些点是无法预知的。开始想到用贝塞尔曲线,但是具体贝塞尔曲线的控制点要怎么设定,怎样让多点都落在曲线上而且保持曲线...

    Tuzei
  • mapboxGL之风流图

    前面的文章说到了Openlayers4中风场的实现,本文将讲述如何在mapbox GL实现类似的效果。

    lzugis
  • C#的DataTable操作方法

    1.将泛型集合类转换成DataTable(表中无数据时使用): public static DataTable NullListToDataTable(IL...

    彭泽0902
  • Dart 笔记 4 - 运算符

    condition ? expr1 : expr2 如果条件为真,则计算并返回 expr1 的值,否则计算并返回 expr2 的值。

    七适散人
  • js倒计时,秒倒计时,天倒计时

    距某某开幕式还有 [<script language="JavaScript" type="text/javascript">djs()</script>] 天...

    用户3055976
  • 语音合成

    用户1112962

扫码关注云+社区

领取腾讯云代金券