使用小冊子將邊框圖層添加到離線地圖

Question

我已經使用小冊子和圖塊製作了離線地圖。這些瓷磚不包含國家邊界或國家邊界。我想添加所有國家邊界以及國家邊界到這些瓷磚。這是建築物地圖的代碼。

var map = L.map('map').setView([33.705, -84.3900], 4); 
      L.tileLayer('tiles/{z}/{x}/{y}.png', { 
      attribution: '© <a>ABC</a>', 
      maxZoom: 11, 
      minZoom: 4 
     }).addTo(map); 

     map.attributionControl.setPrefix(''); 
     var london = new L.LatLng(51.505, -0.09); 
     map.addLayer(london); 

這是沒有任何邊框線的地圖瓷磚。如何使用傳單添加邊框圖層。

我期待輸出應該像

Answer 1

那麼首先您需要點的緯度/經度對定義該「邊界層」。如果你有geoJSON格式的那些點，這將是最好的。一旦你有了這些數據，你可以遍歷這些點並連接它們並創建一個圖層。

var states = [{ 
"type": "Feature", 
"properties": {"party": "Republican"}, 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[ 
     [-104.05, 48.99], 
     [-97.22, 48.98], 
     [-96.58, 45.94], 
     [-104.03, 45.94], 
     [-104.05, 48.99] 
    ]] 
} 
}, { 
"type": "Feature", 
"properties": {"party": "Democrat"}, 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[ 
     [-109.05, 41.00], 
     [-102.06, 40.99], 
     [-102.03, 36.99], 
     [-109.04, 36.99], 
     [-109.05, 41.00] 
    ]] 
} 
}]; 
L.geoJson(states, { 
style: function(feature) { 
    switch (feature.properties.party) { 
     case 'Republican': return {color: "#ff0000"}; 
     case 'Democrat': return {color: "#0000ff"}; 
    } 
} 
}).addTo(map); 

當然，這些點需要在邏輯上分組，所以你可以連接正確的點。一定要看看這個鏈接http://leafletjs.com/examples/choropleth.html