我需要使用存储在 ArcGIS Online 中的要素图层来设计应用程序。使用地理编码器/搜索，我需要能够输入地址并选择距离（1 个街区、2 个街区等）。结果将显示新点、距离半径以及半径内的所有点。我还想要一张结果表。
我需要的与 DataMade 的 Derek Eder 创建的这个应用程序完全一样：https ://carto-template.netlify.app/ ，除了我需要存储在安全 ArcGIS 图层中的数据。任何人都可以指出一个示例、教程等与此应用程序类似的 esri-leaflet 实现吗？在过去的五天里，我一直在尝试转换代码，但我觉得我无处可去。
这是guthub的链接：https ://github.com/datamade/searchable-map-template-carto
- - - -更新 - - - -
Seth - 我可以让图层显示；但是，将搜索点与图层连接的查询不起作用。我想我遗漏了一些东西，因为控制台错误显示“需要令牌”。见下文：
const radius = 1610;
/**************************************************************************************************/
// ArcGIS Authoization
/**************************************************************************************************/
$("#loginModal").modal({ backdrop: 'static', keyboard: false });
// submit element of form
var submitBtn = document.getElementById('btnArcGISOnline');
// add event listener to form
submitBtn.addEventListener('click', addServicesFromServer);
// create map and set zoom level and center coordinates
var map = L.map('mapCanvas', {
}).setView([30.46258, -91.13171], 12);
// set basemap to Esri Streets
L.esri.basemapLayer('Streets').addTo(map);
var layerurl = 'secure/layer/URL';
var tokenUrl = 'https://www.arcgis.com/sharing/generateToken';
// function to make request to server
function serverAuth(server, username, password, callback) {
L.esri.post(server, {
username: username,
password: password,
f: 'json',
expiration: 86400,
client: 'referer',
referer: window.location.origin
}, callback);
}
// function to run when form submitted
function addServicesFromServer(e) {
// prevent page from refreshing
e.preventDefault();
// get values from form
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// generate token from server and add service from callback function
serverAuth(tokenUrl, username, password, function (error, response) {
if (error) {
return;
}
// add layer to map
var featureLayer = L.esri.featureLayer({
url: layerurl,
opacity: 1,
token: response.token
});
featureLayer.addTo(map);
$("#loginModal").modal("hide");
}); // end serverAuth call
} // end addServicesFromServer call
// HARNESS GEOCODER RESULTS
let circle;
// GeoSearch
const search = L.esri.Geocoding.geosearch({
useMapBounds: false,
expanded: true,
collapseAfterResult: false
});
search.addTo(map);
search.on("results", (results) => {
if (results && results.latlng) {
if (circle) {
circle.remove();
}
circle = L.circle(results.latlng, { radius });
circle.addTo(map);
queryLayer(results.latlng);
}
});
// SET UP QUERY FUNCTION
function queryLayer(point) {
const query = L.esri.query({ url: layerurl }).nearby(point, radius);
query.run(function (error, featureCollection, response) {
if (error) {
console.log(error);
return;
}
console.log(featureCollection.features);
populateList(featureCollection.features);
});
}
// WRITE RESULTS INTO A LIST
function populateList(features) {
const list = document.getElementById("results-list");
let listItems = "";
features.forEach((feature) => {
listItems =
listItems +
`
<li>
Place: ${feature.properties?.Location} <br>
Lat: ${feature.properties?.Latitude} <br>
Lng: ${feature.properties?.Longitude} <br>
</li>
`;
list.innerHTML = listItems;
});
}
我尝试将令牌传递给查询，如下所示，但随后出现无效令牌错误。
var layerUrl_token = layerurl + "?token=" + response.token;
我也尝试过使用 turf.js，但没有成功。我知道 turf.js 使用 long/lat，但我什至无法获得正确的语法来从要素层中提取 lat 和 long。