Question

这是工作JSFiddle

我需要的是将图像添加到矩形多边形中，并且也不希望它在放大或缩小时重复自身并希望它被修复。任何建议将不胜感激，如果有任何其他方式可以实现。如果它可以放在geojson中，那将是很好的，因为我必须为每个多边形提供一些属性。并动态创建所有的rect多边形。

代码在

之下

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/

在传单中将图像添加到rect多边形

1 个答案: