ベクタタイルレイヤーでフィーチャデータを取得／表示する

Question

CodePenの例: https://codepen.io/dandormont-the-decoder/pen/OJmQZZy

私はFeatureレイヤーの代わりにベクタタイルレイヤーを表示しています。なぜならLeafletでのレンダリングがはるかに効率的だからです。また、別のホストされたレイヤーで基になるFeatureデータにもアクセスできます。説明のためにレイヤーに`bindPopup`呼び出しを追加しましたが、ご覧の通り何も動作しません。

クリックや他のジェスチャーで、基になるフィーチャについてのデータを取得して表示できればと思っています。ベクタタイルレイヤーの仕組みにはあまり詳しくありませんが、私の理解ではベクタデータには基になるフィーチャに関するメタデータがタグ付けされているはずで、それにアクセスする方法を探しています。

もしesri-leaflet-vectorで直接できない場合、mapbox-gl／maplibre-glオブジェクトに連携してそこからアクセスする方法はありますか？

ありがとうございます、

Dan

c_yatteau · Answer

Hello @DanielDormontl,

After looking into this issue further, it appears that Esri Leaflet will generally be good up to ~10k points/vertices on screen at any one time. My colleague suggested possibly switching to something like https://github.com/Esri/Leaflet.shapeMarkers which may be more performant to draw.

From an implementation perspective, when dealing with larger datasets, our ArcGIS Maps SDK for JS is the more efficient way to go when requesting and drawing features. This is due to the fact that Leaflet uses <svg> elements as opposed to WebGL like the Maps SDK for JS does when drawing features. Another advantage is the Maps SDK for JS request features in protocol buffer format which is more compact. For reference, I created this CodePen using the Maps SDK for JS and the UFO feature layer you provided.

In general, future performance improvements in these aspects for Esri Leaflet may occur but are not guaranteed. Please let me know if you have further questions or comments.

DanielDormont · Answer

Hi @c_yatteau ,

Thanks for that example, it's very helpful. And I see what you mean about the distance issue. It's a bit awkward but I think it may be the best option. And now that I think of it, in some of my live applications the user isn't actually clicking on an individual feature but rather "geofencing" by drawing a boundary around a set of features, and the geometry query against the feature service should be able to handle that nicely.

But I'm curious about your point 3 above. I'm having a lot of trouble getting complex feature layers to perform well with Leaflet. Here's another example of one that my colleague found which is a list of UFO Sightings: https://codepen.io/dandormont-the-decoder/pen/qByJpNM the page basically freezes. But the same data in a vector tile layer loads nicely, https://codepen.io/dandormont-the-decoder/pen/qByJpzz

(I'm not sure why one of them has big marker pins and the other little colored dots, I'm still learning my way around the style editor and such) This is a point layer with around 20,000 features, which doesn't seem like a massive number. Any suggestions?

Thanks,

Dan

c_yatteau · Answer

Hello Dan,

Thank you for your inquiry. I have a few comments that will hopefully address this issue.

* To access feature data while using Esri Leaflet, you'll need to query the features from the feature layer. Check out this CodePen I've created that displays a vector tile layer while querying the feature layer.
NOTE: You'll need to plug in an API key for the apiKey variable. Also note, you have included your API key in your CodePen. Be sure to exclude this in public links for security reasons.
* Unfortunately, when using the method I’ve given in the CodePen, there is no way to have the mouse change “on hover”. So, the simulation of clicking is a bit unpleasant. Also, note in the code, I change the distance parameter based on the zoom level since clicking becomes less or more accurate depending on how zoomed in you are.
* You’ve stated that a vector tile layer renders much more efficiently than a feature layer with Esri Leaflet. This is a generally true statement; however, recently we’ve improved the performance of Esri Leaflet feature layers. So, if you haven’t already, I’d encourage you to try using a feature layer with your data set.

I hope this helps and please let us know if you have any other questions.