<\/A><\/P>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P><\/P>
<\/P>
Pour cela, nous ajoutons un widget
Pour ne rechercher et trouver que des adresses néerlandaises :<\/P>
Le code source est ci-dessous.
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Prise en main d'ArcGIS JavaScript - Recherche d'adresse</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css"> <script src="https://js.arcgis.com/4.11/"></script> <script> require([ "esri/Map", "esri/geometry/Point", "esri/views/MapView", "esri/widgets/Search", "esri/tasks/Locator" ], function(Map, Point, MapView, Search, Locator) { var map = new Map({ basemap: { portalItem: { id: "7aea6fa913a94176a1074edb40690318" // Topo RD } } }); var rdOrigin = new Point({ x: 155000 token">, y: 463000, spatialReference: 28992});var view = new MapView({ spatialReference: 28992, container: "viewDiv", map: map, center: rdOrigin, zoom: 3});var searchWidget = new Search({ view: view, includeDefaultSources: false}); searchWidget.sources = [{ locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer van Esri Nederland singleLineFieldName: "SingleLine", // Cette option permet de rechercher par combinaison code postal/numéro de maison, par exemple : 4181 AE 38 placeholder: searchWidget.allPlaceholder // "Find address or place" pour la locale English, "Adres of plaats zoeken" pour la locale Nederlandse}] view.ui.add([searchWidget) ;</head><body><divid=
Hoi Egge-Jan,
Ik heb een kaart waar ik de GRB basiskaart van Vlaanderen op plaats waar de percelen zichtbaar zijn. Mijn bedoeling is ook om wanneer ik een adres ingeef bv:Kerkstraat 8, 2970, Schilde, 's-Gravenwezel, BEL dat ik dan ook op het perceel terecht kom...echter lukt me dit niet. De aanduiding gebeurt niet op het perceel, maar op de straat terwijl in jouw voorbeeld het wel degelijk op het perceel terecht komt. Enig idee waar ik moet zoeken om dit op te lossen? Ligt dit aan de kaart of aan de geocoder?
EDIT
Ik zou deze locator url moeten gebruiken: http://loc.api.geopunt.be/geolocation/location?c=5&q=kerkstr
De c is voor het aantal suggesties en de q voor de zoekterm. Ben alleen nog aan het zoeken hoe deze te configureren..
Alvast bedankt!
Dit is mijn code:
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Search Widget - 4.9</title><style> html, body{ padding: 0; margin: 0; height: 100%; width: 100%; } #viewDiv { height: calc(100% - 40px); } #header { height: 40px; width: 100%; background-color: blue; } #searchDiv { float: right; margin-right: 10px; margin-top: 4px; } </style><link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script><script>var map, view, layer;require([ "esri/tasks/Locator", "esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/Home", "esri/layers/WMSLayer" ], function (Locator, Map, MapView, Search, Home, WMSLayer) { layer = new WMSLayer({ url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms' });var locatorTask = new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" });map = new Map({ basemap: "topo-vector" //Dit is je basismap om in te lezen });map.add(layer); //Hier is de WMS layer die je erop "plakt"var homeWidget = new Home({ view: view });view = new MapView({ map: map, zoom: 8, center: [4.402771, 51.260197], //lon, lat container: "viewDiv" }); var search = new Search({ view: view, //Onderste deel is om enkel BE adressen uit te halen --> Door dit te enablen lukt de placeholder niet meer. includeDefaultSources: false, locationEnabled: true, sources: [{ locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }), countryCode: "BE", categories: ["Address", "Postal"], singleLineFieldName: "SingleLine", localSearchOptions: { minScale: 300000, distance: 50000 } }] }); //Placeholder van je zoekbalk search.watch('activeSource', function (evt) { evt.placeholder = "Gelieve een straat in te geven "; });//Wanneer er gezocht moet worden kan je hier de waarde uithalen search.on("select-result", function (event) { // event is the event handle returned after the event fires. console.log(event.target.selectedResult.name); $("#lblSearchTerm").val(event.target.searchTerm); $admin.getKadastrale(event.target.selectedResult.name); });view.ui.add([search], "top-right"); view.ui.add(homeWidget, "top-left"); /******************************************************************* * This click event sets generic content on the popup not tied to * a layer, graphic, or popupTemplate. The location of the point is * used as input to a reverse geocode method and the resulting * address is printed to the popup content. *******************************************************************/ view.popup.autoOpenEnabled = false; view.on("click", function (event) { // Haal de coördinaten van het aangeklikte punt op var rdx = Math.round(event.mapPoint.x); var rdy = Math.round(event.mapPoint.y);view.popup.open({ // Toon de gevonden RD coördinaten in de titel van de popup. De coördinaten worden // afgerond op hele meters en er wordt een punt geplaatst tussen de duizendtallen title: "RD Coördinaten: X = " + rdx.toLocaleString() + " / Y = " + rdy.toLocaleString(), location: event.mapPoint // Plaats de popup op de aangeklikte locatie });// Toon de popup // Voer reverse geocoding uit voor de aangeklikte locatie locatorTask .locationToAddress(event.mapPoint) .then(function (response) { // Toon het gevonden adres in de popup view.popup.content = response.address; $admin.getKadastrale(response.address); }) .catch(function (error) { // Toon een foutmelding als er geen adres gevonden wordt view.popup.content = "Er is geen adres gevonden voor deze locatie"; }); }); }); </script></head><body><div id="viewDiv" style="height:500px"></div></body>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Search Widget - 4.9</title>
<style> html, body{ padding: 0; margin: 0; height: 100%; width: 100%; } #viewDiv { height: calc(100% - 40px); } #header { height: 40px; width: 100%; background-color: blue; } #searchDiv { float: right; margin-right: 10px; margin-top: 4px; } </style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script>
<script>
var map, view, layer;
require([ "esri/tasks/Locator", "esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/Home", "esri/layers/WMSLayer" ], function (Locator, Map, MapView, Search, Home, WMSLayer) { layer = new WMSLayer({ url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms' });
var locatorTask = new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" });
map = new Map({ basemap: "topo-vector" //Dit is je basismap om in te lezen });
map.add(layer); //Hier is de WMS layer die je erop "plakt"
var homeWidget = new Home({ view: view });
view = new MapView({ map: map, zoom: 8, center: [4.402771, 51.260197], //lon, lat container: "viewDiv" });
var search = new Search({ view: view, //Onderste deel is om enkel BE adressen uit te halen --> Door dit te enablen lukt de placeholder niet meer. includeDefaultSources: false, locationEnabled: true, sources: [{ locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer" }), countryCode: "BE", categories: ["Address", "Postal"], singleLineFieldName: "SingleLine", localSearchOptions: { minScale: 300000, distance: 50000 } }] }); //Placeholder van je zoekbalk search.watch('activeSource', function (evt) { evt.placeholder = "Gelieve een straat in te geven "; });
//Wanneer er gezocht moet worden kan je hier de waarde uithalen search.on("select-result", function (event) { // event is the event handle returned after the event fires. console.log(event.target.selectedResult.name); $("#lblSearchTerm").val(event.target.searchTerm); $admin.getKadastrale(event.target.selectedResult.name); });
view.ui.add([search], "top-right"); view.ui.add(homeWidget, "top-left");
/******************************************************************* * This click event sets generic content on the popup not tied to * a layer, graphic, or popupTemplate. The location of the point is * used as input to a reverse geocode method and the resulting * address is printed to the popup content. *******************************************************************/ view.popup.autoOpenEnabled = false; view.on("click", function (event) { // Haal de coördinaten van het aangeklikte punt op var rdx = Math.round(event.mapPoint.x); var rdy = Math.round(event.mapPoint.y);
view.popup.open({ // Toon de gevonden RD coördinaten in de titel van de popup. De coördinaten worden // afgerond op hele meters en er wordt een punt geplaatst tussen de duizendtallen title: "RD Coördinaten: X = " + rdx.toLocaleString() + " / Y = " + rdy.toLocaleString(), location: event.mapPoint // Plaats de popup op de aangeklikte locatie });
// Toon de popup // Voer reverse geocoding uit voor de aangeklikte locatie locatorTask .locationToAddress(event.mapPoint) .then(function (response) { // Toon het gevonden adres in de popup view.popup.content = response.address; $admin.getKadastrale(response.address); }) .catch(function (error) { // Toon een foutmelding als er geen adres gevonden wordt view.popup.content = "Er is geen adres gevonden voor deze locatie"; }); }); }); </script></head>
<body>
<div id="viewDiv" style="height:500px"></div>
</body>
Ondertussen gevonden door te werken met een SearchSource. Hier kan je de Belgische geolocator gebruiken.
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
