Question

我正在尝试使用Leaflet和Mapbox数据制作交互式地图，该数据显示物种分布将随着海拔高度的变化而变化，并希望使其成为滑块。但是，我不知道如何调用Mapbox的terrain-rgb层。到目前为止，这是我的代码：

我已经查看了他们的文档（https://docs.mapbox.com/help/troubleshooting/access-elevation-data/），但是我不太理解

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Physical Vulnerability: Sea Level Rise in Vancouver, B.C.</title>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
   <!-- Leaflet styles and code. -->
   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
   <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
    integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
    crossorigin=""></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <!-- Mapbox styles and code. -->
 <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
 <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>

 </head>
 <body>

   <div id="map" class="map"></div>

   <script>

   //Mapbox Access Token regquired to access basemaps and elevation data
   //L.mapbox.accessToken = 'pk.eyJ1IjoibXljaGUxMWV3IiwiYSI6ImNqcnNkN3hocDFvazk0M3JvdWtya2YyYXkifQ.YaXS3C0R0dBAkDinTx1z8w';

   //Create the basemap
   var map = L.map('map').setView([49.263, -123.152], 10);

   // Add the stlye to the map
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);
 //Load Mapbox's Terrain v2 tile layer: this will be used to extract the elevation data

 map.on('load', function() {
   map.addSource('elevation', {
     type: 'raster',
     url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=pk.eyJ1IjoibXljaGUxMWV3IiwiYSI6ImNqcnNkN3hocDFvazk0M3JvdWtya2YyYXkifQ.YaXS3C0R0dBAkDinTx1z8w'
   });

   map.addLayer({
     'id':'pngraw',
     'source': 'raster'
   }).addTo(map)
 });

我希望借助滑块可以改变海拔，并观察物种范围的变化

您如何从Mapbox的Terrain-RGB中调用高程分量？

0 个答案: