arcgis for js实现FeatureLayer图层弹窗展示所有field字段方式二
效果和说明
feature图层中的矢量要素包含很多的属性，在点击要素时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] // 设置地图的初始化中心点坐标
})
let layer = new FeatureLayer({
url: 'http://xxxxxxxxxxx/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
}
html += `<p class="field-row">
<span class="dt">${key}</span>
<span class="db">${attributes[key]}</span>
</p>`
}
html += '</div>'
return html
}
}
})
console.log(layer)
map.add(layer)
})
</script>
</body>
</html>
对字段名和字段值进行转义就简单了，但是文章标题有限，为了方便查找我后续就再水一篇， 嘿嘿！！！
原文地址：https://blog.csdn.net/qq_33982898/article/details/143722792
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！