使用自定義Mapbox樣式的內部GeoJSON數據作爲源

我目前正試圖渲染地圖，數據來自shapefiles（轉換成GeoJSON），上傳到Mapbox的服務器。使用自定義Mapbox樣式的內部GeoJSON數據作爲源

我演示輸出可瀏覽： https://ciatph.github.io/amia-lowres-hover.html

我想，詢問我是否已經呈現在地圖有效地在演示頁面中使用。到目前爲止，我有：

上傳一個GeoJSON的數據集
導出的數據集爲地形設置
添加了地形設置成風格
使用的樣式來加載初始base map
使用上傳的數據集作爲另一個數據源層（在最初的地圖上）。這層監聽和響應鼠標懸停並單擊事件
使用的上傳數據集作爲數據源爲另一個層使用濾鏡設置不同的顏色懸停區域在步驟＃5所創建的圖層。

Screenshot of relevant Mapbox script

我對這種做法的問題是：

有沒有辦法使用的map.addSource樣式的內部（GeoJSON的）數據集（）的一部分，一種方法，使得不需要爲創建交互式圖層重新加載或重新定義？如果在此時再次重新下載，我擔心網絡活動。我也有興趣知道這是否可能，因爲我們擁有幾乎100MB大的GeoJSON數據。當從Amazon S3臨時服務器移動到mapbox時，它會自動轉換爲Tileset，並且沒有爲使用map.addSource（）而創建的數據集。我可以將Mapbox的默認樣式用於底圖（即mapbox ：// styles/mapbox/streets-v9），並省略步驟＃4。如果我採用這種方法，數據集加載（對於步驟＃5）是否對大數據有效且足夠快，而不是通過Style使用還是加載？

我希望你能幫助我與我的查詢和開導我的更實用和有效的方法。謝謝。

來源

2017-08-10 raiser00

讓我們首先澄清你目前的情況：

你style包含ID ciatph.cj64in9zo1ksx32mr7ke3g7vb-93srz矢量地形設置，提到在樣式爲amia-lowres-tileset的composite矢量瓷磚源內。
它也可以通過ID ciatph/cj64in9zo1ksx32mr7ke3g7vb作爲數據集訪問，因爲您已將其作爲數據集上載。
您的腳本正在加載運行時的數據集。

我沒有看到任何理由需要引用數據集而不是tileset。因此，請刪除添加數據集的代碼，並更新這兩種樣式以代替瓦片集（source: "composite"）。

// Only used for coloring hover effect. Data informatiion be retrieved from styles alone 
    /*  
    map.addSource("dataSource", { 
     "type": "geojson", 
     'data': 'https://api.mapbox.com/datasets/v1/ciatph/cj64in9zo1ksx32mr7ke3g7vb/features?access_token=pk.eyJ1IjoiY2lhdHBoIiwiYSI6ImNqNXcyeTNhcTA5MzEycHFpdG90enFxMG8ifQ.gwZ6uo6pvx4-RZ1lHODcBQ' 
    });  
    */ 

    // add layer to color the raw source data 
    map.addLayer({ 
     'id': 'municipalities', 
     "type": "fill", 
     "source": "composite", 
     "source-layer": "amia-lowres-tileset", 
     "layout": {}, 
     "paint": { 
      "fill-color": "#627BC1", 
      "fill-opacity": 0.5 
     } 
    }); 

    // add a conditional layer to play over the source data on hover event 
    map.addLayer({ 
     "id": "state-fills-hover", 
     "type": "fill", 
     "source": "composite", 
     "source-layer": "amia-lowres-tileset", 
     "layout": {}, 
     "paint": { 
      "fill-color": "#ff4", 
      "fill-opacity": 1 
     }, 
     "filter": ["==", "MUNI_CITY", ""] 
    });

https://codepen.io/stevebennett/pen/OjvMWO

來源

2017-08-20 04:14:30

非常感謝您對您的解決方案和詳細的解釋，@Steve貝內特。 **來源：「複合」**圖層來源使我的一天:) – raiser00

使用自定義Mapbox樣式的內部GeoJSON數據作爲源

回答

相關問題