如何在Leaflet中将GeoJSON点添加为矢量图块? [英] How to add GeoJSON points as a vector tile in Leaflet?

问题描述

我已经阅读了所有关于Stack Overflow的问题，并在网络上找到了将GeoJSON矢量图块添加到传单地图上的每个示例.不幸的是，我仍然无法解决这个问题，更不用说让它在我的数据上起作用了.

I've read through every question on Stack Overflow I can find and every example I can find on the web for adding GeoJSON vector tiles to a leaflet map. Unfortunately I still can't manage to wrap my head around it, much less get it work on my data.

我有一个GeoJSON(此处)，其中有很多点.我可以将它很好地添加为Leaflet中的一层，因此我确信它是具有真实值的有效文件.

I have a GeoJSON (here) with many points. I can add it just fine as a layer in Leaflet, so I feel confident that it's a valid file with real values.

我尝试了 geojson-vt 和 geojson-vt不断返回错误:
Uncaught ReferenceError: z is not defined at <anonymous>:1:30
使用以下代码:

geojson-vt keeps returning an error:
Uncaught ReferenceError: z is not defined at <anonymous>:1:30
with this code:

geoJson = {data}
var tileOptions = {
    maxZoom: 18, 
    tolerance: 5, 
    extent: 4096,
    buffer: 64, 
    debug: 0, 
    indexMaxZoom: 0, 
    indexMaxPoints: 100000, 
};
var tileIndex = geojsonvt(geoJson, tileOptions);
var tile = tileIndex.getTile(z, x, y);

我很难诊断这个问题，因为我发现的所有示例都没有显示其数据，但也没有引用定义z，x和y的数据，而对于GeoJSON来说，这些都不是必需的值目的.我想念什么?

I'm having a lot of trouble diagnosing this because none of the examples I've found have shown their data, but also none have referenced defining z, x, and y, and those aren't required values for a GeoJSON object. What am I missing?

从另一个问题我了解到，传单矢量网格的GeoJSON点存在错误.我设法更改了一些源代码以解决最初的错误，但现在遇到了1,000多个错误，例如:
Error: <path> attribute d: Expected number, "MNaN,47.5aundefin…".

From another question of mine I learned that Leaflet vector grid has an error with GeoJSON points. I managed to change some of the source code to resolve the initial error, but now get over 1,000 errors like:
Error: <path> attribute d: Expected number, "MNaN,47.5aundefin…".

来自代码:
L.vectorGrid.slicer(geoJson).addTo(map)

from the code:
L.vectorGrid.slicer(geoJson).addTo(map)

如何将GeoJSON点作为矢量图块层添加到传单地图?是否有人有任何简单的示例作为数据参考?任何帮助或其他指示进行调查，将不胜感激.

How can I add GeoJSON points as a vector tile layer to a leaflet map? Does anyone have any simple examples with data as a reference? Any help or other directions to investigate would be appreciated.

推荐答案

我能够解决Leaflet.VectorGrid.Slicer遇到的问题.

I was able to resolve the issue I was experiencing with Leaflet.VectorGrid.Slicer.

首先，我下载了Leaflet.VectorGrid.js源代码并更改了此处 a>(请注意，这对应于 VectorGrid github网站).

First I downloaded the Leaflet.VectorGrid.js source code and changed the lines indicated here (note that that corresponds to lines 1483 to 1495 from the source code available on the VectorGrid github site).

然后，在进行故障排除之后，我发现如果在调用L.vectorGrid.slicer时添加了radius选项，则会将GeoJSON点添加到地图中.这是有效的代码:

Then, after troubleshooting, I found that if I added a radius option when calling L.vectorGrid.slicer, the GeoJSON points were added to the map. This is the code that worked:

var layer = L.vectorGrid.slicer(geoJson, { 
    vectorTileLayerStyles: {
        sliced: {
            radius: 1,
        }
    }
}).addTo(map);

这篇关于如何在Leaflet中将GeoJSON点添加为矢量图块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！