leaflet引入图片作为地图

leaflet引入图片作为地图

HTML：

<div id="map"></div>

JS：
data中声明的值：

heatmapLayer:null,
map:null,

initMap(){
     let imageUrl = 图片路径;//绝对路径
     var map = L.map('map', {
                    zoom: 5,//初始地图缩放级别
                    minZoom:-5,//地图的最小缩放级别
                    maxZoom: 5,//地图的最大缩放级别
                    crs: L.CRS.Simple,//*要使用的坐标参考系，如果不确定不要随便更改
                });
     var bounds = [[0,0], [758,729]];
     L.imageOverlay(imageUrl, bounds).addTo(map);
     map.fitBounds(bounds);
}

leaflet icon 缩放偏移问题
JS：

import icon from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png'

let DefaultIcon = L.icon({
                    iconUrl: icon,
                    shadowUrl: markerShadow,
                    iconSize: [25, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    tooltipAnchor: [16, -28],
                    shadowSize: [41, 41]
                });
L.Marker.prototype.options.icon = DefaultIcon;

在地图中添加marker

let marker = L.marker([lat,lng],{draggable: true}).addTo(this.map).bindPopup(`${弹框点击提示文字}`);

在地图中添加marker并打开提示框

let marker = L.marker([lat,lng],{draggable: true}).addTo(this.map).bindPopup(`${弹框点击提示文字}`).openPopup();

在marker中添加事件

marker.on('dragend', function (event) {
    //marker拖拽的拖拽事件，拖拽结束时获取当前marker坐标
   console.log(marker.getLatLng());
})

在marker中绑定Tooltip

marker.bindTooltip("my tooltip text").openTooltip();

在地图中添加热力图

if(this.heatmapLayer){//如果有先关闭之前的
   this.map.removeLayer(this.heatmapLayer);
}

// 数据
var testData = {
	max: 8,
	data: [
		{ lat: 24.6408, lng: 46.7728, count: 133 },
		{ lat: 50.75, lng: 3.55, count: 135 },
		{ lat: 551.55, lng: 35.55, count: 964 },
		{ lat: 352.65, lng: 5.45, count: 835 },
		{ lat: 453.45, lng: 45.35, count: 753 },
		{ lat: 154.35, lng: 6.25, count: 671 },
		{ lat: 5.25, lng: 15.15, count: 465 }
	]
};
// 配置
var cfg = {
	radius: 2,//设置每一个热力点的半径
	maxOpacity: 0.9,        //设置最大的不透明度
	minOpacity: 0.3,     //设置最小的不透明度
	scaleRadius: true,      //设置热力点是否平滑过渡
	blur: 0.95,             //系数越高，渐变越平滑，默认是0.85, 滤镜系数将应用于所有热点数据。
	useLocalExtrema: true,  //使用局部极值
	latField: 'lat',   //维度
	lngField: 'lng',  //经度
	valueField: 'count',    //热力点的值
};
let heatmapLayer = new HeatmapOverlay(cfg); 
heatmapLayer.addTo(this.map);
heatmapLayer.setData(testData);
this.heatmapLayer = heatmapLayer

//关闭热力图

this.map.removeLayer(this.heatmapLayer);
this.heatmapLaye=null;

注：上面引入图片作为地图，后引入热力图，地图图片在热力图上层，看不到热力图
解：在css中提高热力图层级

#map .leaflet-zoom-hide{
    z-index: 2;
}