Cách thêm nhãn chỉ có văn bản trên bản đồ Tờ rơi không có biểu tượng


22

Tôi đang tìm cách hiển thị văn bản trên bản đồ Tờ rơi bằng cách sử dụng các điểm đánh dấu hoặc bất cứ thứ gì khác mà không hiển thị bất kỳ biểu tượng nào. Tôi muốn chỉ hiển thị văn bản và có thể tạo kiểu và xoay nó ... Có gợi ý nào không?


1
@NikhilVJ - Câu hỏi và trả lời đó không thảo luận về cách có một chú giải công cụ mà không có điểm đánh dấu tương ứng. Các câu trả lời ở đây thảo luận làm thế nào để chỉ có văn bản, không có điểm đánh dấu có thể nhìn thấy.
ToolmakerSteve

ah xin lỗi cái xấu của tôi
Nikhil VJ

Câu trả lời:


19

Tôi đã giải quyết vấn đề của mình bằng cách sử dụng tính năng Leaflet L.DivIcon đại diện cho một biểu tượng nhẹ cho các điểm đánh dấu sử dụng phần tử div đơn giản thay vì hình ảnh ... Các điểm đánh dấu này có một tùy chọn html và className cho phép tôi tạo nhãn với css phong cách ...


11
Bạn có phiền khi cung cấp một ít mã cho việc này không?
mastov

Câu trả lời này không phải là ý tưởng nếu bạn muốn có nhãn VÀ điểm đánh dấu
Roy

@Roy - đó là một tình huống khác nhau; Xem L.Tooltip . Nếu bạn muốn nhãn (chú giải công cụ) luôn hiển thị, bạn đặt tùy chọn vĩnh viễn thành đúng.
ToolmakerSteve

16

Cập nhật cho Leaflet 1.0: Kể từ Leaflet 1.0, plugin Leaflet.label bị loại bỏ, vì nó đã được bao gồm trong lõi Leaflet như L.Tooltip. Không cần bao gồm tập lệnh nguồn và cú pháp đã thay đổi một chút. Sử dụng mẫu:

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 }); //opacity may be set to zero
marker.bindTooltip("My Label", {permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

Kiểu CSS có thể được áp dụng cho lớp theo cách tương tự như trước đây.

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

Dường như độ mờ đánh dấu có thể được đặt hoàn toàn thành 0.


Trước tờ rơi 1.0: Sử dụng Plugin Leaflet.label (đã được đề cập bởi geomajor56).

<script src="scripts/leaflet.label.js"></script>

Với plugin Nhãn Lá, các nhãn được gắn trực tiếp vào các điểm đánh dấu, nhưng bạn có thể đặt độ mờ của điểm đánh dấu gần như bằng 0 để chỉ hiển thị nhãn. (Nếu bạn đặt độ mờ của điểm đánh dấu thành 0, nhãn liên quan cũng sẽ biến mất.)

var marker = new L.marker([39.5, -77.3], { opacity: 0.01 });
marker.bindLabel("My Label", {noHide: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

Sau đó, bạn có thể sử dụng CSS để tạo kiểu cho nhãn của mình khi bạn thấy phù hợp:

.my-label {
    position: absolute;
    width:1000px;
    font-size:20px;
}

<script src = "scripts / leaflet.label.js"> </ script> - Sau khi tôi đã thêm dòng này vào HTML của mình, trang dường như trống. Tôi có cần tải xuống bất kỳ tập tin?
Marcin Kosiński

@ MarcinKosiński - Có, bạn sẽ cần tải xuống leaflet.label.js từ liên kết GitHub trong bài đăng và đặt nó vào thư mục con của trang web có tên tập lệnh. Hoặc, bạn có thể thay thế URL trong mã bằng tệp được lưu trữ tại leaflet.github.io/Leaflet.label/leaflet.label.js (bạn cũng có thể muốn tệp CSS; cùng tên và vị trí, phần mở rộng khác nhau).
KeithS

tôi đã cố gắng để làm điều này ,,, bất kỳ ý tưởng làm thế nào để loại bỏ nền và đường viền? snag.gy/JdnpyV.jpg
WantIt

Khi sử dụng L.Tooltipbên trong onEachFeature, gặp lỗi: "Uncaught TypeError: Không thể thực thi 'appendChild' trên 'Node': tham số 1 không phải là loại 'Node'."
Nikhil VJ

Được giải quyết, tôi đã sử dụng một trong các thuộc tính tính năng dưới dạng văn bản, phải thêm .toString()vào cuối. marker.bindTooltip(feature.properties['prabhag_number'].toString(), {...
Nikhil VJ

4

Bạn có thể bắt đầu ở đây với plugin Leaflet này . Có thể tạo hoặc chỉnh sửa một điểm đánh dấu theo ý thích của bạn. Là văn bản đến từ các thuộc tính tính năng?


Điều này trả lời một câu hỏi khác với được hỏi. Đây là cách thêm nhãn vào điểm đánh dấu hiện có ; đó không phải là một lời giải thích về việc làm thế nào để chỉ có một nhãn - không có biểu tượng đánh dấu.
ToolmakerSteve

0
marker.bindTooltip("text here", { permanent: true, offset: [0, 12] });

Điều này làm việc cho tôi


Điều này trả lời một câu hỏi khác với được hỏi. Đây là cách thêm nhãn vào điểm đánh dấu hiện có ; đó không phải là một lời giải thích về việc làm thế nào để chỉ có một nhãn - không có biểu tượng đánh dấu.
ToolmakerSteve
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.