Estou procurando uma biblioteca de mapeamento personalizada, mas não para exibir uma área geográfica real, mas para exibir uma planta baixa personalizada. Estou procurando há algum tempo, mas a maioria das soluções que encontrei são para áreas geográficas.
Gostaria de personalizar alguns níveis de zoom (provavelmente 3 níveis) e, idealmente, estou procurando uma solução JavaScript, HTML5 (canvas, SVG).
Alguém tem alguma sugestão?
Respostas:
Fiz meu próprio aplicativo de mapa usando meus próprios mapas de imagens. Nossa universidade mudou para um novo campus e estou mapeando 7 andares (internos), com 5 níveis de zoom, a partir de mapas desenhados à mão.
O Leaflet pode trabalhar com blocos de mapa personalizados! Eu segui este guia (omarriott.com/aux/leaflet-js-non-geographic-imagery), apenas que fiz algumas tentativas e erros com os números do nível de zoom para garantir que o mapa fosse exibido (seguir o guia exatamente não trabalhe para mim).
Existe um plugin chamado Leaflet Indoor, mas ele depende do geoJson, que eu não tinha. Tudo o que tenho são coordenadas de imagem personalizadas e meu próprio Json personalizado. De qualquer forma, o folheto é capaz de converter as coordenadas da imagem em lat (e vice-versa) com os métodos de projeto e projeto.
O que fiz para criar pisos diferentes foi usar o controle de camada. Obviamente, leva um tempo para descobrir a API e garantir que tudo funcione como deveria. Por exemplo, agrupei meus marcadores para cada andar e codifiquei uma maneira de renderizá-los perfeitamente em diferentes níveis de zoom. E carregar um piso diferente requer um manipulador para carregar marcadores corretamente também.
Sei que o Leaflet tem vários exemplos de mapas geográficos e pode deixar pessoas como nós no escuro, mas quero garantir que é possível fazer isso para mapas personalizados. Você precisa da imagem, agrupe-a corretamente (com nomes corretos), carregue-a em uma CDN como a Amazon e use a API do Leaflet.
fonte
Sem conhecer seu caso de uso, você pode dar uma olhada na biblioteca D3.js. (Data Driven Documents) para visualização de dados. Embora eu não saiba se ele suporta "níveis de zoom" por si só, mas suporta mapas com zoom .
Veja os muitos exemplos aqui: https://github.com/mbostock/d3/wiki/Gallery
fonte
Trate a planta como uma área geográfica. O OpenLayers ou o Leaflet não se importam se o material que eles estão exibindo é interno ou externo - desde que você possa definir um sistema de coordenadas, tudo ficará bem.
fonte