在leaflet地图中画自定义覆盖物，使用自己的图标，如果图标的宽高和Point(x, y)的大小不匹配，则会出现覆盖物漂移问题。
1-1 覆盖物漂移图 注:圈中的覆盖物偏移了原来的正确位置
这个时候，我们要设定正确的值，使Leaflet的Point(x, y)对象的中心点和覆盖物中心点对应。
1-2 覆盖物和Image 的关系
如图1-2所示，覆盖物Point(x,y)的宽高分别为x,y，我们要将Image和Point（x,y)的中心设置在相同位置上，此时在canvas的drawImage()方法中应该将参数x,y设置为x',y'
/**
* drawImage(img, x, y) 应该为x',y'，这时image才能在Point覆盖物的中心位置
* 其中 x' = (A-image.with/2), y' = (B - image.height/2)
* */
img.onload = function(){
//平移坐标原点
ctx.translate(90, 30);
console.log('y: ' + course)
//旋转画布
ctx.rotate(course);
ctx.translate(-90, -30);
//画图
ctx.drawImage(img, x', y');
}
设置好之后，测试效果如下
1-3 正确位置效果图
网友评论