Folheto + Proj4Leaflet + EPSG3995 + WMS


8

Estou tentando oferecer suporte a uma camada WMS com uma projeção estereográfica do Norte Polar (EPSG3995) no Leaflet, mas não consigo fazê-lo funcionar.

Usei o Proj4Leaflet e criei a projeção com as resoluções dadas pelo GeoServer (a camada WMS é servida pelo GeoServer, veja a imagem anexada).

Resoluções EPSG3995

No jsfiddle a seguir: https://jsfiddle.net/gaubert/Lyojcrzo/ Tentei implementá-lo e, se você ampliar o mapa do folheto, verá que os ladrilhos estão fora do lugar?

O que falta para fazê-lo funcionar? Preciso implementar um método de transformação ou projeto?

Respostas:


5

Existem vários problemas aqui.


Primeiro, deixe-me citar http://leafletjs.com/examples/wms/wms.html (ênfase minha):

Observe também que Folheto suportes muito poucos sistemas de coordenadas: CRS:3857, CRS:3395e CRS:4326(Consulte a documentação L.CRS). Se o seu serviço WMS não exibir imagens nesses sistemas de coordenadas, pode ser necessário usar o Proj4Leaflet para usar um sistema de coordenadas diferente no Leaflet. Fora isso, basta usar o CRS correto ao inicializar seu mapa, e qualquer camada WMS adicionada o utilizará :

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);

O código no seu violino faz o oposto; ele especifica o CRS como uma opção para a camada wms, em vez de como uma opção para o mapa:

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!!
});

Especifique o CRS nas opções do mapa , e você deve ficar bem.


Segundo, instanciação de objeto. O folheto usa camelCase com a primeira letra maiúscula para as classes (por exemplo, L.TileLayeré uma classe) e o camelCase começando com letra minúscula para os métodos de fábrica (por exemplo, L.tileLayeré um método de fábrica).

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

Leia « /programming/8698726/constructor-function-vs-factory-functions » se você achar isso confuso.


Terceiro, citando https://kartena.github.io/Proj4Leaflet/ :

Você está usando o Leaflet 1.0 beta 1 ou versões de desenvolvimento do Leaflet? Então você precisa usar o ramo de desenvolvimento do Proj4Leaflet.

Isso significa que não há uma versão lançada do proj4leaflet que funcione com o Leaflet 1.

No seu violino, você está usando o Leaflet 1.0.2 e o proj4leaflet 0.7.2. Esses simplesmente não funcionam juntos.

Use uma versão inferior do Leaflet ou crie (e implante e use) uma versão mais nova do proj4leaflet. Observe que o proj4leaflet pode ajudar um pouco na manutenção, pois o @liedman não pode mais suportá-lo.

Se você tiver tempo, sugiro que entre em contato com os mantenedores atuais, para ajudar com uma nova versão compatível com o Leaflet 1.0.0.


Se alguém resolver esses três problemas, tudo funcionará novamente. Veja um exemplo de trabalho em:

https://playground-leaflet.rhcloud.com/giwo/edit?html,output


Um milhão de agradecimentos pela resposta rápida. Corrigido todos os problemas e funciona. Tenho mais uma pergunta, por que não vejo o mapa completo, mas apenas parte da Europa? É um problema de resolução?
Zoobert 20/12/16

Ok, eu encontrei o meu caminho na documentação inexistente ;-). Na projeção, eu precisava definir também os limites e a origem. Uma vez adicionado, parecia melhor. Obrigado novamente por sua ajuda.
Zoobert

De nada. Se você acha que a documentação está faltando, lembre-se de que o Leaflet e o proj4leaflet terão prazer em receber solicitações pull para melhorar os documentos!
precisa saber é o seguinte

Não é possível adicionar uma camada wms com crs diferentes dos crs do mapa?
senol ozgur
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.