将图像添加到传单中的矩形多边形

Question

这是工作的JSFiddle

我需要将图像添加到矩形多边形中，并且不希望它在放大或缩小时重复并希望它被修复。任何建议将不胜感激，如果有任何其他方法可以实现。 如果可以将它放在 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);

Answer 1

这里最好使用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();

如果您总是在 GeoJSON 多边形之前创建图像，.bringToBack 可能是不必要的，但它确实确保图像叠加不会干扰其他图层交互。您可以使用 .toGeoJSON 从多边形对象创建一个临时 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/