在Mapbox中添加Leaflet图层触发Uncaught TypeError错误求助

嘿，我帮你找出问题所在啦！你遇到的Uncaught TypeError: this._map.hasLayer is not a function错误，核心原因是混用了两个独立地图库的API：Leaflet和Mapbox GL JS是完全不同的地图框架，它们的对象和方法不能直接交叉使用——你把Leaflet的L.control.layers()控件加到了Mapbox GL的map实例上，但Mapbox的地图对象根本没有Leaflet的hasLayer方法，这就导致了报错。

下面给你两种可行的解决方案，你可以根据需求选择：

方案一：用Leaflet作为基础地图，集成Mapbox图层 #

如果你想继续使用Leaflet的标记、图层组和控件，应该直接用Leaflet创建地图实例，再把Mapbox的瓦片图层加载进来，而不是用Mapbox GL JS创建地图。修改后的完整代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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;z-index:1;"></div>
<script>
  // 用Leaflet初始化地图
  var map = L.map('map').setView([39.61, -105.02], 10);

  // 将Mapbox瓦片图层加载到Leaflet中
  L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYm9zc3RvbjgxMiIsImEiOiJjaW94NnBlY2cwMDNsejBtNTZucnV3ZDJpIn0.U1b4soqANbdiKr_hPGDO8g', {
    maxZoom: 18,
    attribution: 'Map data &copy; OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
    id: 'mapbox/streets-v9'
  }).addTo(map);

  // 创建Leaflet标记和图层组
  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]);

  // 定义基础图层（Mapbox不同样式）
  var grayscale = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYm9zc3RvbjgxMiIsImEiOiJjaW94NnBlY2cwMDNsejBtNTZucnV3ZDJpIn0.U1b4soqANbdiKr_hPGDO8g', {id: 'MapID'}),
      streets = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYm9zc3RvbjgxMiIsImEiOiJjaW94NnBlY2cwMDNsejBtNTZucnV3ZDJpIn0.U1b4soqANbdiKr_hPGDO8g', {id: 'MapID'});

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

  var overlayMaps = {
    "Cities": cities
  };

  // 现在可以正常添加Leaflet的图层控件到Leaflet地图实例
  L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>

方案二：基于Mapbox GL JS实现类似功能 #

如果你更倾向于使用Mapbox GL JS作为基础地图，就需要用Mapbox自己的API来实现标记和图层切换，而不是依赖Leaflet的组件。示例代码如下：

<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' />
<div id='map' style="position:relative;float:left;width:100%;height:100%;margin: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
  });

  // 添加Mapbox原生标记
  new mapboxgl.Marker()
    .setLngLat([-105.02, 39.61])
    .setPopup(new mapboxgl.Popup().setText('This is Littleton, CO.'))
    .addTo(map);

  new mapboxgl.Marker()
    .setLngLat([-104.99, 39.74])
    .setPopup(new mapboxgl.Popup().setText('This is Denver, CO.'))
    .addTo(map);

  // 实现基础样式切换（Mapbox没有内置图层切换控件，这里可以自定义或用逻辑切换）
  // 示例：添加一个按钮切换到灰度样式
  const switchBtn = document.createElement('button');
  switchBtn.textContent = '切换到灰度';
  switchBtn.style.position = 'absolute';
  switchBtn.style.top = '10px';
  switchBtn.style.right = '10px';
  switchBtn.style.padding = '8px';
  document.getElementById('map').appendChild(switchBtn);

  switchBtn.addEventListener('click', () => {
    map.setStyle(map.getStyle().name === 'Streets' ? 'mapbox://styles/mapbox/light-v10' : 'mapbox://styles/mapbox/streets-v9');
  });
</script>

总结一下 #

你只需要记住：Leaflet的组件只能和Leaflet地图实例配合使用，Mapbox GL JS的组件也只能和自己的地图实例配合，不要交叉混用两者的API，这样就能避免这类类型错误啦。

内容的提问来源于stack exchange，提问作者bohdan baida