Esri-Leaflet - 远距离搜索

Posted 2023-02-23

【中文标题】Esri-Leaflet - 远距离搜索

【英文标题】：Esri-Leaflet - Search within a distance

【发布时间】：2021-03-16 15:45:52

【问题描述】：

我需要使用存储在 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。

【参考方案1】：

你想做的事情并不难。虽然有一些关于您想做的不同部分的教程，但让我们将它们拼凑起来。我将使用 esri-leaflet-geocoder 来实现我的搜索功能，因为它与 esri-leaflet 一致，并且 IMO 是可用于传单的最佳地理编码器之一。

设置地理编码器

设置基本的leaflet地图后，我们导入esri-leaflet和esri-leaflet-geocoder，并创建一个geocoder：

import L from "leaflet";
import * as EL from "esri-leaflet";
import * as ELG from "esri-leaflet-geocoder";

const search = ELG.geosearch(
  useMapBounds: false,
  expanded: true,
  collapseAfterResult: false
);

search.addTo(map);

不要忘记将地理编码器css添加到您的html中，如documentation example所示。

添加你的图层：

const layerurl = "YOUR_LAYER_URL";
const featureLayer = EL.featureLayer( url: layerurl );
featureLayer.addTo(map);

如果您使用需要身份验证的层，则需要获取一个令牌并将其用作功能层中的选项之一 (featureLayer( url: layerurl, token: token ))。如果您不确定如何获取令牌，请发表评论，我可以为此添加一些代码，但是已经有一些不错的教程可用。

利用搜索结果

ELG.geosearch 附带一个您可以利用的results 事件。当用户在地理搜索的自动完成下拉列表中选择结果之一时调用它。在那种情况下，我们可以获得用户选择的位置的位置数据。我们将地图居中（实际上是地理搜索的默认设置），用给定的半径画一个圆，然后执行查询（更多关于该图层）：

let circle;

search.on("results", (results) => 
  if (results && results.latlng) 
    if (circle) 
      circle.remove();
    
    circle = L.circle(results.latlng,  radius );
    circle.addTo(map);

    queryLayer(results.latlng);
  
);

查询图层

现在我们知道用户从搜索中选择的位置的latlng。我们可以创建一个 esri-leaflet query，它可以通过各种方式查询您的要素图层。我们将看到一个nearby 查询，它将查询图层中给定点半径内的任何特征：

function queryLayer(point) 
  const query = EL.query( url: layerurl ).nearby(point, radius);
  query.run(function (error, featureCollection, response) 
    if (error) 
      console.log(error);
      return;
    
    populateList(featureCollection.features);
  );

如果您要查询经过身份验证的层，则需要在请求中添加令牌。我相当确定这样做的方法是这样的：

function queryLayer(point) 
  const query = EL.query( url: layerurl )
    .token(<your_token_here>)
    .nearby(point, radius);
  // ... same as above

您也可以直接在图层之外运行查询：

featureLayer.query().nearby(point, radius)

我对第二种方式不太熟悉，但您可以在这里阅读更多信息：Query a feature layer。

渲染到页面

一旦我们.run 查询，我们将能够以featureCollection 的形式访问结果。我们可以遍历该 featureCollection 的特性并渲​​染一些 HTML：

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;
  );

在这个特定示例中，我使用的是我制作的点图层，该图层通过 arcgis online 提供服务。该点层没有地址数据，因此feature.properties 不包含任何地址信息。对于您的要素图层，您的图层属性将在feature.properties 中提供。因此，根据那里的内容，您可能想要使用feature.properties?.address 或其他什么。最后一点只是一个示例，您可能会根据自己的目的进行不同的自定义。

Working Codesandbox

在此示例中尝试搜索人口稠密的地区。请注意，在此要素图层中有许多重叠的位置，因此列表中的结果比地图上看起来的标记要多。

另外请注意，我使用 esri-leaflet 和 esri-leaflet-geocoder versions 2^ 发布此示例。这些在大约 1-2 个月前刚刚更新到版本 3，并且新版本需要在地理编码器和图层声明中使用 API 密钥，因此如果您想使用最新版本（推荐），您需要添加这些。我使用了版本 2，以免在沙箱中公开 API 密钥（我有点讨厌新的 API 密钥要求。新的 arcgis developers documentation for esri-leaflet 有一些例子，但官方文档 has not yet been updated匹配这些示例。

【讨论】：

赛斯 - 非常感谢！您提供的一切都按预期工作，但我在使用身份验证协议时遇到了问题。我用细节编辑了原始帖子。任何额外的帮助都会很棒。

我在答案的“查询图层”部分的末尾添加了一些额外的注释。您不必手动将 url 附加到令牌中，如果需要令牌，esri-leaflet 有一些内置方法可以将您的令牌包含在请求中。

救生员。非常感谢！！