Question

我正在帮助我的学生提供一些与飓风桑迪相关的数据地图。它们有四个图块层（MapBox Street，MapBox Satellite，NOAA Satellite和NOAA Inundation）和几个矢量图层。

首次加载时，地图会在顶部显示带有一些矢量数据的MapBox Streets图块，并能够切换到MapBox Satellite图层作为基本地图。然后，用户可以在基本地图的顶部添加淹没层（淹没层足够复杂，需要切片而不是渲染的多边形）。

将淹没图层添加到地图后切换基础地图图层时会出现问题。我的学生使用L.map.addLayer(data, insertAtTheBottom)函数将新的基本地图图层添加到底部（删除旧的基本地图图层后），但由于某种原因，图层仅添加到矢量图层下方，而不是在淹没图块图层下方。当基础层切换出来时，你可以清楚地看到淹没瓦片层仍然存在，它只是不会在新的基础层之上。

有谁知道为什么会这样？该文档指出此参数可确保将新图层添加到所有其他图层下方。

网页的实例：http://personal.psu.edu/rsm5068/src/map.html

相关代码段

<body>
  <div id="map"></div>
  <div id="controls">
    <input type="checkbox" id="toggleSatellite" /><label for="toggleSatellite">Toggle Satellite</label>
  </div>
  <script type="text/javascript">

    var map = null,
        layerStreets,
        layerSatelliteNow,
        layerSatelliteThen,
        layer1MSurge,
        layer3MSurge,
        lgrpBase,
        lgrpSurge;

    map = L.map("map", {
      'center' : L.latLng(40.7127, -74.0059),
      'zoom' : 10,
      'minZoom' : 9,
      'maxZoom' : 16
    })

    // ---- Tile Layers ----

    layerStreets = L.mapbox.tileLayer("user.id");
    layerSatelliteNow = L.mapbox.tileLayer("user.id");
    layer1MSurge = L.mapbox.tileLayer("user.id");
    layer3MSurge = L.mapbox.tileLayer("user.id");

    lgrpSurge = L.layerGroup();
    lgrpSurge
      .addLayer(layer3MSurge)
      .addLayer(layer1MSurge);

    // ---- Adding Data to Map ----

    map
      .setMaxBounds(L.latLngBounds(L.latLng(40.4600,-74.33),L.latLng(40.9400,-73.667)))
      .addLayer(layerStreets)
      .addLayer(lgrpSurge)
      .addLayer(fgrpEvacCenters);

    // ---- Interactivity ----

    $("#toggleSatellite").change(function () {
      if ($("input[id='toggleSatellite']:checked").length > 0) {
        map
          .removeLayer(layerStreets)
          .addLayer(layerSatelliteNow, true);
      } else {
        map
          .removeLayer(layerSatelliteNow)
          .addLayer(layerStreets, true);
      }
    })
  </script>
</body>

Answer 1

您的“淹没”图层应作为overlay而不是basemap添加到地图中（平铺图层可以是叠加层和底图）。

首先，您需要区分底图图层和叠加层。

您的底图图层（街道，卫星等）是互斥的图层，应始终位于底部。

您的叠加层不是互斥的，并且始终位于底图图层的顶部。

以下示例来自Leaflet LayersControl docs page

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/API-key/{styleId}/256/{z}/{x}/{y}.png',
    cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade';

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
    midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999,   attribution: cloudmadeAttribution}),
    motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561, attribution: cloudmadeAttribution});

var map = L.map('map', {
    center: new L.LatLng(39.73, -104.99),
    zoom: 10,
    layers: [minimal, motorways, cities]
});

var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight
};

var overlayMaps = {
    "Motorways": motorways,
    "Cities": cities
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

此时，底图（最小和夜景）将始终位于叠加层（高速公路和城市）下方。

确保您的Inundation图层以overlay而非basemap的形式添加到地图中。

Answer 2

我认为这是一个错误。我也试过了，但是工作不正常。请使用bringToBack（）（或者如果你想在前面使用bringToFront（））来强制图层纠正位置：所以： map.addLayer（layerSatelliteNow）; layerSatelliteNow.bringToBack（）;

传单不向底部添加平铺层

2 个答案: