当前位置: 首页 > news >正文

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

效果和说明

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

这里主要另起一篇对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%;}* {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.attributeslet 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>

http://www.mrgr.cn/news/71868.html

相关文章:

  • 05-接口文档、根据接口文档完善登录功能
  • 在 .NET 6.0 中创建用于 CRUD 操作的 Web API
  • SharePoint Online共享链接的参数是做什么的?
  • RabbitMq项目实战--延迟队列实现超时订单处理
  • 【前端面试系列】JavaScript闭包
  • JMeter基础篇
  • MySQl基础----Linux下数据库的密码和数据库的存储引擎(内附 实操图和手绘图 简单易懂)
  • PCL 点云分割 基于超体素的分割
  • 线上问题的排查之MySQL死锁如何排查
  • 25浙江省考-专项刷题(资料分析)-错题本
  • 力扣 LeetCode 142. 环形链表II(Day2:链表)
  • 字节青训-多米诺骨牌均衡状态、红包运气排行榜
  • SQL练习(2)
  • Python 进阶函数教程
  • xxl-job报错Connection refused: connect(连接被拒绝)
  • PostgreSQL序列:创建、管理与高效应用指南
  • 【MySQL】数据库知识突破:数据类型全解析与详解
  • Pandas中astype() 方法
  • 「Mac玩转仓颉内测版5」入门篇5 - Cangjie控制结构(上)
  • 大数据 ETL + Flume 数据清洗 — 详细教程及实例(附常见问题及解决方案)
  • 10款视频剪辑工具使用感受与适用场景推荐!!!!
  • kaggle 如何利用API下载数据集
  • Linux驱动开发(5):平台设备驱动
  • Java 网络通信之 Socket 编程全解析
  • 番外篇 | 关于YOLO11算法的改进点总结
  • 【java】如何理解线程安全问题