0

我正在使用 Esri Map。当我尝试在地图上加载 json 数据时，我发现从控制台查看时 Word findAddressCandidates已附加到 url。所以改为拥有http://localhost/data.json并拥有http://localhost/data.json/findAddressCandidates

如何从 URL 中删除findAddressCandidates以便我可以拥有http://localhost/data.json？

一些 Stack Overflow 工程师建议根据此来源使用History API。

<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: Find places</title>
  <style>
  html, body, #viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.20/"></script>

  <script>

  require([
    "esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/tasks/Locator",
    "esri/Graphic"
    ], function(esriConfig,Map, MapView, Locator, Graphic) {


    esriConfig.apiKey = "my api key";

    const map = new Map({
      basemap: "arcgis-navigation"
    });

    const view = new MapView({
      container: "viewDiv",
      map: map,
      center: [18.9553, 69.6492], //Longitude, latitude
      zoom: 13
    });


    const places = ["Choose a place type...", "Parks and Outdoors", "Coffee shop", "Gas station", "Food", "Hotel"];

    const select = document.createElement("select","");
      select.setAttribute("class", "esri-widget esri-select");
      select.setAttribute("style", "width: 175px; font-family: 'Avenir Next W00'; font-size: 1em");

    places.forEach(function(p){
      const option = document.createElement("option");
      option.value = p;
      option.innerHTML = p;
      select.appendChild(option);
    });

    view.ui.add(select, "top-right");


   const locator = new Locator({
        url: "http://localhost/data.json"
    });


   // Find places and add them to the map
   function findPlaces(pt) {
    locator.addressToLocations({
      location: pt,
      maxLocations: 25,
      outFields: ["Place_addr", "PlaceName"]
    })

    .then(function(results) {
      view.popup.close();
      view.graphics.removeAll();

      results.forEach(function(result){
        view.graphics.add(
          new Graphic({
            attributes: result.attributes,  // Data attributes returned
            geometry: result.location, // Point returned
            symbol: {
             type: "simple-marker",
             color: "#000000",
             size: "12px",
             outline: {
               color: "#ffffff",
               width: "2px"
             }
            },

            popupTemplate: {
              title: "{PlaceName}", // Data attribute names
              content: "{Place_addr}"
            }
         }));
      });

    });

  }

  // Search for places in center of map
  view.watch("stationary", function(val) {
    if (val) {
       findPlaces(select.value, view.center);
    }
    });
  // Listen for category changes and find places
  select.addEventListener('change', function (event) {
    findPlaces(event.target.value, view.center);
  });


});
  </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
4

0 回答 0