Thứ tự tùy chỉnh / chỉ mục z của các biểu tượng trong lớp Tờ rơi

Tôi có một lớp duy nhất (điểm) với một loạt các điểm đánh dấu. Mỗi điểm có một thuộc tính được cập nhật thường xuyên. Tôi hiểu bởi Leaflet sắp xếp các lớp sao cho các lớp có vĩ độ thấp hơn được đặt lên hàng đầu vì lý do thẩm mỹ, nhưng tôi muốn sắp xếp lại chúng sao cho trong các khu vực phân cụm, những lớp có giá trị cao hơn trong thuộc tính được đặt lên hàng đầu. Có cách nào để làm điều này mà không phải tách từng điểm đánh dấu / điểm thành một lớp riêng lẻ và buộc thứ tự vẽ theo cách đó không?

Cho đến khi ai đó tìm thấy một giải pháp tốt hơn, đây là những gì tôi sẽ làm ...

Như bạn đã nhận thấy, tờ rơi đang sử dụng vị trí pixel để đặt z Index (trong Marker.js)

pos = this._map._latLngToNewLayerPoint(this._latlng, opt.zoom, opt.center).round();
this._zIndex = pos.y + this.options.zIndexOffset;

Những gì tôi đề xuất là hoàn tác tờ rơi z Index bằng cách sử dụng setZIndex Offerset ()

Giả sử bạn muốn đặt z Index = 100, bạn sẽ làm

var pos = map.latLngToLayerPoint(marker.getLatLng()).round();
marker.setZIndexOffset(100 - pos.y);

Có một chút trục trặc: bạn phải làm điều đó mỗi khi bản đồ được phóng to :(

Dưới đây là một ví dụ về JSFiddle (nhận xét mã trong điều chỉnhZindex () để thấy sự khác biệt)

Phiên bản hiện tại của tờ rơi (kể từ đầu năm 2017) có thuộc tính zIndex Offerset với default = 0 có thể được đặt thành atler chỉ số z của điểm đánh dấu. http://leafletjs.com/reference.html#marker-zindexoffset Hoạt động tốt với thu phóng và mọi thứ.

Plugin này sẽ thực hiện thủ thuật: leaflet.forceZIndex.js

// Force zIndex of Leaflet
(function(global){
  var MarkerMixin = {
    _updateZIndex: function (offset) {
      this._icon.style.zIndex = this.options.forceZIndex ? (this.options.forceZIndex + (this.options.zIndexOffset || 0)) : (this._zIndex + offset);
    },
    setForceZIndex: function(forceZIndex) {
      this.options.forceZIndex = forceZIndex ? forceZIndex : null;
    }
  };
  if (global) global.include(MarkerMixin);
})(L.Marker);

Để sử dụng:

var aMarker = L.marker([lat, lon], {
    icon: icon,
    title: title,
    forceZIndex: <Value> // This is forceZIndex value
})

Khai báo ForceZIndex sẽ đảm bảo rằng Z Index sẽ luôn được đặt từ aMarker.options.forceZIndex

Cập nhật nó ở đâu đó để buộc lại giá trị Z Index

aMarker.setForceZIndex(<New Value>)

Hoặc đặt ForForce Index (null) thành trạng thái z Index tự động:

aMarker.setForceZIndex(null);

Đến cuối ngày, nếu không có tùy chọn ForceZ Index nào được khai báo, Marker sẽ hoạt động với hành vi bình thường.

Các giải pháp duy nhất hiện có là hacky và có thể phá vỡ trong tương lai, nếu họ quyết định sử dụng một cái gì đó khác hơn pos.yhoặc tái cấu trúc mã nhiều.

Đây là một giải pháp hack đơn giản khác dễ sử dụng hơn và không yêu cầu cập nhật giá trị mỗi lần thay đổi thu phóng. Nó làm cho sự zIndexOffsetphản ánh thực tế zIndex:

L.Marker.prototype.__setPos = L.Marker.prototype._setPos;
L.Marker.prototype._setPos = function ()
{
    L.Marker.prototype.__setPos.apply(this, arguments);
    this._zIndex = this.options.zIndexOffset;
    this._resetZIndex();
};

Sau đó, nếu bạn muốn đặt z Index thành 100, chỉ cần sử dụng:

marker.setZIndexOffset(100);