1. TileJSON. Согласно документации за поддержку UTFGrid со стороны OpenLayers отвечает класс ol.source.TileUTFGrid (Layer source for UTFGrid interaction data loaded from TileJSON format). Мы видим, что тут возникает упоминание некоего TileJSON формата, с которым большинству до этого сталкиваться не приходилось. Что же это за формат? А это очередное изобретение Mapbox, представляющее собой формат описания тайловых наборов, репозиторий. Всё что нам пока нужно знать - это то, что в этом формате можно описать URL-ы до обычных тайлов и до тайлов UTFGrid, например:
Код: Выделить всё
{
"version": "1.0.0",
"tiles": [
"https://a.tiles.mapbox.com/v4/mapbox.geography-class/{z}/{x}/{y}.png",
"https://b.tiles.mapbox.com/v4/mapbox.geography-class/{z}/{x}/{y}.png"
],
"grids": [
"https://a.tiles.mapbox.com/v4/mapbox.geography-class/{z}/{x}/{y}.grid.json",
"https://b.tiles.mapbox.com/v4/mapbox.geography-class/{z}/{x}/{y}.grid.json"
]
}
Код: Выделить всё
MAP
IMAGETYPE UTFGRID
SIZE 2000 2000
EXTENT 75.0819396972656 49.0830841064453 89.8699798583984 57.2502746582031
NAME geosample
PROJECTION
"init=epsg:4326"
END
OUTPUTFORMAT
NAME "png"
EXTENSION "png"
MIMETYPE "image/png"
DRIVER AGG/PNG
IMAGEMODE RGBA
FORMATOPTION "INTERLACE=OFF"
END
OUTPUTFORMAT
NAME "utfgrid"
MIMETYPE "application/json"
DRIVER UTFGRID
EXTENSION "json"
FORMATOPTION "UTFRESOLUTION=4"
FORMATOPTION "DUPLICATES=false"
END
LAYER
CONNECTIONTYPE postgis
NAME admin
CONNECTION "host=gis-lab.info dbname=geosample user=guest password=guest"
DATA "the_geom from admin using srid=4326"
TYPE POLYGON
UTFITEM gid
UTFDATA "{\"gid\":\"[id]\",\"name\":\"[name]\"}"
CLASS
NAME admin
STYLE
COLOR 100 100 100
END
END
END
END
Код: Выделить всё
{
"version": "2.1.0",
"tiles": [
"http://localhost:8001/cgi-bin/mapserv?map=utfgrid.map&layers=admin&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=png"
],
"grids": [
"http://localhost:8001/cgi-bin/mapserv?map=utfgrid.map&layers=admin&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=utfgrid"
]
}
Код: Выделить всё
var mapLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://localhost:8001/tile.json'
})
});
var gridSource = new ol.source.TileUTFGrid({
url: "http://localhost:8001/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 viewRes = map.getView().getResolution();
gridSource.forDataAtCoordinateAndResolution(evt.coordinate, viewRes, function (data) {
console.log(data);
});
});
Важно. Растровые тайлы и UTFGrid не связаны между собой ничем, кроме как адресацией xyz. То есть в данном примере наш TileJSON файл мог не содержать секцию "tiles", в этом случае мы бы просто подключали растровые тайлы не через ol.source.TileJSON, а, например, через ol.source.XYZ.
UPD.: как мне тут подсказывают - в случае с ol.source.TileUTFGrid можно не создавать отдельный файл tile.json, а передать его параметры непосредственно при инициализации хранилища:
Код: Выделить всё
var gridSource = new ol.source.TileUTFGrid({
tileJSON: {
"version": "2.1.0",
"tiles": ["http://localhost:8001/cgi-bin/mapserv?map=utfgrid.map&layers=admin&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=png"],
"grids": ["http://localhost:8001/cgi-bin/mapserv?map=utfgrid.map&layers=admin&mode=tile&tile={x}+{y}+{z}&tilemode=gmap&map.imagetype=utfgrid"]
}
});