dom-layer、image-layer、tile-layer、tilemap 分别代表什么呢？或者说他们的职能？

[syks0121]

不好意思打扰您了，我是个刚学JS的菜鸟，想学习您的代码进而学会如何布置瓦片地图，但是基础实在薄弱，能帮忙指导一下吗？想了解大概的框架和思路

[qiuxiang]

tilemap 是整个地图的封装，也是入口，实现手势识别，统筹各个 layer 并进行绘制。tilemap 本身不绘制任何东西，各个 layer 才是提供具体的绘制，layer 可以理解为图层。tilemap 是按顺序调用各个 layer 的 draw 方法：

canvas-tilemap/src/tilemap.ts

Lines 190 to 213 in 2ba0bc6

	draw() {
	const now = Date.now();
	if (now != this.lastDrawTime) {
	requestAnimationFrame(() => {
	const { canvas2d, canvas, offset } = this;
	canvas2d.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
	canvas2d.clearRect(0, 0, canvas.width, canvas.height);
	canvas2d.translate(offset[0], offset[1]);
	for (const layer of this.tileLayers) {
	layer.draw();
	}
	for (const layer of this.imageLayers) {
	layer.draw();
	}
	for (const layer of this.markerLayers) {
	layer.draw();
	}
	for (const layer of this.domLayers) {
	layer.draw();
	}
	});
	this.lastDrawTime = now;
	}
	}

[qiuxiang]

整个地图都是用 canvas 来绘制的，上面也提到了，tilemap.draw() 是总的绘制，而具体绘制是由各个 layer.draw() 提供的。

[qiuxiang]

tilemap.draw() 通常是由手势识别触发的：

canvas-tilemap/src/gesture.ts

Line 215 in 2ba0bc6

this.map.draw();

当然，必要的时候也可以调用 tilemap.draw() 来触发一帧的渲染。

[qiuxiang]

tile-layer 提供瓦片图绘制。

marker-layer 提供标记绘制。

image-layer 提供贴图绘制，和 marker-layer 的区别是 image 随地图一起缩放，而 marker 固定大小。

dom-layer 是把一个 dom 固定到地图上的某个位置。

[qiuxiang]

最好的方法是看从例子入手，然后结合调试，比如这个项目的例子：
https://github.com/qiuxiang/canvas-tilemap/blob/main/example/index.ts

这里有一个更复杂的例子，用到了所有的功能，目前这个库就是为这个项目开发的：
https://github.com/kongying-tavern/lightweight-genshin-maps