leaflet 把图片放到地图上L.imageTransform或者L.imageOverlay.rotated,把视频放到地图上L.videooverlay，把geoJson放到地图上,

1.把图片放到地图上：

   

 

 

2. 有两种方法实现，这两种方式都需要下载js文件并引入项目中，

  第一种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);

  第二种方式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);

3. 把视频放到地图上（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);

4. geoJson放到地图上：

    

//geojson数据
var data= [{
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "show_on_map": true
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
}, {
    "type": "Feature",
    "properties": {
        "name": "Busch Field",
        "show_on_map": false
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.98404, 39.74621]
    }
}];

//获取边界并放到地图上
var partyDistrictLayer = L.geoJson(data, {     //获取边界并定义
        style: {
          weight: 2,
          opacity: 1,
          color: 'red',
          dashArray: '4',
          fillOpacity: 0.2,
          fillColor: '#FFEDA0'
        },
        onEachFeature: ((feature, layer) => { //对每个小块进行定义
          layer.on({
            //mouseover：移入
            mouseover: ((e) => {
              var layer = e.target;
              layer.setStyle({
                weight: 5,
                color: '#666',
                dashArray: '',
                fillOpacity: 0.5
              });
              if (!L.Browser.ie && !L.Browser.opera) {
                layer.bringToFront();
              }
            }),
            //mouseout：移出
            mouseout: ((e) => {
              // that.partyDistrictLayer.resetStyle(e.target);     //恢复样式
              var layer = e.target;
              layer.setStyle({
                weight: 2,
                opacity: 1,
                color: 'red',
                dashArray: '4',
                fillOpacity: 0.2,
                fillColor: '#FFEDA0'
              });

            }),
            //click事件
            click: ((e) => {
              _map.fitBounds(e.target.getBounds());
              var code = parseInt(e.target.feature.id);
      

            })
          });
        })
      }).addTo(map);
map.fitBounds(partyDistrictLayer.getBounds());