Performance 缩放时的性能问题（传单0.7.3）

我面临传单（版本0.7.3）的性能问题。我正在使用一个OSM地图，我用它来显示一组由装饰多段线链接的圆圈标记（每25像素有一个箭头图案）。加载需要一点时间，但主要的问题是，当我缩放地图时，我开始面临严重的延迟（从缩放级别16开始），超过一定的限制（比如大部分时间为18），浏览器就会冻结并最终崩溃（通过chrome和firefox测试）。我尝试了1000个链接标记，然后我下降到100个左右，但仍然有同样的担心。。。当然，有10个或更少的标记，我没有任何问题

你已经面临类似的麻烦了吗？如何优化传单性能，以便对100多个链接圆圈标记使用精确的缩放（超过16级）？我还想知道为什么缩放时性能下降如此严重，而标记数量保持不变

提前感谢您的回答

莱纳利斯

无法使PolylineDecorator插件在JSFIDLE上工作。 但以下是生成标记的代码：

地图初始化：

var map;

function initializeMap(){
  "use strict";

  var layer;
  var layer2;

  function layerUrl(key, layer) {
      return "http://wxs.ign.fr/" + key
          + "/geoportail/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&"
          + "LAYER=" + layer + "&STYLE=normal&TILEMATRIXSET=PM&"
          + "TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=image%2Fjpeg";
  }

  layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', 
  {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    maxZoom: 18
  });

  layer2 = L.tileLayer(
    layerUrl(IGN_AMBIENTE_KEY, "GEOGRAPHICALGRIDSYSTEMS.MAPS"),
    {attribution: '&copy; <a href="http://www.ign.fr/">IGN</a>'}
  );

    var baseMaps = {
      "Terrestre": layer,
      "Bathymetrique": layer2
    };

    map = L.map('map', {
        layers: [layer],
        zoom: 8,
        center: [42.152796, 9.139150],
        zoomControl: false  
    });

   L.control.layers(baseMaps).addTo(map);

    //add zoom control with your options
    L.control.zoom({
         position:'topright' //topleft
    }).addTo(map);

    L.control.scale({
      position:'bottomleft',
      imperial : false
    }).addTo(map);


}

标记实例：

function printGPSOnMap(oJSON){
  var nbKeys = 0;

  for (var key in oJSON) {
    nbKeys++;

    var classe = classes[(key-1)%classes.length]; 
    var color = colors[(key-1)%colors.length];

    var positionInfo = [];

    if (oJSON.hasOwnProperty(key)) {

          var aInfo = oJSON[key];
          var marker;
          var latlngs = Array();

          var startMarker = lastMarkers[key];
          if(startMarker !== undefined && startMarker != null) {

            var myIcon = L.divIcon({className:  "myCircle "+classe, iconSize : [ 20, 20 ] });
            startMarker.setIcon(myIcon);
            latlngs.push(startMarker.getLatLng());
          }
          for(var i = 0; i < aInfo.length; i++) {
               var oInfos = aInfo[i];
               var sIdIndividual = oInfos["id_individual"];
               var sLongitude = oInfos["longitude"];
               var sLatitude = oInfos["latitude"];
               var sTemperature = oInfos["temperature"];
               var sPulse = oInfos["pulse"];
               var sBattery = oInfos["battery"];
               var sDatetime = oInfos["date_time"];
               var sIndividualName = oInfos["individual_name"];
               var id_device = oInfos["id_stm_device"];

               var popupMsg = "...";

               latlngs.push(L.marker([sLatitude,sLongitude]).getLatLng());

               marker = new MyCustomMarker([sLatitude,sLongitude], {
                                        icon : L.divIcon({ 
                                           className : "myCircle "+classe + ((i == aInfo.length-1) ? ' myCircleEnd' : ''),
                                           iconSize : [ 20, 20 ]
                                        })
                                        });
                                        marker.bindPopup(popupMsg, {
                                               showOnMouseOver: true 
                                        });
                                        marker.bindLabel(key, {
                                               noHide: true,
                                               direction: 'middle',
                                               offset: [offset[0], offset[1]]
                                        });
              positionInfo.push(marker);
         }

         lastMarkers[key] = marker; 
      }

      if(latlngs.length > 1)
      {

      polyline = L.polyline(latlngs, {className: classe, weight: 2,opacity: 0.4}).addTo(map);
      decorator = L.polylineDecorator(polyline, {
        patterns: [
            // define a pattern of 10px-wide arrows, repeated every 20px on the line 
            {offset: 0, repeat: '25px', symbol: new L.Symbol.arrowHead({pixelSize: 10, pathOptions: {fillOpacity:        
                 0.76, color: color, weight: 1}})}
        ]}).addTo(map);
     }

     if(!window.graphicsDevices.hasOwnProperty(key))
        window.graphicsDevices[key] = [];
     for(var i = 0; i < positionInfo.length; i++) {
        window.graphicsDevices[key].push(positionInfo[i]); 
        positionInfo[i].addTo(map);
        if(latlngs.length > 1){
          window.graphicsDevices[key].push(polyline);
          polyline.addTo(map);
          window.graphicsDevices[key].push(decorator);
          decorator.addTo(map);
        }
      } 
  }//foreach key

}

---

你衡量过中国的表现吗？

---

在初始化传单地图容器之前，请使用

L\u preference\u CANVAS=true

。这可能会对您有所帮助。

这听起来更像是有关代码的一些问题，而不是一般的传单问题。您是否可以发布一些代码，最好是在JSFIDLE或类似的工具上？我用生成标记的代码编辑了我的文章：）我已经尝试过这个代码段，尽管性能有所提高，但map在一些缩放后仍会继续滞后和自由化。我使用自定义标记而不是circleMarker，也许问题就在于此？我在帖子中添加了“MyCustomMarker”对象的代码。您是否尝试过在标记之间使用非装饰的香草多段线，而不是现在使用的多段线？尝试了解瓶颈在哪里。应该尽快尝试。。。很好的猜测，移除装饰器解决了问题，现在无论缩放级别如何，地图都是平滑的。这是一个插件，所以我应该先本能地使用它。不管怎样，谢谢你的贡献，你知道我如何在不牺牲表演的情况下在两个标记之间建立箭头链接吗？最终我发现：它工作得非常完美！

function printGPSOnMap(oJSON){
  var nbKeys = 0;

  for (var key in oJSON) {
    nbKeys++;

    var classe = classes[(key-1)%classes.length]; 
    var color = colors[(key-1)%colors.length];

    var positionInfo = [];

    if (oJSON.hasOwnProperty(key)) {

          var aInfo = oJSON[key];
          var marker;
          var latlngs = Array();

          var startMarker = lastMarkers[key];
          if(startMarker !== undefined && startMarker != null) {

            var myIcon = L.divIcon({className:  "myCircle "+classe, iconSize : [ 20, 20 ] });
            startMarker.setIcon(myIcon);
            latlngs.push(startMarker.getLatLng());
          }
          for(var i = 0; i < aInfo.length; i++) {
               var oInfos = aInfo[i];
               var sIdIndividual = oInfos["id_individual"];
               var sLongitude = oInfos["longitude"];
               var sLatitude = oInfos["latitude"];
               var sTemperature = oInfos["temperature"];
               var sPulse = oInfos["pulse"];
               var sBattery = oInfos["battery"];
               var sDatetime = oInfos["date_time"];
               var sIndividualName = oInfos["individual_name"];
               var id_device = oInfos["id_stm_device"];

               var popupMsg = "...";

               latlngs.push(L.marker([sLatitude,sLongitude]).getLatLng());

               marker = new MyCustomMarker([sLatitude,sLongitude], {
                                        icon : L.divIcon({ 
                                           className : "myCircle "+classe + ((i == aInfo.length-1) ? ' myCircleEnd' : ''),
                                           iconSize : [ 20, 20 ]
                                        })
                                        });
                                        marker.bindPopup(popupMsg, {
                                               showOnMouseOver: true 
                                        });
                                        marker.bindLabel(key, {
                                               noHide: true,
                                               direction: 'middle',
                                               offset: [offset[0], offset[1]]
                                        });
              positionInfo.push(marker);
         }

         lastMarkers[key] = marker; 
      }

      if(latlngs.length > 1)
      {

      polyline = L.polyline(latlngs, {className: classe, weight: 2,opacity: 0.4}).addTo(map);
      decorator = L.polylineDecorator(polyline, {
        patterns: [
            // define a pattern of 10px-wide arrows, repeated every 20px on the line 
            {offset: 0, repeat: '25px', symbol: new L.Symbol.arrowHead({pixelSize: 10, pathOptions: {fillOpacity:        
                 0.76, color: color, weight: 1}})}
        ]}).addTo(map);
     }

     if(!window.graphicsDevices.hasOwnProperty(key))
        window.graphicsDevices[key] = [];
     for(var i = 0; i < positionInfo.length; i++) {
        window.graphicsDevices[key].push(positionInfo[i]); 
        positionInfo[i].addTo(map);
        if(latlngs.length > 1){
          window.graphicsDevices[key].push(polyline);
          polyline.addTo(map);
          window.graphicsDevices[key].push(decorator);
          decorator.addTo(map);
        }
      } 
  }//foreach key

}

var MyCustomMarker = L.Marker.extend({

    bindPopup: function(htmlContent, options) {
    if (options && options.showOnMouseOver) {
      // call the super method
      L.Marker.prototype.bindPopup.apply(this, [htmlContent, options]);
      // unbind the click event
      this.off("click", this.openPopup, this);
      // bind to mouse over
      this.on("mouseover", function(e) {
        // get the element that the mouse hovered onto
        var target = e.originalEvent.fromElement || e.originalEvent.relatedTarget;
        var parent = this._getParent(target, "leaflet-popup");
        // check to see if the element is a popup, and if it is this marker's popup
        if (parent == this._popup._container)
          return true;
        // show the popup
        this.openPopup();
      }, this);
      // and mouse out
      this.on("mouseout", function(e) {
        // get the element that the mouse hovered onto
        var target = e.originalEvent.toElement || e.originalEvent.relatedTarget;
        // check to see if the element is a popup
        if (this._getParent(target, "leaflet-popup")) {
          L.DomEvent.on(this._popup._container, "mouseout", this._popupMouseOut, this);
          return true;
        }
        // hide the popup
        this.closePopup();
      }, this);
    }
  },
  _popupMouseOut: function(e) {

    // detach the event
    L.DomEvent.off(this._popup, "mouseout", this._popupMouseOut, this);
    // get the element that the mouse hovered onto
    var target = e.toElement || e.relatedTarget;
    // check to see if the element is a popup
    if (this._getParent(target, "leaflet-popup"))
      return true;
    // check to see if the marker was hovered back onto
    if (target == this._icon)
      return true;
    // hide the popup
    this.closePopup();
  },

  _getParent: function(element, className) {

    var parent = null;

    if(element != null) parent = element.parentNode;

    while (parent != null) {
      if (parent.className && L.DomUtil.hasClass(parent, className))
        return parent;
      parent = parent.parentNode;
    }
    return false;
  }
});