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

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属性。这是更新后的 fiddle:

https://jsfiddle.net/17Ld98fv/

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

add image to rect polygon in leaflet

leaflet