[英]Add border layer to offline map using leaflet
我已經使用傳單和圖塊制作了離線地圖。 這些圖塊不包含國家邊界或州邊界。 我想將所有國家/地區的邊界以及州邊界添加到這些磁貼中。 這是構建地圖的代碼。
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);
這是沒有任何邊界線的地圖圖塊。 如何使用傳單添加邊框層。
我期望輸出看起來像
首先,您需要定義“邊界層”的點的緯度/經度對。 最好以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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.