Leaflet.js保留imageOverlay长宽比并定义中心点

时间:2019-06-16 21:53:04

标签: javascript leaflet openstreetmap

我正在使用传单来绘制几个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);
}

这有点乏味,因为每个图像的大小都不同,所以我需要计算每个矩形的坐标。

我希望继承图像的长宽比,只需绘制一个中心点(也许是宽度?)

这可能吗?

0 个答案:

没有答案