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

这是工作票

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

var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'，
osmAttrib='&复制；投稿人,，
osm=L.tileLayer（osmUrl，{maxZoom:18，attribution:osmAttrib}）；
var map=newl.map（'map'，{layers:[osm]，中心：newl.LatLng（24121），缩放：9}）；
变量状态=[{
“类型”：“功能”，
“财产”：{“政党”：“共和党”}，
“几何学”：{
“类型”：“多边形”，
“坐标”：[[
[-104.05, 48.99],
[-96.58,  45.94],
[-104.03, 45.94],
[-104.05, 48.99]
]]
}
}, {
“类型”：“功能”，
“财产”：{“党”：“民主党”}，
“几何学”：{
“类型”：“多边形”，
“坐标”：[[
[-109.05, 41.00],
[-102.03, 36.99],
[-109.04, 36.99],
[-109.05, 41.00]
]]
}
}];
变量poly1=[
[24, 121],
[24.5, 121],
[24.5, 121.9],
[24, 121.9]
];
多边形（poly1，{fill:'url(http://i.imgur.com/ktPFJKC.jpg)'}）.addTo（map）；
L.geoJson（美国）{
风格：功能（特征）{
开关（feature.properties.party）{
案例'Republican'：返回{color:'#ff0000'}；
案例‘民主党人’：返回{color:#0000ff“}；
}
}
}).addTo（地图）；

这里最好的做法是使用一个专门为这种情况设计的。可以使用多边形对象的坐标创建图像覆盖和位于其上的不可见GeoJSON层。如果要以与示例相同的格式动态创建多边形对象，则可以在创建图像覆盖时参考角点的索引，如下所示：

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属性。这里是一个更新的小提琴：

---

这里最好的做法是使用一个专门为这种情况设计的。可以使用多边形对象的坐标创建图像覆盖和位于其上的不可见GeoJSON层。如果要以与示例相同的格式动态创建多边形对象，则可以在创建图像覆盖时参考角点的索引，如下所示：

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属性。这里是一个更新的小提琴：

---

有几个简单的错误（我的假设正确吗？）。首先，在创建

geojson

之前，需要定义

poly1

和

poly2

对象。第二个是坐标问题。虽然传单要求将点指定为[lat，lon]，但GeoJSON需要将点指定为[lon，lat]。您将看到，如果将

L.geoJson

的不透明度设置为1，则框显示在印度洋，而一个图像覆盖显示在格陵兰岛上，另一个图像覆盖丢失（纬度高于90无效）。因此，我如何纠正这一点，因为将有大约40个元素，img url应该只从geojson中获取，因为现在它是从您定义的变量中获取的。我应该指出，您实际上可以非常轻松地从geojson创建图像覆盖的边界框。将其添加到

onEachBox

函数：

L.imageOverlay（feature.properties.url，layer.getBounds（））.addTo（map.bringToBack（）一切都应该正常工作。请看：有几个简单的错误（我的假设正确吗？）。首先，在创建
geojson
之前，需要定义
poly1
和
poly2
对象。第二个是坐标问题。虽然传单要求将点指定为[lat，lon]，但GeoJSON需要将点指定为[lon，lat]。您将看到，如果将
L.geoJson
的不透明度设置为1，则框显示在印度洋，而一个图像覆盖显示在格陵兰岛上，另一个图像覆盖丢失（纬度高于90无效）。因此，我如何纠正这一点，因为将有大约40个元素，img url应该只从geojson中获取，因为现在它是从您定义的变量中获取的。我应该指出，您实际上可以非常轻松地从geojson创建图像覆盖的边界框。将其添加到
onEachBox
函数：
L.imageOverlay（feature.properties.url，layer.getBounds（））.addTo（map.bringToBack（）一切都应该正常工作。见：