修改现有的 MapView padding 属性

Question

我正在构建一个应用程序，它有一个默认在桌面应用程序上打开的侧边栏，并使用 padding（example app) option available with 4.9 of the ArcGIS JavaScript API, I want to offset the side of the screen while the sidebar is opened. When the app is resized I want to remove the property offset and somehow refresh or reload the original View. I was able to get it working by re-creating the view which causes a weird flash on the map. I made a simple jsfiddle showing something similar to what I want to do. https://jsfiddle.net/booshwa/t05ks1u4/。当用户点击中心按钮时如果侧边栏打开，则使用填充构建新视图；如果侧边栏隐藏，则将填充设置为 0。下面是 jsfiddle 中的 JavaScript。

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
      }
    });

  });

});

Answer 1

您只需修改视图的 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)

  });

修改现有的 MapView padding 属性

Modify existing MapView padding property

javascript

arcgis-js-api