ArcGIS API for JavaScript 4.x 加載大量數據會卡頓

背景

 有個項目,本來數據量就幾千條點位數據,現在搞到了一萬多條,據說後期要五六萬條,加載圖標要40s以上,並且放大縮小的操作會導致(部分/全部)圖標消失,這正常人都受不了。

環境

 Win10

Chrome

ArcGIS API for JavaScript 4.18   Mapview  FeatureLayer

ArcGIS Server 10.4.1

問題

 在背景中有交代過,另外圖標還有殘缺的情況

嘗試過程

 在網上搜了好久,有說可以開啓WebGL,但後來看別的地方說4.x(具體從哪個版本開始已經記不清)默認就是WebGL。

還有一種方法就是用canvas:一種大數據渲染方法,看文章說加載百萬級的都沒問題。

 這塊資料很少,能做的就是這個。

解決方案

 FeatureLayer是用arcgis server發佈的,所以才慢。經過查找用GeoJsonLayer會快好多(Best/fastest way to display very large datasets in the ArcGIS JS API?)。

 我看到裏面的一個人的評論說可以用PostGIS來實現區域加載,這個後續可以嘗試。

I know this is an old post, but just adding my comments here in case it helps someone.  I often work with large GeoJSON datasets with Esri's JS API.  The very first thing I do is try to reduce the size of my GeoJSON file.  The easiest way to do this is normally by reducing the number of vertices in the features.  There are various ways to do this using Esri software.  If you don't have Esri software, you can use mapshaper.  This can reduce a 100MB GeoJSON file down to only 1MB without losing too much feature definition.  If the file is still not small enough, then you can decrease the precision of the coordinates, e.g. 12.34522153234 becomes 12.3.  This may make no difference to the how the data looks but can easily halve the file size.  To decrease the precision, I use Python, although this could be done easily via JavaScript if needed.  The other option that I looked at when my data was too big was using Postgres and only requesting the data in the current map extent (how normal ArcGIS Server map services work).  This worked fine.

翻譯:

  我知道這是一篇舊帖子,但只是在此處添加我的評論,以防它對某人有所幫助。我經常使用 Esri 的 JS API 處理大型 GeoJSON 數據集。我做的第一件事就是嘗試減小我的 GeoJSON 文件的大小。最簡單的方法通常是減少要素中的頂點數。使用 Esri 軟件可以通過多種方式完成此操作。如果您沒有 Esri 軟件,則可以使用 mapshaper。這可以將 100MB 的 GeoJSON 文件減少到僅 1MB,而不會丟失太多的功能定義。如果文件仍然不夠小,那麼您可以降低座標的精度,例如12.34522153234 變成 12.3。這可能對數據的外觀沒有影響,但可以輕鬆地將文件大小減半。爲了降低精度,我使用 Python,儘管如果需要,這可以通過 JavaScript 輕鬆完成。當我的數據太大時,我查看的另一個選項是使用 Postgres 並且只請求當前地圖範圍內的數據(ArcGIS Server 地圖服務的正常工作方式)。這工作得很好。

參考網址

要素圖層性能提升

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章