Reactjs 传单：尝试加载更多（50K）标记图标到L.canvasLayer每个标记都有直接旋转。性能问题

我正在加载带有自定义图标和每个标记旋转角度的50K标记。当我使用canvasLayer加载50K标记时，它的加载速度非常快

var map = L.map('map').setView([59.9578,30.2987], 10);
 var lat, lng;     
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a 
 href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  preferCanvas: true
}).addTo(map);
var ciLayer = L.canvasIconLayer({}).addTo(map);
ciLayer.addOnClickListener(function (e,data) {console.log(data)});
ciLayer.addOnHoverListener(function (e,data) 
{console.log(data[0].data._leaflet_id)});
  var icon = L.icon({
  iconUrl: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
  iconSize: [20, 18],
  iconAnchor: [10, 9]     
});
var markers = [];
for (var i = 0; i < 50000; i++) {
  /* var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + 
Math.random()*3.6], {icon: icon, }).addTo(map); */
  var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + 
Math.random()*3.6], {icon: icon );
markers.push(marker);
}    ciLayer.addLayers(markers);

var-map=L.map（'map'）.setView（[59.9578,30.2987]，10）；
var lat，液化天然气；
var tiles=L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；参与者”，
真的吗
}).addTo（地图）；
var ciLayer=L.canvasIconLayer（{}）.addTo（map）；
ciLayer.addOnClickListener（函数（e，数据）{console.log（数据）}）；
cLayer.addOnHoverListener（函数（e，数据）
{console.log（数据[0].data.\u传单\u id}）；
var icon=L.icon({
伊克努尔：'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
iconSize:[20,18]，
iconAnchor:[10,9]
});
var标记=[]；
对于（变量i=0；i<50000；i++）{
/*var marker=L.marker（[58.5578+数学随机（）*1.8,29.0087+
Math.random（）*3.6]，{icon:icon，}）.addTo（map）*/
var marker=L.marker（[58.5578+数学随机（）*1.8,29.0087+
random（）*3.6]，{icon:icon）；
标记器。推（标记器）；
}添加层（标记）；

上面的代码非常快地加载所有标记

但是当尝试使用L.divIcon旋转图标时，页面会崩溃

var map = L.map('map').setView([59.9578,30.2987], 10);
    var lat, lng;     
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a 
    href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      preferCanvas: true
    }).addTo(map);
    var ciLayer = L.canvasIconLayer({}).addTo(map);
    ciLayer.addOnClickListener(function (e,data) {console.log(data)});
    ciLayer.addOnHoverListener(function (e,data) 
   {console.log(data[0].data._leaflet_id)});
  var markers = [];
    for (var i = 0; i < 50000; i++) {
 var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + 
     Math.random()*3.6], {
      icon: L.divIcon({html:'<img 
    src="http://www.geocodezip.com/mapIcons/boat-10-64.gif" style="-webkit- 
    transform: rotate(270deg); -moz-transform:rotate(270deg);" />'})}).addTo(map);
    markers.push(marker);
    } 
ciLayer.addLayers(markers);

var-map=L.map（'map'）.setView（[59.9578,30.2987]，10）；
var lat，液化天然气；
var tiles=L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
属性：“©；参与者”，
真的吗
}).addTo（地图）；
var ciLayer=L.canvasIconLayer（{}）.addTo（map）；
ciLayer.addOnClickListener（函数（e，数据）{console.log（数据）}）；
cLayer.addOnHoverListener（函数（e，数据）
{console.log（数据[0].data.\u传单\u id}）；
var标记=[]；
对于（变量i=0；i<50000；i++）{
var marker=L.marker（[58.5578+数学随机（）*1.8,29.0087+
Math.random（）*3.6]{
图标：L.divIcon（{html:'}）.addTo（map）；
标记器。推（标记器）；
} 
添加层（标记）；

旋转（270度）-是标记的角度，但每个50k标记的角度将不同。

---

.addTo（map）是问题的根源。

是否有其他方法可以旋转50k个自定义图标而不出现滞后。能否详细说明创建50k个L.Marker实例的原因？必须有其他方法才能达到目标。我的要求是显示车辆位置及其行驶方向。其他方法是什么？