javascript - 带孔的 GeoJson LineString 特征集合
问题描述
我有一长串坐标(由 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,输出
具有单一特征的示例
解决方案
实际上,渲染并没有错。您的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
]
]
}
}
];
推荐阅读
- java - Java:直接比较两个数字(a < b)与相减(ab < 0)
- ionic-framework - 当我使用 ionic build --prod 时,build 文件夹中的文件会随机消失并重新出现
- c# - 我应该在对其执行并行循环之前锁定一个列表吗?
- json - VS 代码、c++ 扩展、task.json 有没有办法将 args 分组到数组中并在任务中引用
- ruby - Powershell 和 Ruby 中不同的 SHA1 哈希结果
- go - 在go中写入parquet文件的时间戳格式是什么
- r - R - 仅对最接近的整数进行模糊连接
- r - 如何从我的计算机上加载我的数据框?
- java - 为什么应用程序强制我在 MainActivity.java 上出现按钮时依次使用它们?
- webpack - 如何使用 Webpack 4 正确编译 Sass 文件?