Có một số vấn đề ở đây.
Trước tiên, hãy để tôi trích dẫn từ http://leafletjs.com/examples/wms/wms.html (nhấn mạnh của tôi):
Cũng lưu ý rằng Tờ rơi hỗ trợ rất ít phối hợp hệ thống: CRS:3857
, CRS:3395
và CRS:4326
(Xem tài liệu cho L.CRS
). Nếu dịch vụ WMS của bạn không phục vụ hình ảnh trong các hệ tọa độ đó, bạn có thể cần sử dụng Proj4Leaflet để sử dụng hệ thống tọa độ khác trong Tờ rơi. Ngoài ra, chỉ cần sử dụng đúng CRS khi khởi tạo bản đồ của bạn và bất kỳ lớp WMS nào được thêm sẽ sử dụng nó :
var map = L.map('map', {
crs: L.CRS.EPSG4326
});
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', {
layers: 'nasa:bluemarble'
}).addTo(map);
Mã trong fiddle của bạn làm ngược lại, nó chỉ định CRS là một tùy chọn cho lớp wms, thay vì là một tùy chọn cho bản đồ:
wmsBKLayer = new L.tileLayer.wms('http://eumetview.eumetsat.int/geoserv/wms', {
layers: 'bkg-raster:bkg-raster',
crs: customCRS
}
var map = new L.map('map', {
// No CRS option here!!
});
Chỉ định CRS trong các tùy chọn bản đồ và bạn sẽ ổn.
Thứ hai, khởi tạo đối tượng. Tờ rơi sử dụng camelCase với chữ in hoa đầu tiên cho các lớp (ví dụ: L.TileLayer
một lớp) và camelCase bắt đầu bằng chữ cái viết thường cho các phương thức xuất xưởng (ví dụ: L.tileLayer
là một phương thức xuất xưởng).
var foo = L.tileLayer(...); // Preferred
var foo = new L.TileLayer(...); // OK, but not preferred
var foo = L.TileLayer(...); // Nope, one cannot call a class
var foo = new L.tileLayer(...); // Nope nope nope nope, one cannot create an instance of a factory
Vui lòng đọc « /programming/8698726/constructor-feft-vs-factory-fifts » nếu bạn thấy điều này khó hiểu.
Thứ ba, trích dẫn từ https://kartena.github.io/Proj4Leaflet/ :
Bạn đang sử dụng Leaflet 1.0 beta 1 hoặc các phiên bản phát triển của Leaflet? Sau đó, bạn cần sử dụng nhánh phát triển của Proj4Leaflet.
Điều này có nghĩa là không có phiên bản proj4leaflet được phát hành nào hoạt động với Tờ rơi 1.
Trong fiddle của bạn, bạn đang sử dụng Leaflet 1.0.2 và proj4leaflet 0.7.2. Những người sẽ không làm việc cùng nhau.
Sử dụng phiên bản thấp hơn của Leaflet hoặc xây dựng (và triển khai và sử dụng) phiên bản mới hơn của proj4leaflet. Xin lưu ý rằng proj4leaflet có thể sử dụng một chút trợ giúp để bảo trì, vì @liedman không còn có thể hỗ trợ nó nữa.
Nếu bạn có thời gian, tôi khuyên bạn nên liên hệ với các nhà bảo trì hiện tại, để giúp với bản phát hành mới tương thích với Leaflet 1.0.0.
Nếu một trong ba vấn đề này, mọi thứ sẽ hoạt động trở lại. Xem một ví dụ làm việc tại:
https://playground-leaflet.rhcloud.com/giwo/edit?html,output