我正在使用传单来绘制几个imageOverlay。
目前,我正在使用矩形来绘制图像叠加层的位置。
这里是一个小提琴:https://jsfiddle.net/postcolonialboy/g87op2zq/108/
查看此处:
var osmUrl = 'none',
osmAttrib = '',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
var map = new L.Map('map', {
layers: [osm],
center: new L.LatLng(30, 0),
zoom: 2,
attributionControl: false,
zoomControl:false,
});
var Img1 = [
[69.625, -25.125],
[69.625, -16.75],
[75.625, -16.75],
[75.625, -25.125]
];
var geojson = [{
"type": "Feature",
"properties": {
"name": "Comment",
"url": "http://i.imgur.com/ktPFJKC.jpg",
"status": "red",
"size": 2
},
"geometry": {
"type": "Polygon",
"coordinates": [Img1]
}
},
];
//set the options for the GeoJSON image interaction box
var boxOptions = {
fillOpacity: 0,
opacity: 0.0,
onEachFeature: onEachBox
};
//create the image interaction box
var imageBox = L.geoJson(geojson, boxOptions).addTo(map);
//zoom in to fit GeoJSON layer
map.fitBounds(imageBox.getBounds());
//GeoJSON interactivity functions
function onEachBox(feature, layer) {
console.log(layer.getBounds());
L.imageOverlay(feature.properties.url, layer.getBounds()).addTo(map).bringToBack();
layer.bindPopup("" + feature.properties.name);
}
这有点乏味,因为每个图像的大小都不同,所以我需要计算每个矩形的坐标。
我希望继承图像的长宽比,只需绘制一个中心点(也许是宽度?)
这可能吗?