2012-03-26 60 views
5

リーフレットで多くのジオポイントを描きたい。したがって、HTML5キャンバスを使用してパフォーマンスを向上させたいと考えています。 私のdatasoureはgeoJSONです。リーフレットの文書で見たように、キャンバスとして地理位置を描くことはまだできません。私はここにフックアップするべきだと思いリーフレットjs:POIをキャンバスとして描画

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

pointToLayer:機能(緯度と経度){}

誰かがキャンバスとしての私のLatLngオブジェクトを描画する方法を知っていますか?

答えて

12

私はリーフレットの著者です。あなたはL.CircleMarkerの代わりに、定期的なマーカーを使用してこれを行うには、また実験的L_PREFER_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.marker()の代わりにL.circleMarker()(Leaflet circleMarker documentation)を使用する必要がありますが、キャンバスの使用方法は変更されています。

リーフレット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()を使用して、通常の層よりも有意に速かったです。

関連する問題