当前位置：首页 > article >正文

arcgis for js实现FeatureLayer图层弹窗展示所有field字段

article 2024/12/29 0:57:09

效果和说明

feature图层中的矢量要素包含很多的属性，在点击要素时popupTemplate弹窗显示所有field字段值

在这里插入图片描述

实现代码

<!DOCTYPE html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        margin: 0;
      }
      #mapview {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.23/"></script>
  </head>
  <body>
    <div id="mapview"></div>

    <script>
      require(['esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer'], function (
        Map,
        MapView,
        FeatureLayer
      ) {
        // 初始化底图
        window.map = new Map({
          basemap: 'dark-gray-vector'
        })

        // 创建2维视图
        let view = new MapView({
          container: 'mapview',
          map: map,
          zoom: 11,
          center: [104.783916597735, 32.55699155692144] // 设置地图的初始化中心点坐标
        })

        let layer = new FeatureLayer({
          url: 'http://xxxxxxxx/MapServer', // 这里替换成自己的图层
          spatialReference: view.spatialReference,
          outFields: ['*'],
          hasM: true,
          hasZ: true
        })
        console.log(layer)

        map.add(layer)

        // 字段名称解析字典
        const keyMap = new Map()
        keyMap.set('XIAN', '县')
        keyMap.set('XIANG', '乡')

        // 图层加载完成后
        view.whenLayerView(layer).then(function (layerView) {
          const fields = layerView.layer.fields // 获取所有的字段对象
          // console.log(fields)

          const fieldInfos = []
          for (const { name } of fields) {
            // 排除不要的属性
            if (['FID', 'OID_'].includes(name)) {
              continue
            }
            fieldInfos.push({
              fieldName: name,
              label: name,
              // label: keyMap.get(name), // 如果字段名称需要转义
              isEditable: false,
              tooltip: '',
              visible: true,
              format: null,
              stringFieldOption: 'text-box'
            })
          }
          // console.log(fieldInfos)

          // 为图层绑定弹窗
          layer.popupTemplate = {
            title: '图层弹窗Title',
            content: [{ type: 'fields', fieldInfos: fieldInfos }]
          }
        })
      })
    </script>
  </body>
</html>