¿Implementar UTFGRID con MapServer y OpenLayers?

Question

Tengo problemas para utilizar el módulo utfgrid con openlayers. La implementación en el lado de Mapserver es bastante simple, aunque tengo dudas sobre el imagetype :

MAP
    IMAGETYPE   UTFGRID
    SIZE        2000 2000
    CONFIG "MS_ERRORFILE" "/ms4w/tmp/ms_error.txt"
    #DEBUG 4
    EXTENT -176.197 -31.0869 181.47 81.8381
    NAME "allexmaple"

    PROJECTION
        "init=epsg:4326"
    END 
    QUERYMAP
        STATUS ON
    END
    OUTPUTFORMAT
        NAME "utfgrid"
        DRIVER UTFGRID
        MIMETYPE "application/json"
        EXTENSION "json"
        FORMATOPTION "UTFRESOLUTION=4"
        FORMATOPTION "DUPLICATES=false"
    END
    WEB
        IMAGEPATH "tmp/"
        IMAGEURL "tmp/"
    END
    SYMBOL
        NAME "mysymbol"
        TYPE pixmap
        ANCHORPOINT 0.5 0.5
        IMAGE  "icons/mysymbol.png"
    END 

    LAYER
        TOLERANCE 10
        CONNECTIONTYPE postgis 
        NAME "example"
        CONNECTION "host=127.0.0.1 dbname=ais_data user=postgres password=admin port=5432"
        DATA "geom from mytable using srid=4326"
        STATUS ON
        TYPE POINT
        UTFITEM   "id"
        UTFDATA   "{\"id\":\"[id]\",\"name\":\"[name]\"}"
        TEMPLATE 'query.html'
        HEADER 'header.html'
        FOOTER 'footer.html'
        CLASSITEM "ct"

        CLASS
            EXPRESSION "mysymbol"
            STYLE
                ANGLE [angle]
                SYMBOL 'mysymbol' 
            END # style 
        END # class 
    END
END

En cambio, Openlayers no tiene un ejemplo eficaz. No sé qué proporcionar en mi URL. Esto es lo que he intentado:

var gridSource = new ol.source.TileUTFGrid({
       url: 'http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&tiled=true&mode=map&type=utfgrid&format=application/json'
      });
 var mySuperLayer = new ol.layer.Tile({
           source: gridSource
      });

Pero no aparece nada y mi URL se queda en pendiente hasta el tiempo de espera

Answer 1

ol.source.TileUTFGrid es la fuente de capas para los datos de interacción UTFGrid cargados desde el formato TileJSON. url opción de TileUTFGrid debe apuntar a json con datos en TileJSON formato. En su caso puede ser simple tile.json creado manualmente:

{
    "version": "2.1.0",
    "tiles": [
        "http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=png"
    ],
    "grids": [
        "http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=utfgrid"
     ]
}

No olvides añadir al mapfile la siguiente sección:

OUTPUTFORMAT
    NAME          "png"
    EXTENSION     "png"
    MIMETYPE      "image/png"
    DRIVER         AGG/PNG
    IMAGEMODE      RGBA
    FORMATOPTION  "INTERLACE=OFF"
END

Conéctalo a OpenLayers (no olvides modificar las opciones de vista y la ruta del archivo json):

var mapLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
        url: "http://localhost:5000/tile.json"
    })
});

var gridSource = new ol.source.TileUTFGrid({
    url: "http://localhost:5000/tile.json"
});

var gridLayer = new ol.layer.Tile({source: gridSource});

var map = new ol.Map({
    layers: [mapLayer, gridLayer],
    target: "map",
    view: new ol.View({
        center: [9449777.3, 6914882.51],
        zoom: 7
    });
});

map.on("click", function(evt) {
    var viewResolution = map.getView().getResolution();

    gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewResolution,
        function (data) { console.log(data); }
    );
});

Parece que UTFGrid no funciona en Windows, ver #5432 . En Linux todo funciona bien en mi caso.

Answer 2

Más un añadido a @drnextgis que una respuesta completa a tu pregunta.

Para evitar crear un tile.json puede reemplazar el archivo :

var gridSource = new ol.source.TileUTFGrid({
  url: "http://localhost:5000/tile.json"
});

con:

var gridSource = new ol.source.TileUTFGrid({
  tileJSON: {
    "version": "2.1.0",
    "grids": [
      "http://localhost:5000/cgi-bin/mapserv.exe?map=/ms4w/apps/tutorial/htdocs/essai.map&layers=example&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=utfgrid"
    ]
  }
});

Se debe a la adición para apoyar GeoServer más fácilmente, sin un archivo intermedio (Ver este PR para más detalles https://github.com/openlayers/ol3/pull/5120 )