search

mapbox / mapbox-gl-js

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
https://docs.mapbox.com/mapbox-gl-js/
Other
11.21k stars 2.22k forks source link

mapbox-gl-js can not render pyramid images #5597

Closed shiweihappy closed 7 years ago

shiweihappy commented 7 years ago

hi, when i use mapbox-gl-js to render pyramid image and image not find correct.

  1. source url is https://github.com/shiweihappy/mapbox-gl-js-source

source

  1. i use gdal2tile.py to create pyramid image:

python gdal2tiles.py -r near -s EPSG:3857 -z "0-15" -w openlayers a4.tif ./a4/

  1. then i put pyramid images to local nginx static source folder

xxxx/tiles/a4/xxxxx

  1. nginx already set cors and other vector tiles use correctly

  2. html render code:

var ndvi_source = {
    "type": "raster",
    'tiles': [
        "http://localhost:7777/tiles/a4/{z}/{x}/{y}.png"
    ],
    'tileSize': 256,
    'bounds': [121.849365234, 41.428569989, 121.947212219, 41.4838910427]
};
var ndvi_layer = {
    "id": "ndvi_layer_id",
    "type": "raster",
    "source": "ndvi_source",
    'paint': {}
};
map.addSource('ndvi_source', ndvi_source);
map.addLayer(ndvi_layer);
  1. then open html i found that, mapbox-gl-js can not find pyramid image, but i use leaflet or openlayer3 is correct. so i do not know why mapbox-gl-js not find correct image x/y/z?
jfirebaugh commented 7 years ago

gdal2tiles generates tiles with TMS numbering scheme, so you need to set "scheme": "tms" in the source options. Sorry for not having documentation for this property yet -- it'll be documented on https://www.mapbox.com/mapbox-gl-js/style-spec/#sources-raster in the next release.

shiweihappy commented 7 years ago

@jfirebaugh , thank you very much!