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。

 

转载自:https://blog.csdn.net/weixin_40184249/article/details/82530064

You may also like...