5 votos

problemas de visualización de la tabla postgis geoserver wms

Tengo una tabla de condados postgis publicada en geoserver. En la vista previa de la capa se ve así

enter image description here

en mi código JS muy simple

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Leaflet Test</title>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" crossorigin=""></script>
        <script type="text/javascript">

          var map;
            function init() {
                // create map and set center and zoom level
                map = new L.map('mapid',{
                    crs: L.CRS.EPSG4326
                });
                map.setView([40.876,-74.9999],12);

          var dlayer=L.tileLayer.wms('http://localhost:8080/geoserver/wms',{
              layers: 'pg_world:county0',
          }).addTo(map);
            }

        </script>
      </head>
      <body onload="init()">
        <h1 id="title">Highlands Leaflet Test</h1>

        <div id="mapid">
        </div>
      </body>
    </html>

lo que ocurre es que cuando lo visualizo en el navegador se ve así

enter image description here

y se desajusta cuando hago zoom. He probado a poner la vista del mapa en otro lugar y he cambiado el nivel de zoom y el problema ha permanecido.

Debo notar que esta capa es originalmente en 3424 (plano del estado de NJ) y el reproyecto nativo a delcared. imagen que se muestra a continuación

enter image description here

EDITAR 1

He traído una capa de condado que está en 4326 a geoserver y la he puesto en lugar de la capa de condado0 y se produce el mismo error... ¿tiene esto algo que ver con la configuración de las baldosas?

EDITAR 2

He sustituido mi propia capa por una capa de muestra que venía con la descarga del geoservidor 'usa:states' y ha ocurrido el mismo problema.

EDITAR 3

Añadí el '?' después de WMS y no funcionó, especifiqué la versión a 1.3.0 en los argumentos. nada está funcionando en absoluto. Ni idea de por qué

¿qué está pasando aquí? ¿por qué está mal? Estoy siguiendo el tutorial del folleto al pie de la letra

0 votos

¿Qué navegador utilizas? ¿Utiliza diferentes navegadores para probar la vista?

0 votos

Google chrome para mis pruebas. internet explorer tampoco funcionó

2voto

Ricardo Reyes Puntos 3428

Creo que necesitas el CSS para que funcione correctamente.

He visto estos problemas cuando no he cargado bien la biblioteca Leaflet.

Intente añadir esta línea a su archivo:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css">

Además, puedes empezar probando un servicio WMS externo, así podrás confirmar que el problema no es con el tuyo (que casi seguro que no lo es). Pero primero añade el archivo CSS.

0 votos

+1. Hay una página de demostración en leafletjs.com/examples/wms/wms.html que puede abrirse de forma independiente en leafletjs.com/examples/wms/wms-example1.html - copie el código de esto, y sustitúyalo por un enlace a su propio servicio WMS una vez que haya comprobado que lo básico funciona

0 votos

Sigo teniendo el mismo error después de añadir el archivo css...

1voto

Braiam Puntos 120

Tus cuadros delimitadores están mal. Parecen intercambiados entre Lat-Long y nativo.

Además, asegúrate de que la caché de los azulejos está desactivada hasta que se solucione el problema.

0 votos

¿por qué mis cuadros delimitadores están mal?

0 votos

@ziggy Puede que tus datos no estén en la proyección nativa, o que los hayas introducido a mano, o que haya un error en alguna parte.

0 votos

Voy a borrar la capa, proyectarla en postgis y traerla como 4326

1voto

Saad Puntos 57

Así que después de muchos intentos diferentes para tratar de arreglar este problema terminé cambiando la estructura de mi código y esto es lo que pude conseguir para trabajar

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <style>
    #map{ height: 100% }
  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  // initialize the map
  var map = L.map('map').setView([40.876,-74.9999], 13);

  // base maps
  var dlayery=L.tileLayer.wms('http://localhost:8080/geoserver/wms',{
              layers: 'pg_world:county0'
          }).addTo(map);

  </script>
</body>
</html>

ni idea de por qué el código de mi pregunta no funcionaba... tal vez tenía que ver con la función init....

0 votos

Sólo por interés, ¿puedes eliminar el archivo .css y ver si se rompe igual? Estoy bastante seguro de que eso lo hará.

0 votos

Cuando añadí el archivo css a través de su respuesta anterior nada cambió...

0 votos

@AlexLeith estabas en lo cierto quité el archivo css y se desajustó mucho

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X