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>

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

相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
前端君4 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6145 小时前
Web前端面试题(2)
前端
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队6 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite