2012-03-26 3 views
5

Я хочу нарисовать много точек геометрии с помощью Листовки. Поэтому я хочу использовать холст HTML5 для повышения производительности. Мой информационный бюллетень - geoJSON. Как я видел в документе «Листовки», пока нельзя рисовать геопозиции как холст.брошюра js: draw POIs as canvas

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

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

pointToLayer: функция (LatLng) {}

Знает ли кто как рисовать мои LatLng объекты как холст?

ответ

12

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

+1

См. Http://leafletjs.com/reference.html#path-canvas – sustainablepace

5

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

В Листовке 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().