帶孔的 GeoJson LineString 特征集合

Question

我有一長串坐標（由 GPS 傳感器發送）代表資產的移動。

我正在使用 leaflet 渲染 GeoJSON，如果我將 LineString 渲染為單個特征，它工作正常，但如果我將它分解為多個特征（在 FeatureCollection 內 - 應用不同的動態顏色）我開始看到“洞“特征之間。

我很確定這是因為我收到的數據中實際上存在一個“漏洞”。 但是為什么它作為一個單一的 LineString 功能工作呢？ 有沒有辦法來解決這個問題？

這是 GeoJSON 的摘錄（非常大的對象）

object 的 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

Answer 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
            ]
         ]
      }
   }
];