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

1.把图片放到地图上：

• 有两种方法实现，这两种方式都需要下载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: "© Instituto Geográfico Nacional de España"
	}).addTo(map);

2. 把视频放到地图上

• 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);

3. 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());