如何使用瓦片层点映射传单热图层图层

Question

我是非地图图像，如地板图像。

通过使用Leaflet image-Overlay我加载这些图像，并在Leaflet-heat插件的帮助下，我在该图像上生成热图层。

但热图位置和图像坐标不匹配。

请帮我解决这个问题。

我的输出图片：My Output

图像黄色框中的黑点是我必须生成热图的点。

我在下面提到了这几点的坐标。

＆＃13;

＆＃13;

var imgDimensions={width:1713, height:1625};
var map = L.map('map',{
	maxZoom: 0,
	minZoom: 0,
	crs:L.CRS.Simple
}).setView([imgDimensions.height/2, imgDimensions.width/2],0);

var imageUrl = "D:/Jithu/LeafLet/images/Floor1.png";
var imageBounds = [
	[imgDimensions.width , 0],
	[0, imgDimensions.height]
];

L.imageOverlay(imageUrl, imageBounds).addTo(map);

addressPoints = addressPoints.map(function (p) {
	var contPoint = map.layerPointToContainerPoint(L.point(p[0],p[1]));
	var latlong = map.layerPointToLatLng(layerPoint);
	return [latlong.lat,latlong.lng,p[2]]; 
});

var heat = L.heatLayer(addressPoints, {
	minOpacity:0.0,
	max:1.0,
	radius: 10,
	gradient:{
		0.4: 'blue', 
		0.65: 'lime',
		1: 'red'
	}
}).addTo(map);

// addressPoints.js
//[X-cord, Y-cord, Intensity]
var addressPoints = [
  [637, 383, 1],
  [724, 397, 0.5],
  [682, 444, 0.5],
  [714, 515, 1],
  [589, 500, 1]
];

＆＃13;

<div id="map" style="width: 1713px;height: 1625px"></div>

＆＃13;

＆＃13;

＆＃13;