leaflet js:将POI绘制为画布

Question

我想用Leaflet绘制许多地理点.因此,我想使用HTML5画布来提高性能.我的数据是geoJSON.正如我在Leaflet的文档中看到的那样,不可能将地理位置绘制为画布.

var anotherGeojsonLayer = new L.GeoJSON(coorsField, {
        pointToLayer: function (latlng){
            return new L.Marker(latlng, {
                icon: new BaseballIcon()
            });
        }
    });

我想我应该联系到这里:

pointToLayer:function(latlng){}

有人知道如何将我的latlng对象绘制为画布吗？

Answer 1

我是Leaflet的作者.您可以使用L.CircleMarker而不是常规Marker,并使用实验性L_PREFER_CANVAS开关将矢量渲染为Canvas(而不是SVG),如下所示:https://github.com/CloudMade/Leaflet/blob/master /debug/vector/vector-canvas.html

Answer 2

扩展原始答案,以防任何人需要Leaflet 1.0.您应该仍然使用L.circleMarker() (Leaflet circleMarker文档)而不是L.marker(),但使用画布的方式已经改变.

在Leaflet 1.0中,实验L_PREFER_CANVAS开关已升级为官方地图选项preferCanvas (Leaflet preferCanvas文档).

var map = L.map('mapid', {
        preferCanvas: true
    });

或者,您可以显式设置画布渲染器; 我认为这与preferCavas选项的作用相同.这是canvas的Leaflet文档.

var map = L.map('mapid', {
        renderer: L.canvas()
    });

这些选项(preferCanvas: true或renderer: L.canvas())中的任何一个L.circleMarker()都明显快于使用的常规图层L.marker().