admin管理员组文章数量:1650765
目录
0. 前提
1. 解决方法
2. 感谢
0. 前提
由于search需要,想要搜索任意字段,那么就不能写死搜索字段,因此探索如何获取FeatureLayer图层的所有字段
由于JavaScript推荐异步,因此.when .then都是Promise的思路,只能在内部处理,外部由于不同线程,所以不能按照顺序来!!!
建议:API版本4.18开始!
系列总览
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看看即可
});
【3】**推荐**采用js+arcgis js关联(联合)的思路;这种思路小白很少知道,大佬们都会用,但是网上很少说!!
// 由于.when .then都是Promise异步,官方样例对Promise<*>的处理思路是“链式调用”,但是限制,不方便;
//定义异步函数 await只能在async异步函数中使用;因此这种操作整个过程需要在async函数中,不过arcgis js支持!
async function getFields(featureLayer){
// 查看API,queryFeatures函数返回Promise<FeatureSet>,因此可以使用await同步,再调用.fields
var result = await featureLayer.queryFeatures();
var fields = result.fields;
return fields
}
async function test(){
var fields = await getFields();
console.log(fields);
}
test();//需要不断的这样操作即可!
整体代码:
<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/4.21/esri/themes/light/main.css">
<script src="https://js.arcgis/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/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/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/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群的帮忙!
本文标签: 字段名jsArcGISFeatureLayerAPI
版权声明:本文标题:arcgis for js api(1) 获取featureLayer的所有字段名 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729532391a1204973.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论