添加圖像在單張RECT多邊形

這裏是工作JSFiddle 添加圖像在單張RECT多邊形

什麼，我需要的是添加圖片到矩形的多邊形，而且也不希望它重演放大或縮小時，因爲和希望它是固定。任何建議將不勝感激，如果有任何其他方式來實現。如果它可以被放置在geojson中，那將會很棒，因爲我必須給每個多邊形賦予一些屬性。並動態創建所有矩形多邊形。

代碼如下

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
     osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors', 
     osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}); 
var map = new L.Map('map', {layers: [osm], center: new L.LatLng(24, 121), zoom: 9}); 
var states = [{ 
"type": "Feature", 
"properties": {"party": "Republican"}, 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [[ 
     [-104.05, 48.99], 
     [-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.03, 36.99], 
     [-109.04, 36.99], 
     [-109.05, 41.00] 
    ]] 
} 
}]; 
var poly1 = [ 
[24, 121], 
[24.5, 121], 
[24.5, 121.9], 
[24, 121.9] 
]; 
L.polygon(poly1, {fill:'url(http://i.imgur.com/ktPFJKC.jpg)'}).addTo(map); 
L.geoJson(states, { 
style: function(feature) { 
    switch (feature.properties.party) { 
     case 'Republican': return {color:'#ff0000'}; 
     case 'Democrat': return {color: "#0000ff"}; 
    } 
} 
}).addTo(map);

來源

2016-02-29 Ratish

在這裏做的最好的事情是使用ImageOverlay，這是專爲正是這種情況。您可以使用多邊形對象的座標來創建圖像疊加層和位於其上的不可見GeoJSON圖層。如果你是動態創建的格式相同例子poly1多邊形對象，那麼你可以在創建圖像疊加時引用這樣的角點的指數：

var imageUrl = 'http://i.imgur.com/ktPFJKC.jpg'; 
var imageBounds = L.latLngBounds([ 
    poly1[0], 
    poly1[2] 
    ]); 

var imageLayer = L.imageOverlay(imageUrl, imageBounds).addTo(map).bringToBack();

的.bringToBack可能是不必要的，如果你總是在GeoJSON多邊形之前創建圖像，但確保圖像疊加不會干擾其他圖層交互。您可以從多邊形對象使用臨時GeoJSON的對象，並設置任何你喜歡的GeoJSON內容：

var polyTemp = L.polygon(poly1).toGeoJSON(); 
polyTemp.properties.name = 'pineapple';

然後創建一個無形L.GeoJSON層處理的相互作用：

var boxOptions = {fillOpacity:0, opacity:0, onEachFeature: onEachBox}; 
var imageBox = L.geoJson(polyTemp, boxOptions).addTo(map); 

function onEachBox(feature, layer) { 
    layer.bindPopup("Hello, I'm a " + polyTemp.properties.name); 
}

的onEachBox功能這裏當然只是一個例子來說明你可以訪問GeoJSON屬性。下面是一個更新的小提琴：

https://jsfiddle.net/17Ld98fv/

來源

2016-02-29 22:30:47 nathansnider

感謝ü的解釋和清除懷疑。 – Ratish

有幾個簡單的錯誤（我是否正確假設[這是小提琴]（http://jsfiddle.net/17Ld98fv/1/）？）。首先，你需要在創建你的geojson之前定義你的'poly1'和'poly2'對象*。其次是座標問題。雖然Leaflet需要將點指定爲[lat，lon]，但GeoJSON需要它們爲[lon，lat]。你會發現，如果你將L.geoJson的不透明度設置爲1，那麼這些框會出現在印度洋，而格陵蘭島上出現一個圖像疊加層，而另一個圖像疊加層缺失（90度以上的緯度無效）。 http://jsfiddle.net/nathansnider/17Ld98fv/2/ – nathansnider

所以我該如何糾正這個問題，因爲將會有大約40個元素，img url只能從geojson中獲取，因爲現在它正從您定義的變量中獲取。 – Ratish

添加圖像在單張RECT多邊形

回答

相關問題