Javascript 传单.js保留图像覆盖纵横比并定义中心点

Javascript 传单.js保留图像覆盖纵横比并定义中心点,javascript,leaflet,openstreetmap,Javascript,Leaflet,Openstreetmap,我用传单画了几张图片 目前,我正在使用矩形来绘制图像覆盖的位置 这是一把小提琴: 请看这里: 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

我用传单画了几张图片

目前,我正在使用矩形来绘制图像覆盖的位置

这是一把小提琴:

请看这里:

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);
}
这有点乏味,因为每个图像都有不同的大小,所以我需要计算每个矩形的坐标

我更愿意继承图像的纵横比,简单地绘制一个中心点(可能还有一个宽度?)

这可能吗