0. 前提
由于search需要，想要搜索任意字段，那么就不能写死搜索字段，因此探索如何获取FeatureLayer图层的所有字段
由于JavaScript推荐异步，因此.when .then都是Promise的思路，只能在内部处理，外部由于不同线程，所以不能按照顺序来！！！
1. 解决方法
【1】采用query查询思路
// 引入2个arcgis js的库
// "esri/rest/query",
// "esri/rest/support/Query"
const params = new Query({
returnGeometry: false,
outFields: ["*"],
where: "1=1" //sql语法，这是查询全部
});
query
.executeQueryJSON("FeatureLayerURL", params) //FeatureLayerURL需要是URL
.then((getResults) => {
var fields = getResults.fields;
console.log("测试");
console.log(fields); //这就是获取全部的字段array
console.log("测试");
})
.catch((error) => {
console.log(error);
});
【2】采用layer.fields这种属性"."的形式
// 有个缺点，featureLayer必须包含在map里面！！！
featureLayer.when(function () {
console.log(featureLayer.fields);
});
// 这样获取 是 错误的， 严重错误的；可以获取layers；但是获取不到layer.fields 只能从featureLayer.when获取
mapView.when(function () {
console.log(mapView.map.layers.items[i].layers.items[j].fields);
//自己打印mapView.map.layers看看即可
});
整体代码：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Tutorials: Query a feature layer (spatial)</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.21/"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView",
"esri/widgets/Sketch",
"esri/layers/GraphicsLayer",
"esri/layers/FeatureLayer",
"esri/layers/GroupLayer",
"esri/widgets/LayerList",
"esri/widgets/Expand",
"esri/rest/query",
"esri/rest/support/Query"
], function (esriConfig, Map, MapView, Sketch, GraphicsLayer, FeatureLayer, GroupLayer, LayerList,
Expand, query, Query) {
// 不是必须的
esriConfig.apiKey =
"AAPKb6250197a40e497ea9f47f26cf86afad4D7n1PjA_48vNAZ6UDWAHPZwPgvhXXrbTMgdJnXk5c72F3fgInrvB7PZ4r0Gfoy3";
// 如果设置了展示的popup，那么缓冲区的popup不展示；如果没有设置默认popup，但是map里面有，同样不展示
const parcelLayer = new FeatureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
visible: false,
});
const map = new Map({
basemap: "arcgis-topographic", //Basemap layer service
layers: [parcelLayer], //第2种方法 必须包含；否则可以注释掉
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80543, 34.03000], //Longitude, latitude
zoom: 13,
popup: {
defaultPopupTemplateEnabled: true,
},
});
// 第2种 图层字段查询方法
parcelLayer.when(function () {
console.log("第一次");
console.log(parcelLayer.fields);
console.log("第一次");
var tempFields = parcelLayer.fields.map((w)=>{
return w.name;
});
console.log(tempFields);
});
// 第1种 图层字段查询方法
const params = new Query({
returnGeometry: false,
outFields: ["*"],
where: "1=1" //sql语法，这是查询全部
});
query
.executeQueryJSON("https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0", params)
.then((getResults) => {
console.log("测试");
console.log(getResults);
var fields = getResults.fields;
console.log("测试");
console.log(fields);
console.log("测试");
})
.catch((error) => {
console.log(error);
});
// Add sketch widget
const graphicsLayerSketch = new GraphicsLayer();
map.add(graphicsLayerSketch);
const sketch = new Sketch({
layer: graphicsLayerSketch,
view: view,
creationMode: "update" // Auto-select
});
view.ui.add(sketch, "top-right");
// Add sketch events to listen for and execute query
sketch.on("update", (event) => {
// Create
if (event.state === "start") {
queryFeaturelayer(event.graphics[0].geometry);
}
if (event.state === "complete") {
graphicsLayerSketch.remove(event.graphics[
0]); // Clear the graphic when a user clicks off of it or sketches new one
// view.graphics.removeAll();
}
// Change
if (event.toolEventInfo && (event.toolEventInfo.type === "scale-stop" || event
.toolEventInfo.type === "reshape-stop" || event.toolEventInfo.type ===
"move-stop")) {
queryFeaturelayer(event.graphics[0].geometry);
}
});
// Reference query layer
// const parcelLayer = new FeatureLayer({
// url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/LA_County_Parcels/FeatureServer/0",
// });
function queryFeaturelayer(geometry) {
const parcelQuery = {
spatialRelationship: "intersects", // Relationship operation to apply
geometry: geometry, // The sketch feature geometry
outFields: ["APN", "UseType", "TaxRateCity", "Roll_LandValue"], // Attributes to return
returnGeometry: true
};
parcelLayer.queryFeatures(parcelQuery)
.then((results) => {
console.log("Feature count: " + results.features.length)
displayResults(results);
}).catch((error) => {
console.log(error);
});
}
// Show features (graphics)
function displayResults(results) {
// Create a blue polygon
const symbol = {
type: "simple-fill",
color: [20, 130, 200, 0.5],
outline: {
color: "white",
width: .5
},
};
const popupTemplate = {
title: "Parcel {APN}",
content: "Type: {UseType} <br> Land value: {Roll_LandValue} <br> Tax Rate City: {TaxRateCity}"
};
// Set symbol and popup
results.features.map((feature) => {
feature.symbol = symbol;
feature.popupTemplate = popupTemplate;
return feature;
});
// Clear display
view.popup.close();
view.graphics.removeAll();
// Add features to graphics layer
view.graphics.addMany(results.features);
}
view.when(function () {
const layerList = new LayerList({
view: view,
});
var expandLayer = new Expand({
view: view,
content: layerList,
expandIconClass: "esri-icon-layers",
});
view.ui.add(expandLayer, "top-right");
console.log("第二次")
console.log(parcelLayer.fields);
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>2. 感谢
十分感谢“280120168”这个arcgis-js群的帮忙！