arcgis for js实现popupTemplate弹窗field名称和值转义

效果和说明

上两篇实现了popupTemplate弹窗展示所有field字段

这里主要另起一篇对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%;
      }
      * {
        margin: 0;
        padding: 0;
      }

      .popup-template-content {
        border: 1px solid #ccc;
        border-bottom: 0;
      }
      .popup-template-content .field-row {
        margin: 0;
        display: flex;
        border-bottom: 1px solid #ccc;
        border-left: 3px solid #ff6600;
      }
      .popup-template-content .field-row .dt {
        padding: 5px 10px;
        flex: 1;
        border-right: 1px solid #ccc;
      }
      .popup-template-content .field-row .db {
        padding: 5px 10px;
        flex: 2;
        text-align: left;
      }
    </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] // 设置地图的初始化中心点坐标
        })

        // 字段值转义字典
        const valueMap = {
          林班: {
            1: '测试1',
            2: '测试2'
          },
          小班: {
            100: '一般用材林',
            101: '速生丰产用材林'
          },
          细班: {
            1: '测试细班1',
            2: '测试细班2'
          }
        }

        let layer = new FeatureLayer({
          url: 'http://xxxxxxxxxxxxxxxxxxxxxxxxx/MapServer', // 替换成自己的图层
          spatialReference: view.spatialReference,
          outFields: ['*'],
          hasM: true,
          hasZ: true,
          popupTemplate: {
            title: '图层弹窗Title',
            content: function (feature) {
              console.log(feature)

              // 获取字段
              var attributes = feature.graphic.attributes
              let html = '<div class="popup-template-content">'
              for (const key in attributes) {
                // 排除不要的属性
                if (['FID', 'OID_'].includes(key)) {
                  continue
                }
                // 对字段值进行转义
                let value = attributes[key]
                if (valueMapXB[key]) {
                  value = valueMap[key]?.[value] ?? '-'
                }
                // html += `<p class="field-row">
                //   <span class="dt">${key}</span>
                //   <span class="db">${attributes[key]}</span>
                // </p>`
                html += `<p class="field-row">
                  <span class="dt">${key}</span>
                  <span class="db">${value}</span>
                </p>`
              }
              html += '</div>'

              return html
            }
          }
        })
        console.log(layer)

        map.add(layer)
      })
    </script>
  </body>
</html>
相关推荐
盛夏绽放6 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh8 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v9 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh9 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
项目題供诗9 小时前
React学习(十二)
javascript·学习·react.js
无羡仙9 小时前
Webpack 背后做了什么?
javascript·webpack
roamingcode10 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS10 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro11 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron