Hơn

Làm thế nào để hiển thị nhãn trên các điểm đánh dấu trên tờ rơi?

Làm thế nào để hiển thị nhãn trên các điểm đánh dấu trên tờ rơi?


Tôi cần hiển thị nhãn trên các điểm đánh dấu trên tờ rơi để làm cho nó có thể đọc được. Làm thế nào tôi có thể thực hiện nó? Xem hình dưới đây, nhãn được phủ bởi điểm đánh dấu


CHỈNH SỬA:

Một cách giải quyết đơn giản hơn nữa sẽ là sử dụng tùy chọn đánh dấuupOnHover (nếu bạn chấp nhận hành vi đó trên điểm đánh dấu).

Tờ rơi điều chỉnh chỉ số z của điểm đánh dấu khi bạn di chuột qua nó (để nó xuất hiện phía trên những điểm khác) và nhãn cũng sẽ được adujsted tự động, vì vậy nó cũng sẽ xuất hiện trên tất cả các điểm đánh dấu khác!

Khi khởi tạo điểm đánh dấu của bạn, chỉ cần đảm bảo đặt tùy chọn đó thànhthật:

L.marker (latlng, {roseOnHover: true});

Demo: http://jsfiddle.net/ve2huzxw/64/


Câu trả lời ban đầu:

Thật không may, L.Label tự động điều chỉnh chỉ số z của nhãn thành cùng giá trị với điểm đánh dấu nguồn / gốc của nó. Và vì Tờ rơi tự động điều chỉnh z-index của các điểm đánh dấu để các điểm đánh dấu thấp hơn (phía nam) xuất hiện ở trên, chúng cũng sẽ xuất hiện phía trên các nhãn của điểm đánh dấu phía trên (phía bắc).

Một giải pháp "đơn giản" sẽ là buộc L.Label phải thêm các nhãn vào popupPanethay chomarkerPane, như nó đã làm đối với vectơ. Nhưng điều đó có nghĩa là phải sửa đổi mã thư viện.

Nếu bạn đã sẵn sàng làm theo cách này, chỉ cần thêm mã sau vào tập lệnh của bạn, trước khi bắt đầu tạo các lớp và nhãn của chúng:

// Sửa đổi phương thức nguyên mẫu L.Label.onAdd. L.Label.include ({onAdd: function (map) {this._map = map; //this._pane = this._source instanceof L.Marker? Map._panes.markerPane: map._panes.popupPane; this._pane = map._panes.popupPane; // thêm vào popupPane trong mọi trường hợp. if (! this._container) {this._initLayout ();} this._pane.appendChild (this._container); this._initInteraction (); this._update (); this.setOpacity (this.options.opacity); map .on ('moveend', this._onMoveEnd, this) .on ('viewreset', this._onViewReset, this); if (this._animated) {map .on ('zoomanim', this._zoomAnimation, this);} if (L.Browser.touch &&! this.options.noHide) {L.DomEvent.on (this._container, 'click', this.close, this );}}});

Demo: http://jsfiddle.net/ve2huzxw/63/

Một giải pháp khác có thể là yêu cầu L.Label sử dụng độ lệch chỉ số z khi điều chỉnh chỉ số z của nhãn so với chỉ số đánh dấu. Nhưng điều đó cũng sẽ yêu cầu sửa đổi mã thư viện.

Đó có thể là một yêu cầu tính năng thú vị cho thư viện plugin L.Label. Tuy nhiên nó dường như không còn được duy trì?