ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素

这一节我们来看看弹窗的位置和弹窗上能放什么。

先一句话总结：

位置：可以随便（点击时出现或者一直固定在某个位置），也可以指定位置

能放什么：四种，文字、媒体（图片等）、表格、附件。

【Part I 位置】

这一例子和下一个例子中，CDN的引用多了一行

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.2/dijit/themes/claro/claro.css">
  <script src="https://js.arcgis.com/4.2/"></script>

我也不知道多出来这个claro.css是干嘛的，不过还是注意的好。

这个例子官方给的很复杂，尽管实现上很简单。从html代码开始看看吧！

<body>
  <div id="viewDiv">
    <div class="docking-control">
      <label for="dockPositionControl">Popup Dock Position</label>
      <select id="dockPositionControl">
        <option selected value="auto">Auto</option>
        <option value="top-left">Top Left</option>
        <option value="top-center">Top Center</option>
        <option value="top-right">Top Right</option>
        <option value="bottom-left">Bottom Left</option>
        <option value="bottom-center">Bottom Center</option>
        <option value="bottom-right">Bottom Right</option>
      </select>
    </div>
  </div>
</body>

可以看到有一个select选择表单，内含7个可选项，第一个被定义为默认选中的项目。每个option标签的value对应PopupTemplate的position的值。

引用

照常，给出引用。

require(
    [
        "esri/Map","esri/views/MapView","esri/WebMap",
        "dojo/dom", "dojo/on", "dojo/domReady!"
    ],
    function(Map,MapView,WebMap,dom,on){
    }
);

好的，没有疑问。下一个。

函数参数骨架

function(Map,MapView,WebMap,dom,on){
    var webmap = new WebMap({...});
    var view = new MapView({...});
    popup = view.popup;
    view.then(function(){...});
}

好的，没有疑问，下——好吧，有疑问，这个popup是什么？就是view实例化后的内置默认弹窗对象啊！（看我上一篇随笔）

——既然说到这个就贴多一部分代码。

var view = new MapView({
  map: webmap,
  popup: {
    dockEnabled: true,
    dockOptions: {
      buttonEnabled: false,
      breakpoint: false
    }
  },
  container: "viewDiv"
});

对，就是MapView的实例化代码。

其他的地方没什么不同，就popup这个不同，与上一节方法略微不同，上一节说的是先声明一个匿名对象，而这里直接把匿名对象在构造函数里写上了。

dockEnabled就是是否能停靠在页面旁边。

dockOptions是Object类型，这里写了buttonEnabled和breakpoint两个属性。意义分别为“停靠按钮是否隐藏”、“是否在点击的地方显示”（后一个参数不确定是什么意思，我猜的，英文水平不是很好哈哈）

view.then()这个方法见我第七篇随笔。

总之，数据（用的是WebMap）和视图都准备好后，就要在then()方法里设置相关的操作了。

then()方法回调函数

view.then(function(){
    var centerPoint = view.center.clone();

    popup.open({});
    popup.watch("currentDockPosition", function(value){...});

    var selectNode = dom.byId("dockPositionControl");
    on(selectNode,"change",funcion(e){});
});

整体大概是上面的样子。

解读如下：

首先，获取view的中央位置。

然后，打开view的默认弹窗。

之后，默认弹窗监听自己的currentDockPosition属性，如果currentDockPosition属性发生更改，就重新打开一次弹窗。

最后获取下拉可选框里的值，把popup的position属性更改。

——————

是不是很乱？

我也觉得很乱。

实际在页面操作的结果如下：

刚打开的页面是这样的：

ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素

中间的下拉框选择控件是html组织的，并不是AJS的widget；右上角是“buttonEnabled: false,breakpoint: false”+默认position的结果。

当我切换中间下拉框的选项时，如：

ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素

默认的弹窗的位置就发生了变化。这里，是触发了上面代码中“on(selectNode,"change",function(e){...});”这段代码。

而点击视图任意位置时，如：

ArcGIS API for JavaScript 4.2学习笔记[14] 弹窗的位置、为弹窗添加元素

view的弹窗的内容（content）就发生了变化（至于popup的content属性是怎么更改的，不知道，代码里没有，可能是WebMap的特殊性吧）

好了，官方绕了这么大一圈就是想说：

要想改popup的位置，只需更改dockOptions这个属性下的position属性即可。

目前只支持上下×左中右配对的6个位置。

所以各位看官看到这里知道原理就行啦，给出on(selectNode,"change",function(e){...});这段完整的代码，就更加清晰了。

on(selectNode, "change", function (e) {
  popup.set("dockOptions", {
    breakpoint: false,
    buttonEnabled: false,
    position: e.target.value
  });
});

源代码也给完：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Dock Positions with Popup - 4.2</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    
    .docking-control {
      font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
      position: absolute;
      z-index: 10;
      top: 50%;
      left: 50%;
      width: 250px;
      height: 80px;
      padding: 10px;
      box-sizing: border-box;
      margin: -40px 0 0 -125px;
      background-color: #fff;
      color: #323232;
      text-align: center;
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    }
    
    .docking-control label {
      display: inline-block;
      font-weight: bold;
      margin: 0 0 10px 0;
      padding: 0;
      font-size: 16px;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
  <script src="https://js.arcgis.com/4.2/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/WebMap",

      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function (
      Map, MapView, WebMap,
      dom, on
    ) {

        var webmap = new WebMap({
          portalItem: { // autocasts as new PortalItem()
            id: "3af548bac6054938b615d08104197ba0"
          }
        });

        var view = new MapView({
          map: webmap,
          popup: {
            dockEnabled: true,
            dockOptions: {
              // Disables the dock button from the popup
              buttonEnabled: false,
              // Ignore the default sizes that trigger responsive docking
              breakpoint: false,
            }
          },
          container: "viewDiv"
        });

        popup = view.popup;

        view.then(function () {

          var centerPoint = view.center.clone();

          popup.open({
            title: "Popup dock positions",
            location: centerPoint,
            content: "Use the control in the center of the map to change the location where the popup will dock."
          });

          // Watch currentDockPosition of the popup and open the 
          // popup at the at position. 
          popup.watch("currentDockPosition", function (value) {
            popup.open();
          });

          var selectNode = dom.byId("dockPositionControl");

          // Let user change the position dockOptions.position property of the 
          // popup at runtime from the drop-down list. 
          on(selectNode, "change", function (e) {
            popup.set("dockOptions", {
              breakpoint: false,
              buttonEnabled: false,
              position: e.target.value
            });
          })

        });
      });
  </script>
</head>

<body>
  <div id="viewDiv">
    <div class="docking-control">
      <label for="dockPositionControl">Popup Dock Position</label>
      <select id="dockPositionControl">
        <option selected value="auto">Auto</option>
        <option value="top-left">Top Left</option>
        <option value="top-center">Top Center</option>
        <option value="top-right">Top Right</option>
        <option value="bottom-left">Bottom Left</option>
        <option value="bottom-center">Bottom Center</option>
        <option value="bottom-right">Bottom Right</option>
      </select>
    </div>
  </div>
</body>

</html>

Position源代码