L7结合Turf.js实现空间分析与数据可视化

1. 概述

AntV L7 是蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎，其特点是通过简单的代码进行配置，即可在前端网页中绘制精美的地图以及相关的图表，并且基于 WebGL 的渲染方式使得 L7 在大数据渲染时具有较为流畅体验

图1. AntV L7 官方图表截图

提到地理数据，就不得不说 GIS（Geographic Information System，地理理信息系统），它是一种用于捕捉、存储、管理、分析和展示地理空间数据的技术，通过 GIS ，用户可以将地理空间数据与属性数据相结合，进行复杂的空间分析、制作地图和展示地理信息，GIS 的核心包括地理数据的收集和整合、空间分析和地图制作

L7 专注于地理数据可视化，即地图制作，如果能有一个前端空间分析工具与 L7 结合，丰富 GIS 的核心，会极大地利好前端开发者和用户

Turf.js 就是一个经典地空间分析库，提供了许多用于处理地理空间数据的函数和算法，其基于JavaScript编写，可以用于浏览器端和Node.js环境

图2. Turf.js 的官网介绍

所以，将 Turf.js 与 L7 结合，就可以实现在前端进行空间分析与空间可视化，拓展 L7 的使用方向

以下章节，笔者首先记述 Turf.js 与 L7 的快速入门使用，然后记录一些实践案例

（笔者注：为了代码易于复现与使用，本文采用原始HTML的方式编写代码）

2. L7 的快速入门

第一步，使用CDN加载 L7

<! --引入最新版的L7，笔者使用时为2.20.5-->

<script src = 'https://unpkg.com/@antv/l7'></script>

CDN 引用的方式，是在使用时通过 L7 命名空间获取所有对象并初始化，如 L7.scene、L7.GaodeMap

第二步，创建一个 DIV 容器并设置CSS样式

<div id="map"></div>

第三步，加载高德底图

<script>

    const scene = new L7.Scene({

        id: 'map',

        map: new L7.GaodeMap({

            center: [116.3956, 39.9392],

            zoom: 10,

            mapStyle: 'amap://styles/darkblue'

        })

    });

</script>

此时的完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src='https://unpkg.com/@antv/l7'></script>

  <style>

    body,

    #map {

      height: 100vh;

      width: 100vw;

      margin: 0;

    }

  </style>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        center: [116.3956, 39.9392],

        zoom: 10,

        mapStyle: 'amap://styles/darkblue'

      })

    });

  </script>

</body>

</html>

结果图如下：

图3. 加载初始底图

第四步，加载GeoJSON矢量数据并设置样式

L7 对于GeoJSON有很高的支持度，默认就支持GeoJSON数据
数据是北京地铁线路

// 加载底图之后

scene.on('loaded', () => {

  fetch(

    'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'

  )

    .then(res => res.json())

    .then(data => {

      const layer = new L7.LineLayer({})

        .source(data)

        .size(4)

        .shape('line')

        .color('标准名称', [ '#5B8FF9', '#5CCEA1', '#F6BD16' ])

        .style({

          borderWidth: 0.4,

          borderColor: '#fff'

        });

      scene.addLayer(layer);

    });

});

此时的完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src='https://unpkg.com/@antv/l7'></script>

  <style>

    body,

    #map {

      height: 100vh;

      width: 100vw;

      margin: 0;

    }

  </style>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        center: [116.3956, 39.9392],

        zoom: 10,

        mapStyle: 'amap://styles/darkblue'

      })

    });

    scene.on('loaded', () => {

      fetch(

        'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'

      )

        .then(res => res.json())

        .then(data => {

          const layer = new L7.LineLayer({})

            .source(data)

            .size(4)

            .shape('line')

            .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])

            .style({

              borderWidth: 0.4,

              borderColor: '#fff'

            });

          scene.addLayer(layer);

        });

    });

  </script>

</body>

</html>

结果图如下：

图4. 加载GeoJSON数据

由上述代码不难看出，使用 L7 进行可视化，只需要使用极少的代码，就可配置成精美的地图图表

文章篇幅有限，更多的样式配置信息，更详尽的API文档，请翻阅官方文档和官方示例

3. Turf.js 的快速入门

第一步，引入 Turf.js 的 CDN

<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

CDN 的方式，通过 turf 命名空间访问 Turf.js 的函数，如 turf.bbox 等

第二步，引入GeoJSON数据

数据和上面一样，是北京地铁数据

<script>

    fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')

        .then(res => res.json())

        .then(data => {

            console.log(data) // JSON对象

    });

</script>

第三步，进行空间分析得到结果GeoJSON

这里示例为求地理包围盒 BBOX

<script>

    fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')

        .then(res => res.json())

        .then(data => {

            const bbox = turf.bbox(data);

            const bboxPolygon = turf.bboxPolygon(bbox);

            console.log(bboxPolygon);

           	// 下面是地理包围盒的坐标数据

            // 0: 116.10214436813241

            // 1: 39.6703694682177

            // 2: 116.68907341874268

            // 3： 40.20693349910422

        });

</script>

此时的完整代码为：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  	<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

    <script>

        fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')

            .then(res => res.json())

            .then(data => {

            const bbox = turf.bbox(data);

            const bboxPolygon = turf.bboxPolygon(bbox);

            console.log(bboxPolygon);

        });

    </script>

</body>

</html>

上述 Turf.js 的代码可以看到，Turf.js 接收 GeoJSON 数据，输出 GeoJSON 结果数据

更多的空间分析函数与API可参考　Turf.js官方文档

Turf.js 专注于空间分析，L7 专注于数据可视化，并且两者对于 GeoJSON 格式有着最高优先度的支持，因此，可以将地理数据在 Turf.js 中进行处理，然后直接输出结果到 L7 中进行可视化，实现数据分析与数据可视化的连接

4. 案例一：寻找地铁站的换乘点

4.1 分析场景与数据

地铁换乘点，通常在不同地铁线路之间的交叉处，所以寻找换乘点，通常就是计算地铁线路的交叉处

如何计算交叉点呢？用空间分析的视角，就是进行求交运算

从 Turf.js 的官方文档中，可以找到计算线相交的函数lineIntersect

图5. lineIntersect 函数

上述的北京地铁线路数据示例如下：

{

    "type": "FeatureCollection",

    "crs": {

        "type": "name",

        "properties": {

            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"

        }

    },

    "features": [

        {

            "type": "Feature",

            "properties": {

                "标准名称": "地铁二号线",

                "分类代码": 430101,

                "数据来源": "正射影像",

                "现状时间": "2010/08/14",

                "备注": null,

                "SHAPE_LENG": 23177.0298819,

                "Shape_Le_1": 23177.0298784,

                "Shape_Le_2": 30241.8106532

            },

            "geometry": {

                "type": "MultiLineString",

                "coordinates": [

                    [

                        [

                            116.38050072430798,

                            39.94888011518406

                        ],

                        [

                            116.38714780612922,

                            39.94892587302933

                        ],

                        // ...

根据 Turf.js 的示例与文档，结合这份数据示例的类型为 FeatureCollection ，需要将里面的每个线路 MultiLineString 进行两两求交运算，最后将结果在 L7 中以点的形式绘制出来

4.2 进行空间分析

将 FeatureCollection 的每个 MultiLineString 进行两两求交运算得到交点的点集：

<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

<script>

    fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')

    .then(res => res.json())

    .then(data => {

    const lines = data;

    // 新建一个Point类型的FeatureCollection用来存储结果

    const points = turf.featureCollection([]);

    for (let i = 0; i < lines.features.length; i++) {

        for (let j = i + 1; j < lines.features.length; j++) {

            const intersections = turf.lineIntersect(lines.features[i], lines.features[j]);

            if (intersections) {

                if (intersections.features.length > 0) {

                    // 将交点添加到points中

                    intersections.features.forEach(item => {

                        points.features.push(item);

                    });

                }

            }

        }

    }

    console.log(points); // 得到四十个交点的JSON对象

});

</script>

4.3 数据可视化

使用 L7 绘制结果代码很简单：

const pointLayer = new L7.PointLayer({})

            .source(points)

            .shape('circle')

            .size(6)

            .color('#f00')

            .style({

              stroke: '#fff',

              strokeWidth: 2

            });

scene.addLayer(pointLayer);

最后，地铁路线与路线交点的完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src='https://unpkg.com/@antv/l7'></script>

  <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

  <style>

    body,

    #map {

      height: 100vh;

      width: 100vw;

      margin: 0;

    }

  </style>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        center: [116.3956, 39.9392],

        zoom: 10,

        mapStyle: 'amap://styles/darkblue'

      })

    });

    scene.on('loaded', () => {

      fetch(

        'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'

      )

        .then(res => res.json())

        .then(data => {

          const layer = new L7.LineLayer({})

            .source(data)

            .size(4)

            .shape('line')

            .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])

            .style({

              borderWidth: 0.4,

              borderColor: '#fff'

            });

          scene.addLayer(layer);

          const lines = data;

          // 新建一个Point类型的FeatureCollection

          const points = turf.featureCollection([]);

          for (let i = 0; i < lines.features.length; i++) {

            for (let j = i + 1; j < lines.features.length; j++) {

              const intersections = turf.lineIntersect(lines.features[i], lines.features[j]);

              if (intersections) {

                if (intersections.features.length > 0) {

                  // 将交点添加到points中

                  intersections.features.forEach(item => {

                    points.features.push(item);

                  });

                }

              }

            }

          }

          const pointLayer = new L7.PointLayer({})

            .source(points)

            .shape('circle')

            .size(6)

            .color('#f00')

            .style({

              stroke: '#fff',

              strokeWidth: 2

            });

          scene.addLayer(pointLayer);

        });

    });

  </script>

</body>

</html>

结果图如下（红点为换乘点）：

图6. 寻找地铁换乘点

5. 案例二：计算地铁线路的服务范围

5.1 分析场景与数据

居民乘坐地铁，通常是前往最近的地铁站，地铁线路的服务范围其实就是地铁线路附近的区域

如果求地铁线路附近的区域呢？从空间分析的角度来说，就是进行缓冲区分析

那地铁线路的服务半径一般是多少呢？ChatGPT提示笔者是1-2公里，笔者这里就取1.5公里作为缓冲半径

地铁线路数据还是使用上述的那份北京地铁线路数据

从 Turf.js 的官方文档中，可以找到计算缓冲区的函数buffer

图7. buffer函数

根据 Turf.js 的示例与文档，结合这份数据示例的类型为 FeatureCollection ，所以只需要将数据传入 buffer 函数即可得到结果

5.2 进行空间分析

调用 turf.buffer 计算缓冲区：

<script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

<script>

    fetch('https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json')

        .then(res => res.json())

        .then(data => {

            const lines = data;

            const buffered = turf.buffer(data, 1500, { units: 'meters' });

            console.log(buffered); // 缓冲区的JSON对象，Polygon

    });

</script>

5.3 数据可视化

L7 进行可视化还是一如既往的简单

地铁路线与缓冲区分析完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src='https://unpkg.com/@antv/l7'></script>

  <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>

  <style>

    body,

    #map {

      height: 100vh;

      width: 100vw;

      margin: 0;

    }

  </style>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        center: [116.3956, 39.9392],

        zoom: 10,

        mapStyle: 'amap://styles/darkblue'

      })

    });

    scene.on('loaded', () => {

      fetch(

        'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'

      )

        .then(res => res.json())

        .then(data => {

          const layer = new L7.LineLayer({})

            .source(data)

            .size(4)

            .shape('line')

            .color('标准名称', ['#5B8FF9', '#5CCEA1', '#F6BD16'])

            .style({

              borderWidth: 0.4,

              borderColor: '#fff'

            });

          const lines = data;

          const buffered = turf.buffer(data, 1500, { units: 'meters' });

          const polygonLayer = new L7.PolygonLayer({})

            .source(buffered)

            .shape('fill')

            .color('#fff')

            .style({

              opacity: 0.2

            });

          scene.addLayer(polygonLayer);

          scene.addLayer(layer);

        });

    });

  </script>

</body>

</html>

最后结果图如下：

图8. 计算地铁线路服务范围

6. 总结

经过上述两个小案例，可以说使用 L7 结合 Turf.js 进行简单的空间分析与可视化简直是易如反掌，尤其是对于前端开发人员来说，有时简单的空间分析功能在客户端完成即可，而不必进行后端开发

L7 具有强大的制图能力，在结合Turf.js后拥有了更广泛的使用场景

7. 参考资料

[1] L7·蚂蚁地理空间数据可视化 | AntV (antgroup.com)

[2] Turf.js | Advanced geospatial analysis (turfjs.org)