Leaflet.js Сохранение формата изображения imageOverlay и определение центральной точки - PullRequest
Новая
       12

Leaflet.js Сохранение формата изображения imageOverlay и определение центральной точки

0 голосов
/ 17 июня 2019

Я использую листовку для построения нескольких оверлеев изображения.

В настоящее время я использую прямоугольники для нанесения расположения оверлеев изображения.

Вот скрипка: 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);
}

Это немного утомительно, поскольку каждое изображение будет иметь разный размер, поэтому мне нужно рассчитать координаты для каждого прямоугольника.

Я бы предпочел наследоватьСоотношение сторон изображения - просто построить центральную точку (и, возможно, ширину?)

Возможно ли это?

...