Arcgis Js Api 鼠标点击获取图层属性 GeoJSONLayer
图层：GeoJSONLayer（polygon）
需求：鼠标点击后获取点击位置的图层属性。
尝试失败的方法：
（1）hitTest方法，GeoJSONLayer不在hitTest的支持范围内，只会返回一个字段名（貌似是property中的第一个字段？）和一个OBJECTID。
（2）QueryTask：由于GeoJSONLayer没有REST服务，identify.identify()方法无法使用。
尝试比较接近成功的方法：
（3）利用popupTemplate，设置Content为自定义函数，返回feature.graphics.attribute。
（4）利用popupTemplate，使用view.popup.watch("selectedFeature", function(graphic){})，函数体中feature.graphics.attribute。
方法（3）与（4）的坏处是会多一个popup框，我并不想要这个弹出框（设置view.popup.visible=false的方法是无效的，可能由于使用的popupTemplate而非Popup）。有什么方法可以隐藏弹出框吗，或者有别的方法可以查询GeoJSONLayer中的属性吗。
我是一个ArcGIS初学者，任何建议都将是有用的，很感谢大家的帮助。
附上整个GetAttribute的代码：
下面附上 GeoJSONLayer 与 CSVLayer 使用 hitTest() 获取Attribute的区别（源数据完全一样，只是一个是json，一个是csvfile）。
(若使用PopupTemplate，Csv与GeoJSON均可正确返回所有Attribute)。
需求：鼠标点击后获取点击位置的图层属性。
尝试失败的方法：
（1）hitTest方法，GeoJSONLayer不在hitTest的支持范围内，只会返回一个字段名（貌似是property中的第一个字段？）和一个OBJECTID。
（2）QueryTask：由于GeoJSONLayer没有REST服务，identify.identify()方法无法使用。
尝试比较接近成功的方法：
（3）利用popupTemplate，设置Content为自定义函数，返回feature.graphics.attribute。
（4）利用popupTemplate，使用view.popup.watch("selectedFeature", function(graphic){})，函数体中feature.graphics.attribute。
方法（3）与（4）的坏处是会多一个popup框，我并不想要这个弹出框（设置view.popup.visible=false的方法是无效的，可能由于使用的popupTemplate而非Popup）。有什么方法可以隐藏弹出框吗，或者有别的方法可以查询GeoJSONLayer中的属性吗。
我是一个ArcGIS初学者，任何建议都将是有用的，很感谢大家的帮助。
附上整个GetAttribute的代码：
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>GeoJSONLayer | Sample | ArcGIS API for JavaScript 4.20</title>
<style>
html,body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
float: left;
padding: 0;
margin: 0;
height: 100%;
width: 70%;
}
#feature-node {
float: left;
width: 30%;
height: 100%;
padding: 1em;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esr ... ot%3B />
<script src="https://js.arcgis.com/4.20/%26 ... gt%3B
<script>
require([
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/layers/CSVLayer",
"esri/views/MapView",
"esri/widgets/Feature"
], (Map,GeoJSONLayer,CSVLayer,MapView,Feature,) => {
const renderer = {
type: "simple",
field: "mag",
symbol: {
type: "simple-marker",
color: "orange",
outline: {
color: "white"
}
},
visualVariables: [{
type: "size",
field: "mag",
stops: [
{
value: 2.5,
size: "4px"
},
{
value: 8,
size: "40px"
}
]
}]
};
function populationChange (feature) {//法3、设置Content为自定义函数来返回属性
console.log(feature.graphic.attributes);
return feature.graphic.attributes.mag;
};
const template = {
title: "Population in {place}",
outFields: ["*"],
content: populationChange,
fieldInfos: [
{fieldName: "mag",},
{fieldName: "place",},
{fieldName: 'time',format: {dateFormat: 'short-date-short-time'}},
{fieldName: "updated",format: {dateFormat: 'short-date-short-time'}},
]
};
let url = "https://earthquake.usgs.gov/ea ... 3B%3B
let geojsonLayer = new GeoJSONLayer({
url: url,
copyright: "USGS Earthquakes",
popupTemplate: template,
renderer: renderer,
});
let url1 = "https://earthquake.usgs.gov/ea ... 3B%3B
let csvLayer = new CSVLayer({
url: url1,
copyright: "USGS Earthquakes",
popupTemplate: template,
renderer: renderer,
});
const map = new Map({
// layers: [geojsonLayer],
layers: [csvLayer],
});
const view = new MapView({
container: "viewDiv",
center: [-168, 46],
zoom: 2,
map: map,
popup: {
autoOpenEnabled: false
}
});
view.when().then(function () {
// Create a default graphic for when the application starts
const graphic = {
popupTemplate: {
content: "Mouse over features to show details..."
}
};
// Provide graphic to a new instance of a Feature widget
const feature = new Feature({
container: "feature-node",
graphic: graphic,
map: view.map,
spatialReference: view.spatialReference
});
// listen for the pointer-move event on the View
view.on("click", function (event) { //法1、使用hitTest()返回属性值
// Perform a hitTest on the View
view.hitTest(event).then(function (event) {
// Make sure graphic has a popupTemplate
let results = event.results.filter(function (result) {
console.log(result);
// console.log(result.graphic.layer.popupTemplate);
});
});
});
});
});
</script>
</head>
<body>
<div id=feature-node class="esri-widget"></div>
<div id="viewDiv"></div>
</body>
</html>下面附上 GeoJSONLayer 与 CSVLayer 使用 hitTest() 获取Attribute的区别（源数据完全一样，只是一个是json，一个是csvfile）。
(若使用PopupTemplate，Csv与GeoJSON均可正确返回所有Attribute)。
2 个回复
许丹石
赞同来自: looori
looori
赞同来自: 许丹石
要回复问题请先登录或注册
发起人
相关问题
问题状态
—— 扫技术支持中心微信服务号！
—— 让GIS知乎问答随时随地！