Как вы называете компоненты высоты из Mapbox Terrain-RGB? - PullRequest
Новая
       13

Как вы называете компоненты высоты из Mapbox Terrain-RGB?

0 голосов
/ 01 апреля 2019

Я пытаюсь сделать интерактивную карту, используя данные Leaflet и Mapbox, показывающие, как будет меняться распределение видов с увеличением высоты, и хотел бы сделать это слайдером. Тем не менее, я не знаю, как вызвать слой terrain-rgb в Mapbox. Пока это мой код:

Я просмотрел их документацию (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)
 });

С помощью ползунка я надеюсь, что смогу изменить спасение и увидеть изменения в степени распространения вида

...