Map lags once markers multiply

• Frame rate collapses while panning 2000 markers and CPU usage spikes.
• The performance panel shows thousands of DOM nodes and layout recalculations on every move.
• OpenLayers vector layers show the same slowdown in draw calls rather than in DOM work.

1. Count the actual number of points instead of estimating it.
2. Below 300, stop optimising the layer, since the cost is somewhere else.
3. Above 300, switch rendering to canvas first, using preferCanvas in Leaflet.
4. If it still lags, cull to the current viewport on moveend or add clustering.
5. Above 20000, move the data layer to a WebGL engine such as deck.gl.

Set preferCanvas: true on the Leaflet map, or in OpenLayers share one style object and keep updateWhileInteracting false; for dense data add ol.source.Cluster with distance 40 or use the markercluster plugin. Beyond 20000 points render the data layer with deck.gl while the basemap stays raster.

var map = L.map('map', {
  center: [39.9, 116.4],
  zoom: 11,
  preferCanvas: true
});

var layer = new ol.layer.Vector({
  source: source,
  style: sharedStyleObject,   // 共用一个样式，不要每条要素 new 一个
  updateWhileAnimating: false,
  updateWhileInteracting: false
});

• Creating a new Style object per feature, which prevents reuse and multiplies both memory and draw cost.
• Culling markers on every move event instead of moveend, which rebuilds the layer mid-drag and makes the lag worse.