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);
}
这有点乏味,因为每个图像都有不同的大小,所以我需要计算每个矩形的坐标
我更愿意继承图像的纵横比,简单地绘制一个中心点(可能还有一个宽度?)
这可能吗