一、把图片放到地图上(有两种方法实现,这两种方式都需要下载js文件并引入项目中)
- 1、第一种(L.imageTransform:https://github.com/ScanEx/Leaflet.imageTransform)
var anchors = [
[56.344, 136.595],
[56.344, 137.878],
[55.613, 137.878],
[55.613, 136.595]],
clipCoords = [
[56.301, 136.905],
[56.150, 137.839],
[55.639, 137.531],
[55.788, 136.609],
[56.301, 136.905]],
transformedImage = L.imageTransform('img/image.jpg', anchors, { clip: clipCoords });
transformedImage.addTo(map);
- 2、第二种(L.imageOverlay.rotated:https://github.com/IvanSanchez/Leaflet.ImageOverlay.Rotated)
var topleft = L.latLng(40.52256691873593, -3.7743186950683594),
topright = L.latLng(40.5210255066156, -3.7734764814376835),
bottomleft = L.latLng(40.52180437272552, -3.7768453359603886);
var overlay = L.imageOverlay.rotated("./palacio.jpg", topleft, topright, bottomleft, {
opacity: 0.4,
interactive: true,
attribution: "© <a href='http://www.ign.es'>Instituto Geográfico Nacional de España</a>"
}).addTo(map);
二、 把视频放到地图上(L.videooverlay:https://leafletjs.com/examples/video-overlay/)
var videoUrls = [
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];
var bounds = L.latLngBounds([[ 32, -130], [ 13, -100]]);
var videoOverlay = L.videoOverlay( videoUrls, bounds, {
opacity: 0.8
}).addTo(map);