Листовка, не добавляющая слой плитки к основанию

Я помогаю своим студентам с картой некоторых данных, связанных с ураганом Сэнди. Они имеют четыре слоя листов (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>
Источник

2 ответа

Решение

Ваш слой затопления должен быть добавлен на карту как overlay а не как basemap (плиточные слои могут быть как наложениями, так и базовыми картами).

Сначала вы захотите провести различие между слоями базовой карты и вашими наложениями.

Слои вашей базовой карты (улицы, спутник и т. Д.) - это слои, которые являются взаимоисключающими и всегда должны быть внизу.

Ваши слои наложения не являются взаимоисключающими и всегда будут располагаться поверх слоев базовой карты.

Следующий пример взят со страницы документации Leaflet LayersControl

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,

Источник

Я думаю, что это ошибка. Я тоже пробовал, но он работает неправильно. Пожалуйста, используйте метод yieldToBack() (или, если вы хотите, чтобы он находился спереди), или заставьте слой корректировать положение слоя: Итак: map.addLayer(layerSatellNow); layerSatelliteNow.bringToBack();

Источник
Другие вопросы по тегам