Изменить существующее свойство отступа MapView - PullRequest
Новая
       10

Изменить существующее свойство отступа MapView

0 голосов
/ 25 октября 2018

Я создаю приложение, которое имеет боковую панель, которая открывается по умолчанию в настольных приложениях, и использую опцию padding ( пример приложения ), доступную в 4.9 ArcGIS JavaScript API, Iхотите сместить сторону экрана, пока открыта боковая панель.При изменении размера приложения я хочу удалить смещение свойства и каким-то образом обновить или перезагрузить исходный вид.Я смог заставить его работать, воссоздав вид, который вызывает странную вспышку на карте.Я сделал простой jsfiddle, показывающий что-то похожее на то, что я хочу сделать.https://jsfiddle.net/booshwa/t05ks1u4/. Когда пользователь щелкает по кнопке недавно, новый экран строится с отступами, если боковая панель открыта, или устанавливает отступ на 0, если боковая панель скрыта.Ниже приведен код JavaScript в jsfiddle. 

require([
  "esri/Map",
  "esri/views/MapView"
], function(
        Map,
         MapView
    ) {

  // Create the Map
  var map = new Map({
    basemap: "topo"
  });

  // Create the view set the view padding to be 320 px from the right
  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-74.045459, 40.690083], // Liberty Island, NY, USA
    zoom: 16,
    padding: {
      right: 320 // Same value as the #sidebar width in CSS
    }
  });

  var sidebar_open = true;

  // Show / Hide the sidebar
  $("#toggle_sidebar").click(function() {
    if (sidebar_open) {
        $("#sidebar").css({display: "none"});
    } else {
        $("#sidebar").css({display: "block"});
    }
    sidebar_open = !sidebar_open;
  });

    // Builds a new view based on if the sidebar is open or closed
  $("#toggle_view").click(function() {
        var padding = 0;
        if (sidebar_open) {
        padding = 320;
    }

    // Recreate the view to make the padding reset
    // => Is this the only way to update a view?
    view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-74.045459, 40.690083], // Liberty Island, NY, USA
      zoom: 16,
      padding: {
        right: padding // Same value as the #sidebar width in CSS
      }
    });

  });

});

1 Ответ

0 голосов
/ 02 ноября 2018

Вам просто нужно изменить padding представления, а затем использовать метод view.goTo, чтобы перецентрировать mapView следующим образом:

https://jsfiddle.net/t05ks1u4/55/

  $("#toggle_view").click(function() {
    var padding = 0;
    if (sidebar_open) {
       padding = 320;
    }

    view.padding = {left:0, top: 0, right: padding, bottom: 0};
    view.goTo(view.center)

  });
...