Брошюра, в которой слой плитки не добавляется снизу

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

javascript jquery leaflet mapbox
person RyanMullins    schedule 21.04.2014    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

Сначала вы захотите различать слои базовой карты и наложения.

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

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

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

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.

person sfletche    schedule 24.04.2014
comment
Спасибо за указатель. Я все еще считаю такое поведение довольно странным, поскольку в документации для map.addLayer () явно указано, что слой вставлен под всеми другими (выделено мной). Если это особый случай, его нужно как-то обрисовать в общих чертах или сделать не таким особенным. - person RyanMullins; 24.04.2014
comment
Рад помочь. Я согласен, что документы немного вводят в заблуждение. Видел некоторые обсуждения этих документов здесь. В качестве альтернативы вы также можете попробовать принестиToBack (). - person sfletche; 24.04.2014

arrow_upward
1
arrow_downward

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

person user3546827    schedule 23.04.2014
comment
Спасибо за ответ. Я попробовал это решение, и оно работает очень хорошо. Я обнаружил, что лучший результат - это вызвать callToBack () для переменной, в которой я храню каждый слой внутри обработчика события load. Извините, я не могу выбрать 2 правильных ответа. - person RyanMullins; 24.04.2014