leaflet——把图片放到地图上（L.imageTransform或者L.imageOverlay.rotated），leaflet——把视频放到地图上（L.videooverlay）

一、把图片放到地图上（有两种方法实现，这两种方式都需要下载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: "&copy; <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);