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>

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

相关推荐
一只小灿灿14 分钟前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜0526 分钟前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau1 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123451 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw01 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator1 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e1 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景1 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing2 小时前
前端面试常考题目详解
前端·javascript
Boilermaker19923 小时前
【Java EE】SpringIoC
前端·数据库·spring