LeaFlet如何和canvas结合进行绘图

前言：canvas是一个非常好的东西，但是这个东西如何与leaflet进行结合，翻了一遍LeaFlet的API没有发现如何用canvas和LeaFlet相结合，难道两者无法集合天无绝人之路，最终我还是找到了DivIcon相结合，能达到目的。也可以利用DivIcon做一些简单的动画，当然也可以同样结合canvas进行绘图动画，下面就看一下如何结合：

效果图：

一、声明DIVIcon

        var myIcon = L.divIcon({
            html: '<canvas id="tutorial" width="300" height="300"></canvas>',
            //className: 'css_animation',
            iconSize: 10,
            bgPos: [31.864942016, 117.2882028929]
        });
        L.marker([31.864942016, 117.2882028929], { icon: myIcon}).addTo(map);

二、canvas绘图函数封装

        function draw() {
            var canvas = document.getElementById('tutorial');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgb(200,0,0)";
            //绘制矩形
            ctx.fillRect(10, 10, 55, 50);

            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect(30, 30, 55, 50);
        }
        draw();

三、总结

该方法有个问题就是画出来canvas图像有偏移，因为canvas画布的原点刚好在你需要设置的地方，向right有个宽度，向bottom有个高度？如何把canvas中心点平移到设置到经纬度上，这个需要你封装一个函数进行在原经纬上适当减小，这是我的解决方法，上图那个小白四方块就是经纬度点。

关于如何进行实时进行绘制解决方案：

 

画图封装一个方法和地图地图zoomlevelschange事件结合一下进行重绘，在用Marker的setIcon方法添加新的DivIcon。