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

效果和说明

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

实现代码

html 复制代码
<!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>

如果要对字段弹窗字段值进行转义, 就必须通过其他方式来做了, 后续更新

相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js