我有一个相对简单的应用程序,使用leaflet.js渲染了约3000个点。它的渲染速度相当快,但是平移和缩放非常慢。
通过查看Chrome中的性能工具,发现大部分时间都花费在重新计算样式上,但这并没有什么帮助。
<LeafletMap
center={[50, 10]}
zoom={6}
maxZoom={10}
preferCanvas={true}
>
<TileLayer
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
{this.state.locations.map( (location, index) => {
return (
<Marker position={[location.latitude, location.longitude]}>
<Popup>
Popup for any custom information.
</Popup>
</Marker>
)
})}
</LeafletMap>