How to add tile layer to map using mapboxgl.js

问题

Here m adding tile created using tiff

mapboxgl.accessToken ='pk.eyJ1IjoiZ2F1cmF2Y2F0c3RlY2giLCJhIjoiY2l1cGo0MTl4MDAxajJ1bng5a2xieTY0diJ9.0fDXNulI91U85ngSc4jGCg';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  zoom: 13,
  center: [-122.447303, 37.753574]
});

map.on('load', function () {
  map.addSource('terrain-data', {
    type: 'raster',
    url:'mapbox://gaurav.2on6cgzq'
  });
  map.addLayer({
    "id": "terrain-data",
    "type": "line",
    "source": "terrain-data",
    "source-layer": "contour",
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "#ff69b4",
      "line-width": 1
    }
  });
});

I am getting :

Error: Source layer "contour" does not exist on source "terrain-data" as specified by style layer "terrain-data"

回答1:

I do not believe the "source-layer": "contour" is applicable for raster sources whatsoever. See https://www.mapbox.com/mapbox-gl-js/example/map-tiles/ So get rid of that line.Looks like you will need a "tileSize": 256 option included as well on the source.

Also your layout and paint options are going to be unneeded as well.Those are options for vector or geojson sources. Those types of controls are not available on raster.

回答2:

The simplest way is to simply edit the tile layer in Mapbox Studio, and then upload it to mapbox.js. This way all you have to do is provide the link to the style as a source (Mapbox has a TON of documentation for this).

来源：https://stackoverflow.com/questions/40910666/how-to-add-tile-layer-to-map-using-mapboxgl-js

标签

javascript

leaflet

mapbox

mapbox-gl

mapbox-gl-js