如何使用 mapboxgl.js 将切片图层添加到地图

Question

此处 m 添加使用 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
    }
  });
});

我得到：

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

Answer 1

我认为 "source-layer": "contour" 不适用于光栅源。请参阅 https://www.mapbox.com/mapbox-gl-js/example/map-tiles/ 所以去掉那个 line.Looks 就像你需要在源代码中包含一个 "tileSize": 256 选项一样。

您的布局和绘画选项也将不再需要，因为 well.Those 是矢量或 geojson 源的选项。这些类型的控件在光栅上不可用。

Answer 2

最简单的方法就是在Mapbox Studio中简单编辑瓦片图层，然后上传到mapbox.js。通过这种方式，您所要做的就是将 link 作为源提供给样式（Mapbox 对此有大量文档）。

如何使用 mapboxgl.js 将切片图层添加到地图

How to add tile layer to map using mapboxgl.js

javascript

leaflet

mapbox

mapbox-gl

mapbox-gl-js