效果和说明
上两篇实现了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>