传单 js：将 POI 绘制为画布

Posted 2023-02-16

【中文标题】传单 js：将 POI 绘制为画布

【英文标题】：leaflet js: draw POIs as canvas

【发布时间】：2012-04-10 09:32:33

【问题描述】：

我想用 Leaflet 绘制许多地理点。因此我想使用 html5 画布来提高性能。 我的数据源是geoJSON。正如我在 Leaflet 的文档中看到的，目前还不能将地理位置绘制为画布。

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

我想我应该在这里联系：

pointToLayer: 函数 (latlng)

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

【参考方案1】：

我是传单作者。您可以通过使用 L.CircleMarker 而不是常规 Marker 来做到这一点，也可以使用实验性 L_PREFER_CANVAS 开关将矢量呈现为 Canvas（而不是 SVG），如下所示：https://github.com/CloudMade/Leaflet/blob/master/debug/vector/vector-canvas.html

【讨论】：

从那以后已经过去了很多时间。对于如何在新版本中执行此操作，您有什么新信息可以分享吗？

【参考方案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()
    );

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

【讨论】：

自此已经过去了很多时间。对于如何在新版本中执行此操作，您有什么新信息可以分享吗？