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 documentation)代替L.marker()，但使用画布的方式已发生变化。

在Leaflet 1.0中，实验L_PREFER_CANVAS开关已升级为官方地图选项preferCanvas (Leaflet preferCanvas documentation)。

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

或者，您可以显式设置画布渲染器;我认为这与preferCavas选项的作用相同。这是Leaflet documentation for canvas。

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

使用preferCanvas: true的这两个选项（renderer: L.canvas()或L.circleMarker()）明显快于使用L.marker()的常规图层。

leaflet js：将POI绘制为画布

2 个答案: