JSON

GeoJSON 虽然是通用的的地理数据格式，在具体使用场景中，数据服务人员可能并不熟悉 GeoJON,或者没有生成 GeoJON 的工具， 因此 L7 对数据定义了 Parser 的概念，你的数据可以是任何格式，使用指定数据对应的地理信息字段即可。

JSON

⚠️ json 不是标准的地理数据结构，因此在使用时务必要设置 Parser

json 数据解析使用对应 JSON parser

parser

支持两种解析方式

简易解析方式

该方式只支持解析的点数据，或者只有两个点的线段，或者弧线数据

  • type string 必选 json
  • x string 点数据表示 经度
  • y string 点数据表示 纬度
  • x1 string 经度
  • x2 string 纬度

如果数据是点数据，只需要设置 x,y 字段即可

如果是线段，弧线数据，需要知道起始点坐标既，x,y,x1,y1

  1. layer.source(data, {
  2.   parser: {
  3.     type: 'json',
  4.     x: 'lng',
  5.     y: 'lat',
  6.   },
  7. });

JOSN 数据 demo 示例

通用解析方式

可也解析任意复杂的点，线面

  • type string 必选 json
  • coordinates array 必选，主要用于表达比较复杂的格式，等同于 geojson coordinates 属性
  1. layer.source(data, {
  2.   parser: {
  3.     type: 'json',
  4.     coordinates: 'coord',
  5.   },
  6. });

使用示例

点数据

简易解析

  • type json
  • x: 经度字段
  • y: 纬度字段
  1. const data = [
  2.   {
  3.     lng: 112.345,
  4.     lat: 30.455,
  5.     value: 10,
  6.   },
  7.   {
  8.     lng: 114.345,
  9.     lat: 31.455,
  10.     value: 10,
  11.   },
  12. ];
  14. layer.source(data, {
  15.   parser: {
  16.     type: 'json',
  17.     x: 'lng',
  18.     y: 'lat',
  19.   },
  20. });

通用解析

点 coodinates 数据格式

  1. const data = [
  2.   {
  3.     coord: [112.345, 30.455],
  4.     value: 10,
  5.   },
  6.   {
  7.     coord: [114.345, 32.455],
  8.     value: 10,
  9.   },
  10. ];
  12. layer.source(data, {
  13.   parser: {
  14.     type: 'json',
  15.     coordinates: 'coord',
  16.   },
  17. });

线数据

简易解析

  • type: json
  • x string 经度
  • y string 纬度
  • x1 string 经度
  • x2 string 纬度

简易解析只支持两个点组成的线段，主要再绘制弧线的时候比较常用，只需指定线段的起始点坐标

  1. const data = [{
  2.    lng1:112.345,
  3.    lat1:30.455,
  4.    lng2:112.345,
  5.    lat2:30.455,
  6.    value: 10
  7.   },
  8.   {
  9.    lng1:114.345,
  10.    lat1:31.455,
  11.    lng2:112.345,
  12.    lat2:30.455,
  13.    value: 10
  14.   }
  15. ];
  17. layer.source(
  18.   data,
  19.    {
  20.     parser:{
  21.         type:'json',
  22.         x:'lng1',
  23.         y:'lat1' ,
  24.         x1:'lng1',
  25.         y1:'lat2' ,
  26.     }
  27.   }
  28. })

通用解析

绘制线段、弧线也支持使用 coordinates 组织数据

coordinates 包含两个坐标，第一个坐标 对应 x, y第二个坐标 对应 x1, y1

  1.  const data = [
  2.    {
  3.   "id": "1",
  4.   "coord": [
  5.       [
  6.         101.953125,
  7.         50.51342652633956
  8.       ],
  9.       [
  10.         119.17968749999999,
  11.         33.137551192346145
  12.       ]
  13.     ]
  14.    }
  16. layer.source(
  17.   data,
  18.    {
  19.     parser:{
  20.         type:'json',
  21.         coordinates: "coord",
  22.     }
  23.   }
  24. })

如果需要使用绘制轨迹数据，需要通过 coodinates 指定线的点序列。

coordinate 格式 geojson 的 coordinate 字段 支持 LineString, MultiLineString

线 coodinates 数据格式

  1. const data = {
  2.   name: 'path1',
  3.   path: [
  4.     [58.00781249999999, 32.84267363195431],
  5.     [85.78125, 25.16517336866393],
  6.     [101.953125, 41.77131167976407],
  7.     [114.9609375, 39.639537564366684],
  8.     [117.42187500000001, 28.613459424004414],
  9.   ],
  10. };

使用时通过 coordinates 指定

  1. layer.source(
  2.   data,
  3.    {
  4.     parser:{
  5.         type:'json',
  6.         coordinates:'path'
  7.     }
  8.   }
  9. })

面数据

面数据 coordinates 字段比较复杂不支持简易的解析方式

通用解析

需要指定 coordinates 字段, 格式同 GeoJSON 的 coordinates 字段

面 coodinates 数据格式

注意面数据 coord 是三层数据结构

  1. [
  2.   {
  3.     type: 'Polygon',
  4.     geometryCoord: [
  5.       [
  6.         [115.1806640625, 30.637912028341123],
  7.         [114.9609375, 29.152161283318915],
  8.         [117.79541015625001, 27.430289738862594],
  9.         [118.740234375, 29.420460341013133],
  10.         [117.46582031249999, 31.50362930577303],
  11.         [115.1806640625, 30.637912028341123],
  12.       ],
  13.     ],
  14.   },
  15. ];
  17. layer.source(data, {
  18.   parser: {
  19.     type: 'json',
  20.     coordinates: 'geometryCoord',
  21.   },
  22. });