2022年2月16日遇到的问题

为了公司需求开始学习WebGL，遇到的问题

问题1：如何将canvas绘制的图形添加到leaflet绘制的地图上

解决方法（来自我的百度，侵删）：

使用divIcon，将canvas作为一个自定义元素引入

例子：

var myIcon = L.divIcon({
        html: '<canvas style="z-index: 1;opacity:1" id="myCanvas" width="100" height="100"></canvas>',
        iconSize: [100, 100],
        iconAnchor: [50, 50],
      })

问题2：引入的canvas图形中心并不在设置的坐标点上

解决办法（来自本人查看官方api得出的结果）：在L.divIcon中设置标记大小的下面添加iconAnchor: [50, 50]（里面的参数为canvas画布的一半），如上个问题解决方法那样

问题3：如何设置引入的canvas图形按照地图进行缩放（只适用于画布为规则图形的）

解决方法（来自某个leaflet插件的提示）：

（1）使用map.latLngToContainerPoint(参数为坐标LatLng)方法拿到中心坐标位于当前地图控件的像素位置
（2）使用map.latLngToContainerPoint(参数为坐标LatLng)方法拿到边缘坐标位于当前地图控件的像素位置
（3）使用Math.abs（）方法拿到俩位置相减后的绝对值
（4）使用以下方法计算两坐标的距离

  const findHypotenuse = (base, perpendicular) => {
    const bSquare = base ** 2
    const pSquare = perpendicular ** 2
    const sum = bSquare + pSquare
    const hypotenuse = Math.sqrt(sum)
    return hypotenuse
  }

（5）设置canvas的初始长宽为100px(方便计算)，然后与计算出的两点距离进行比较，将得到的比例保存起来
（6）使用 zoomend事件监听地图缩放，如下

map.on("zoomend", e => {
    c.style.transform = "scale(" + 之前计算的比例 + ")"
  })

其中c为canvas元素

缺陷：图形缩放会有一个较大的延迟，因为zoomend是当地图缩放完后才执行的事件，所以有个明显的间隔

2022年2月28日，对在leaflet地图上绘制canvas的改进方法

（1）问题一改进

依旧使用divIcon将canvas图形添加到地图上，但是divIcon的iconSize和iconAnchor两个属性全部设置为0，然后使用

// canvas为图形的dom
canvas.style.transform =
      "translate(" + -图形宽度 / 2 + "px," + -图形高度 / 2 + "px)"
// ctx为画布
ctx.translate(-图形宽度 / 2, -图形高度 / 2)

就可将图形正确的安放到地图的中心点上

（2）问题二改进

不使用之前直接修改canvas的缩放，这样会导致图形模糊，代码中的图形宽度和高度，为图形要变成的宽度和高度

    // 必须按照这个顺序书写，要不然会出现图形只有一部分的现象
    // canvas为canvas元素的dom，ctx为画布
    canvas.style.transform =
      "translate(" + -图形宽度 / 2 + "px," + -图形高度 / 2 + "px)"
    ctx.translate(-图形宽度 / 2, -图形高度 / 2)

    canvas.setAttribute("width", 图形宽度)
    canvas.setAttribute("height", 图形高度)
    ctx.scale(图形放大的比例, 图形放大的比例)

加油！！！！！！