Làm cách nào để gắn nhãn điểm Geojson trong Tờ rơi?

Làm cách nào để hiển thị nhãn cho các điểm Geojson trong bản đồ Tờ rơi?

Có Leaflet.label hiện không được ủng hộ cho L.Tooltip , nhưng nó chỉ hiển thị văn bản khi di chuột. Tôi muốn hiển thị nhãn văn bản trực tiếp trên bản đồ mà không cần người dùng tương tác.

Nhập mẫu - https://gist.github.com/maphew/e168430e999fc738eeb3448feda121cd

Kết quả mong muốn (điểm xanh với nhãn văn bản, các yếu tố đồ họa khác chỉ dành cho ngữ cảnh):

Cập nhật: Tôi muốn tạo văn bản hòa trộn với bản đồ như hình ảnh bên dưới, không phải là một công cụ bật lên.

leaflet geojson

— matt wilkie
nguồn

Chỉ cần sử dụng tùy chọn tooltip permanent? Từ leafletjs.com/reference-1.1.0.html#tooltip-option :Whether to open the tooltip permanently or only on mouseover

— BradHards

Sử dụng L.Markers với L.DivIcons.

— IvanSanchez

Nếu bạn không thể giải quyết vấn đề này hoàn toàn trong Tờ rơi, một tùy chọn có thể là đặt các điểm của bạn vào GeoServer (hoặc tương tự) và tải chúng dưới dạng lớp gạch WMS theo đó kiểu hiển thị nhãn . Trong ví dụ này, các nhãn màu xanh đạt được theo cách này

— Stephen Lead

@IvanSanchez Tôi không thể làm việc đó. Các html tùy chỉnh không đi qua. Xem nỗ lực của tôi tại jsfiddle.net/maphew/q0refcwx/1

— matt wilkie

Đây là một triển khai theo đề xuất của @BradHards về việc sử dụng permanenttùy chọn cho tooltip. Các opacitytùy chọn mất dần cả văn bản và chứa nền không kém.

var data_points = {
    "type": "FeatureCollection",
    "name": "test-points-short-named",
    "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
    "features": [
    { "type": "Feature", "properties": { "name": "1" }, "geometry": { "type": "Point", "coordinates": [ -135.02507178240552, 60.672508785052223 ] } },
    { "type": "Feature", "properties": { "name": "6"}, "geometry": { "type": "Point", "coordinates": [ -135.02480935075292, 60.672888247036376 ] } },
    { "type": "Feature", "properties": { "name": "12"}, "geometry": { "type": "Point", "coordinates": [ -135.02449372349508, 60.672615176262731 ] } },
    { "type": "Feature", "properties": { "name": "25"}, "geometry": { "type": "Point", "coordinates": [ -135.0240752514004, 60.673313811878423 ] } }
    ]};

var pointLayer = L.geoJSON(null, {
  pointToLayer: function(feature,latlng){
    label = String(feature.properties.name) // Must convert to string, .bindTooltip can't use straight 'feature.properties.attribute'
    return new L.CircleMarker(latlng, {
      radius: 1,
    }).bindTooltip(label, {permanent: true, opacity: 0.7}).openTooltip();
    }
  });
pointLayer.addData(data_points);
mymap.addLayer(pointLayer);

Ví dụ hoạt động đầy đủ: https://jsfiddle.net/maphew/gtdkxj8e/3/

Để xóa nền nhãn

Xem ghi đè phong cách tooltip? để biết chi tiết sửa đổi CSS và Xóa hoàn toàn đường viền nhãn tooltip trong bản đồ Leaflet.js? để xóa con trỏ tam giác mà không chạm vào CSS (chỉ cần thêm direction: "center"vào .bindTooltip!)

Javascript:

.bindTooltip(label, {permanent: true, 
   direction: "center",
   className: "my-labels"}).openTooltip();

CSS:

.leaflet-tooltip.my-labels {
  background-color: transparent;
  border: transparent;
  box-shadow: none;
  }

Ví dụ hoạt động đầy đủ: https://jsfiddle.net/maphew/gtdkxj8e/7/

— matt wilkie
nguồn

Nếu bạn thực hiện tuyến đường này, bạn có thể thay đổi css của chú giải công cụ hoặc thêm tên lớp (tooltip kế thừa từ divoverlay) vào tooltip để xóa màu nền, viền, bóng, v.v. .leaflet-tooltip {background-color: transparent;border: transparent;}

— Diffusion_net

Cảm ơn bạn @Diffusion_net! những từ khóa đó đã đưa tôi đến những câu hỏi liên quan và một giải pháp hoàn chỉnh hơn (hiện được thêm vào để trả lời).

— matt wilkie