Получение «Uncaught TypeError: this._map.hasLayer не является функцией» при добавлении листов листов в mapbox - PullRequest
Новая
       11

Получение «Uncaught TypeError: this._map.hasLayer не является функцией» при добавлении листов листов в mapbox

0 голосов
/ 15 мая 2018

Я пытаюсь добавить слои Leaflet на карту mapbox.Я использовал пример с официальной страницы листовки о том, как добавить слои в mapbox.

Но слои не отображаются и консоль возвращает ошибку "Uncaught TypeError: this._map.hasLayer не является функцией" .

Вот мой код: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<div id='map' style="position:relative;float:left;width:100%;height:100%;margin:0px 0px 0px 0px;z-index:1;"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYm9zc3RvbjgxMiIsImEiOiJjaW94NnBlY2cwMDNsejBtNTZucnV3ZDJpIn0.U1b4soqANbdiKr_hPGDO8g';

var map = new mapboxgl.Map({
  container: 'map',
  center: [-105.02, 39.61],
  zoom: 10,
  style: 'mapbox://styles/mapbox/streets-v9',
  hash: true,
  transformRequest: (url, resourceType)=> {
    if(resourceType == 'Source' && url.startsWith('http://myHost')) {
      return {
       url: url.replace('http', 'https'),
       headers: { 'my-custom-header': true},
       credentials: 'include'  // Include cookies for cross-origin requests
     }
    }
  }
});

var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.');

var cities = L.layerGroup([littleton, denver, aurora, golden]);

var grayscale = L.tileLayer('mapbox://styles/mapbox/streets-v9', {id: 'MapID'}),
    streets   = L.tileLayer('mapbox://styles/mapbox/streets-v9', {id: 'MapID'});


var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>

Пожалуйста, помогите мне найти проблему?

1 Ответ

0 голосов
/ 16 мая 2018

API для MapboxGL несовместим с API для Leaflet. Не ожидайте, что сможете вызывать функциональность Leaflet (например, добавление элемента управления картой) в карту MapboxGL.

Обратите внимание, что mapbox-gl-js отличается от mapbox-js. Последнее, на самом деле, основано на Leaflet.

...