MapImageLayer - 动态数据图层与表连接

这个示例演示了如何在 MapImageLayer 中从一个已连接表数据源添加子图层。这对于希望访问和可视化来自非地理表的数据的场景非常有用，该表包含与地图服务子图层中的几何图形对应的记录。

该表必须存在于 Map Server 中已注册的动态工作空间中。在此示例中，我们从包含不同司法管辖区的人口普查数据的地图服务创建 MapImageLayer 。一个“ ancestry ”表发布在一个注册的工作空间中，其中包含美国每个州的总人数，他们可以将祖先追溯到许多不同的起源。通过创建具有表连接的动态图层，该数据可用于视图。要将表连接到州地图服务图层，您必须执行以下操作。

首先，用一个子图层构造 MapImageLayer 。由于子图层将根据服务目录中不可见的数据动态创建，我们需要指定数据的来源。在这种情况下，它是一个连接表。

source: {
  type: "data-layer",
  dataSource: {
    type: "join-table"
  }
}

然后我们需要定义连接的源:一个左表和一个右表。通常，左边的表是包含几何图形的表。在本例中，它是一个可以在服务目录中查看的地图服务图层。因为它有一个图层 ID 为 3，我们需要在 leftTableSource 的对象中指出这一点。

source: {
  type: "data-layer",
  dataSource: {
    type: "join-table",
    leftTableSource: {
      type: "map-layer",
      mapLayerId: 3
    }
  }
}

rightTableSource 是包含每个状态的 ancestry 编号的表。由于这不是一个地图服务图层，我们应该将其表示为具有 表格 数据源的数据图层，因为它是单个表。表数据源必须指示表所在的工作区 ID 和表的名称。

source: {
  type: "data-layer",
  dataSource: {
    type: "join-table",
    leftTableSource: {
      type: "map-layer",
      mapLayerId: 3
    },
    rightTableSource: {
      type: "data-layer",
      dataSource: {
        type: "table",
        workspaceId: "CensusFileGDBWorkspaceID",
        dataSourceName: "ancestry"
      }
    }
  }
}

因为 rightTableSource 是另一个数据图层，您可以通过将该对象的dataSource 设置为另一个表连接来创建嵌套的表连接。

但是，要完成此连接操作，您必须提供左表中的主键或字段名称，以及右表中的外键或字段名称。这会将非地理 ancestry 表中的记录与包含几何的地图服务图层相匹配。

最后，您必须指定连接的类型。在这种情况下，它是一个左外连接，因此我们可以保留地图服务图层中不匹配的记录。在 MapImageLayer 的上下文中，最终的源对象应如下所示：

const layer = new MapImageLayer({
  url: "https://sampleserver6.geosceneonline.cn/arcgis/rest/services/Census/MapServer",
  sublayers: [
    {
      // This ID does not relate to a service layer ID. It can be
      // anything you want it to be.
      id: 0,
      renderer: renderer,
      opacity: 0.75,
      source: {
        type: "data-layer",
        dataSource: {
          type: "join-table",
          leftTableSource: {
            type: "map-layer",
            mapLayerId: 3
          },
          rightTableSource: {
            type: "data-layer",
            dataSource: {
              type: "table",
              workspaceId: "CensusFileGDBWorkspaceID",
              dataSourceName: "ancestry"
            }
          },
          leftTableKey: "STATE_NAME",
          rightTableKey: "State",
          joinType: "left-outer-join"
        }
      }
    }
  ]
});

您可以通过浏览器的开发人员工具中的 Network 通信量访问对服务器的请求，从而在 services 目录中查看此动态连接。查看这个表连接并注意目录中存在的两个表的字段。您可以像查询其他图层一样查询动态图层。

在图层上设置渲染器或弹出窗口时，您必须在字段值前加上原始表名称。由于我们正在可视化具有挪威血统的人口百分比，因此我们将在渲染器的上下文中以下列方式引用字段：

const renderer = {
  type: "class-breaks",  // autocasts as new ClassBreaksRenderer()
  field: "ancestry.Norwegian",
  normalizationField: "states.POP2007",
  normalizationType: "field",
  classBreakInfos: [ ... ]
};