листовка JS: рисовать POI как холст - PullRequest
Новая
       18

листовка JS: рисовать POI как холст

9 голосов
/ 27 марта 2012

Я хочу нарисовать много географических точек с помощью Leaflet. Поэтому я хочу использовать HTML5 canvas для повышения производительности. Мой источник данных - geoJSON. Как я видел в документации к Leaflet, пока невозможно нарисовать географические позиции как canvas. 

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

Я думаю, мне следует подключиться здесь:

pointToLayer: function (latlng) {}

Кто-нибудь знает, как рисовать мои объекты в виде холста?

Ответы [ 2 ]

15 голосов
/ 23 июня 2012

Я автор Leaflet.Вы можете сделать это, используя L.CircleMarker вместо обычного маркера, а также используя экспериментальный переключатель L_PREFER_CANVAS, чтобы визуализировать векторы как Canvas (вместо SVG), например: https://github.com/CloudMade/Leaflet/blob/master/debug/vector/vector-canvas.html

7 голосов
/ 27 сентября 2016

Расширение исходного ответа на тот случай, если кому-то понадобится Leaflet 1.0. Вы все равно должны использовать L.circleMarker() (документация Leaflet circleMarker) вместо L.marker(), но способ использования холста изменился.

В Leaflet 1.0 экспериментальный переключатель L_PREFER_CANVAS был обновлен до опции официальной карты preferCanvas (документация Leaflet предпочитает Canvas) . 

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

В качестве альтернативы, вы можете явно установить холст рендерера; Я думаю, что это то же самое, что и опция preferCavas. Вот документация Leaflet для canvas . 

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

Любой из этих параметров (preferCanvas: true или renderer: L.canvas()) с L.circleMarker() был значительно быстрее, чем обычный слой, использующий L.marker().

...