带孔的 GeoJson LineString 特征集合答案

【问题标题】：GeoJson LineString Feature Collection with holes带孔的 GeoJson LineString 特征集合
【发布时间】：2021-05-06 15:19:53
【问题描述】：

我有一长串坐标（由 GPS 传感器发送），代表资产的移动。

我正在使用传单渲染 GeoJSON，如果我将 LineString 渲染为单个特征，它可以正常工作，但如果我将其分解为多个特征（在 FeatureCollection 内 - 应用不同的动态颜色），我开始查看特征之间的“漏洞”。

我很确定这是因为我收到的数据中实际上存在一个“漏洞”。但是为什么它作为一个单一的 LineString 功能工作呢？有没有办法解决这个问题？

这是 GeoJSON（非常大的对象）的摘录

对象的 866 个特征中有 3 个

{
          "type":"Feature",
          "properties":{
             "type":"traffic",
             "color":"#ffa600"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.583125,
                   45.0485616
                ],
                [
                   7.5830532999999996,
                   45.0485816
                ],
                [
                   7.58299,
                   45.0486133
                ],
                [
                   7.582893299999999,
                   45.0486066
                ],
                [
                   7.5828682999999995,
                   45.04859
                ]
             ]
          }
       },

到 bin 的链接

https://jsbin.com/nexijajake/edit?html,output

具有单一特征的示例

https://jsbin.com/guqihajalu/1/edit?html,output

【问题讨论】：

标签： javascript geometry geojson geo

【解决方案1】：

其实渲染没什么问题。您的 data 数组（在您的 jsbin 链接中）是一个不相互连接的线串数组。你得到了这样的模式（想象每一行都是一个线串）：

[点A-点B-点C]

[点D-点E-点F]

为了让你的线连续，每个线串的最后一个点应该作为第一个点存在于下一个线串中：

[点A-点B-点C]

[点C-点D-点E-点F]

这样，您的线路将是连续的。

例如，以下示例（取自您的 jsbin）有一个空白：

const data = [
   {
      "type":"Feature",
      "properties":{
         "type":"traffic",
         "color":"#ffa600"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            [
               7.583125,
               45.0485616
            ],
            [
               7.5830532999999996,
               45.0485816
            ],
            [
               7.58299,
               45.0486133
            ],
            [
               7.582893299999999,
               45.0486066
            ],
            [
               7.5828682999999995,
               45.04859
            ]
         ]
      }
   },
   {
      "type":"Feature",
      "properties":{
         "type":"normal",
         "color":"#07e36a"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            [
               7.582795,
               45.0485149
            ],
            [
               7.582624999999999,
               45.0483233
            ],
            [
               7.581984899999999,
               45.047521599999996
            ]
         ]
      }
   }
];

间隙固定（第二个线串的第一个点是第一个线串的最后一个点）：

const data = [
   {
      "type":"Feature",
      "properties":{
         "type":"traffic",
         "color":"#ffa600"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            [
               7.583125,
               45.0485616
            ],
            [
               7.5830532999999996,
               45.0485816
            ],
            [
               7.58299,
               45.0486133
            ],
            [
               7.582893299999999,
               45.0486066
            ],
            [
               7.5828682999999995,
               45.04859
            ]
         ]
      }
   },
   {
      "type":"Feature",
      "properties":{
         "type":"normal",
         "color":"#07e36a"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            //the first point here is the last of previous linestring
            [
               7.5828682999999995,
               45.04859
            ],
            [
               7.582795,
               45.0485149
            ],
            [
               7.582624999999999,
               45.0483233
            ],
            [
               7.581984899999999,
               45.047521599999996
            ]
         ]
      }
   }
];

【讨论】：