biểu tượng tùy chỉnh trong Leaflet không hoạt động

Question

Phương pháp chuẩn sử dụng biểu tượng tùy chỉnh như được hiển thị trong tài liệu Leaflet không hoạt động đối với tôi khi tôi có nguồn dữ liệu geojson. lớp được thêm vào tốt, nhưng đang sử dụng biểu tượng điểm đánh dấu mặc định. Không có tham chiếu đến biểu tượng tùy chỉnh PNG của tôi khi tôi kiểm tra DOM. Đây là mã của tôi:

var crossIcon = L.icon({ 
      iconUrl: 'plus.png', 
      shadowUrl: 'marker-shadow.png', 
      iconSize: [11, 11], 
      shadowSize: [11, 11], 
      iconAnchor: [6, 6], 
      shadowAnchor: [5, 5], 
      popupAnchor: [5, 5] 
    }); 


    var points = L.geoJson(labels, { 
      icon: crossIcon 
    }); 
    map.addLayer(points); 
    layerControl.addOverlay(points, 'Site Locations'); 

Tôi đã thử một số đề xuất được tìm thấy trên SO và các nơi khác không thành công. plus.png nằm trong/lib/images/nơi biểu tượng mặc định cũng được tìm thấy.

Answer 1

Nhìn vào API cho GeoJson here, không có tùy chọn như vậy khi tạo lớp L.GeoJson cho icon. Tôi tin rằng bạn có thể đang tìm kiếm style option, cho các hình đa giác và đa giác hoặc tùy chọn pointToLayer để chỉ định biểu tượng.

sample GeoJson page trên trang web của Leaflet hiển thị trường hợp này. Nhìn vào biểu tượng với cầu thủ bóng chày.

Biểu tượng được định nghĩa theo cách này:

var baseballIcon = L.icon({ 
     iconUrl: 'baseball-marker.png', 
     iconSize: [32, 37], 
     iconAnchor: [16, 37], 
     popupAnchor: [0, -28] 
    }); 

Biểu tượng này được áp dụng cho các lớp L.geoJson thông qua tùy chọn pointToLayer, trong đó xác định một chức năng; như thế này:

var coorsLayer = L.geoJson(coorsField, { 
     pointToLayer: function (feature, latlng) { 
      return L.marker(latlng, {icon: baseballIcon}); 
     } 
    }) 

Chức năng này sẽ được gọi cho mỗi điểm GeoJSON. Hàm sẽ trả về một L.Marker sử dụng biểu tượng được chỉ định của bạn.

Vì vậy, để trả lời câu hỏi của bạn: khối mã của bạn tạo ra lớp của bạn sẽ giống như thế này:

var points = L.geoJson(labels, { 
     pointToLayer: function (feature, latlng) { 
      return L.marker(latlng, {icon: crossIcon }); 
     } 
}); 

Answer 2

Thay vì thêm nó như là lớp GeoJSON bạn có thể thêm nó như là một dấu hiệu

var crossIcon = L.icon({ 
     iconUrl: 'plus.png', 
     shadowUrl: 'marker-shadow.png', 
     iconSize: [11, 11], 
     shadowSize: [11, 11], 
     iconAnchor: [6, 6], 
     shadowAnchor: [5, 5], 
     popupAnchor: [5, 5] 
}); 

     L.marker(icon:crossIcon);