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。