<\/A>https:\/\/community.esri.com\/people\/EPolle_TensingInternational\/blog\/2019\/06\/02\/aan-de-slag-met-arcgis-javascript-inleiding<\/A><\/P><\/P>
<\/P>
Vamos a añadir una galería de mapas base con un widget
Estos son los 6 mapas base de Esri Nederland que vamos a poner en nuestra galería de mapas base en este ejercicio - pero por supuesto puedes ajustar esta lista con otros mapas base. En el script los mapas se llaman por su único id<\/SPAN>:<\/P>
<\P>
El código fuente está abajo.
Ah sí, nuestra galería de mapas base ahora ocupa mucho espacio en la pantalla. En un próximo ejercicio veremos cómo podemos cerrar un widget y ocultarlo bajo un botón.<\P>
Ejercicios siguientes:<\STRONG>
<!DOCTYPE html><html><head> <meta charset=22utf-822> <meta name=22viewport22 content=22initial-scale=1, maximum-scale=1, user-scalable=no22> <title>Aan de slag met ArcGIS JavaScript - Nederlandse basiskaartgalerij</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel=22stylesheet22 href=22https://js.arcgis.com/4.11/esri/css/main.css22> <script src=22https://js.arcgis.com/4.11/22></script>< class="token tag"><\/script><\/</SPAN><\/SPAN><\/SPAN><script><\/</SPAN><\/SPAN> require(["esri\/Map","esri\/geometry\/Point","esri\/views\/MapView","esri\/Basemap","esri\/widgets\/BasemapGallery","esri\/widgets\/BasemapGallery\/support\/LocalBasemapsSource"], function(Map, Point, MapView, Basemap, BasemapGallery, LocalBasemapsSource) {var map = new Map({ basemap: { portalItem: { id: "7aea6fa913a94176a1074edb40690318" // Topo RD } } } ) ; var rdOrigin = new Point ( { x: 155000 , y: 463000 , spatialReference: 28992 } ) ; var view = new MapView ( { spatialReference: 28992 , container: "viewDiv" , map: map , center: rdOrigin , zoom: 3 } ) ; // Basiskaarten Esr Nederland var lightGrayCanvas_RD_EsriNL = new Basemap ( {portalItem : {id : "9ff6521e85d24df1aa9cd4aebfef748b"} } ) ; //Lichtgrijze Canvas RD var darkGrayCanvas_RD_EsriNL = new Basemap ( {portalItem : {id : "62a3befb579e4d9f9c5c51576c8a7c25"} } ) ; //Donkergrijze Canvas RD var topo_RD_EsriNL = new Basemap ( {portalItem : {id : "7aea6fa913a94176a1074edb40690318"} } ) ; //Topo RD var open_Topo_RD_EsriNL = new Basemap ( {portalItem : {id : "0698b71eb7cf47898086d072e574ac32"} } ) ; //Open Topo RD var stratenkaart_RD_EsriNL = new Basemap ( {portalItem : {id : "9fe1a753955f418fa1cbaf1c47610a47"} } ) ; //Stratenkaart RD var luchtfoto_RD_EsriNL = new Basemap ( {portalItem : {id : "38e1a1c6ee2c421290622400d22ecf57"} } ) ; //Luchtfoto RD esriNLBasemaps new ( basemaps [topo_RD_EsriNL open_Topo_RD_EsriNL stratenkaart_RD_EsriNL luchtfoto_RD_EsriNL lightGrayCanvas_RD_EsriNL darkGrayCanvas_RD_EsriNL] ) SpanClass ="KeywordToken Var"> basemapGallery new ( view view source esriNLBasemaps SpanClass ="PunctuationToken }">) viewui( [basemapGallery]< class="punctuation token">, "top-right");});</script></head><body><div id="viewDiv"></div></body></html>< < EM O J I _ 3 7 > > </ s p a n > < s p a n > < < E M O J I _ 3 8 > > </ s p a n > < s p a n > < < E M O J I _ 3 9 > > </ s p a n > < s p a n > < < E M O J I _ 4 0 > > </ s p a n > < s p a n > < < E M O J I _ 4 1 > > </ s p a n > < s p a n > < < E M O J I _ 4 2 > > </ s p a n > < s p a n > < < E M O J I _ 4 3 > > </ s p a n > < s p a n > < < E M O J I _ 4 4 > > </ s p a n > < s p a n > < < E M O J I _ 4 5 > > </ s p a n > < s p a n > < < E M O J I _ 4 6 > > </ s p a n > < s p a n > < < E M O J I _ 4 7 > > </ s p a n > < s p a n > < < E M O J I _ 4 8 > > </ s p a n > < s p a n > < < E M O J I _ 4 9 > > </ s p a n > < s p a n > < < E M O J I _ 5 0 > > </ s p a n > < s p a n ><<<E M O J I _ 5 1>> < span >< <<E M O J I _52>> </ span >< span >< <<E M O J I _53>> </ span >< span >< <<E M O J I _54>> </ span >< span >< <<E M O J I _55>> </ span >< span >< <<E M O J I _56>> </ span >< span >< <<E M O J I _57>> </ span >< span >< <<E M O J I _58>> </ span >< span >< <<E M O J I _59>> </ span >< span >< <<E M O J I _60>> </ span >< span >< <<E M O J I _61>> </ span >< span >< <<E M O J I _62>> </ span >< span >< <<E M O J I _63>> </ span >< span >< <<E M O J I _64>> </ span >< span >< <<E M O J I _65>> </ span >< span >< <<E M O J I _66>> </ span >< span >< <<E M O J I _67>> </ span >< span >< <<E M O J I _68>> </ span >< span >< <<E M O J I _69>> </ span >< span >< <<E M O J I _70>> </ span >< span >< <<E M O J I _71>> </ span >< span >< <<E M O J I _72>> </ span >< span >< <<E M O J I _73>> </ span >< span >< <<E M O J I _74>> </ span >< span >< <<E M O J I _75>> </ span >< span >< <<E M O J I _76>> </ span >
Hoi Egge-Jan,
Ik probeer dit allemaal wat beter te begrijpen, maar ik heb er toch wat moeilijkheden mee.
Hoe krijg ik net als jij dat enkel België zichtbaar is en niet de rest? Je begint met een basemap waarbij de verwijst naar een PoralId (Topo RD), maar waar haal je die info vandaan? Als ik dan in de docs wat lees vind ik dit: PortalItem | ArcGIS API for JavaScript 4.12 maar waar/wat is die portal?
Enige hulp met dit alles is welkom om me op het juiste pad te zetten. Eventueel via mail mocht je willen (sergedb(at)gmail).
Huidige 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 with custom source - 4.11</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/themes/light/main.css" /> <script src="https://js.arcgis.com/4.11/"></script> <script> require([ "esri/tasks/Locator", "esri/Map", "esri/Graphic", "esri/request", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/Search/SearchSource", "esri/geometry/geometryEngine", "esri/geometry/Point", "esri/layers/WMSLayer", "esri/widgets/Compass", "esri/widgets/Home" ], function ( Locator, Map, Graphic, esriRequest, MapView, Search, SearchSource, geometryEngine, Point, WMSLayer, Compass, Home ) { var url = "http://loc.geopunt.be/v2/location?",layer = new WMSLayer({ url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms' });var map = new Map({ basemap: "gray" });map.add(layer);var view = new MapView({ map: map, center: [4.3, 51], //lon, lat zoom: 8, container: "viewDiv" });var homeWidget = new Home({ view: view });view.ui.add(homeWidget, "top-left");var compass = new Compass({ view: view });view.ui.add(compass, "top-left");var customSearchSource = new SearchSource({ name: "Vlaanderen zoekopdracht", placeholder: "Geef je straatnaam in", displayField: "name", // Provide a getSuggestions method // to provide suggestions to the Search widget getSuggestions: function (params) { // You can request data from a // third-party source to find some // suggestions with provided suggestTerm // the user types in the Search widget return esriRequest(url, { query: { q: params.suggestTerm }, responseType: "json" }).then(function (results) { // Return Suggestion results to display // in the Search widget return results.data.LocationResult.map(function (item) { return { key: "name", text: item.FormattedAddress, sourceIndex: params.sourceIndex }; }); }); }, // Provide a getResults method to find // results from the suggestions getResults: function (params) { // If the Search widget passes the current location, // you can use this in your own custom source var operation = "q=" + params.suggestResult.text.replace(/ /g, "+"); var query = {}; // You can perform a different query if a location // is provided if (params.location) { query.lat = params.location.latitude; query.lon = params.location.longitude; } else { query.q = params.suggestResult.text.replace(/ /g, "+"); } return esriRequest(url + operation, { query: query, responseType: "json" }).then(function (results) { // Parse the results of your custom search var searchResults = results.data.LocationResult.map(function (feature) { // Create a Graphic the Search widget can display var graphic = new Graphic({ geometry: new Point({ x: feature.Location.Lon_WGS84, y: feature.Location.Lat_WGS84 }), attributes: feature }); // Optionally, you can provide an extent for // a point result, so the view can zoom to it var buffer = geometryEngine.geodesicBuffer( graphic.geometry, 50, "meters" ); // Return a Search Result var searchResult = { extent: buffer.extent, feature: graphic, name: feature.FormattedAddress }; return searchResult; });// Return an array of Search Results return searchResults; }); } });// Create Search widget using custom SearchSource var searchWidget = new Search({ view: view, sources: [customSearchSource], includeDefaultSources: false });//Wanneer er gezocht moet worden kan je hier de waarde uithalen searchWidget.on("select-result", function (event) { // event is the event handle returned after the event fires. console.log(event.target.selectedResult.name); $beheeraanvragen.getKadastrale(event.target.selectedResult.name, false); });view.on("click", function (event) { view.popup.clear(); view.popup.content = "Opzoeken adres..."; // 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 Coordinaten: X = " + rdx.toLocaleString() + " / Y = " + rdy.toLocaleString(), location: event.mapPoint // Plaats de popup op de aangeklikte locatie });esriRequest(url, { query: "latlon=" + event.mapPoint.latitude + "," + event.mapPoint.longitude, responseType: "json" }).then(function (results) {var frslt = results.data.LocationResult[0]; console.info(frslt); view.popup.content = frslt.FormattedAddress; $beheeraanvragen.getKadastrale(frslt.FormattedAddress, false); //view.popup.title = frslt.Location.Lat_WGS84 + ", " + frslt.Location.Lon_WGS84 });});// Add the search widget to the top left corner of the view view.ui.add(searchWidget, { position: "top-right" }); }); </script></head><body> <div id="viewDiv"></div></body></html>
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Search widget with custom source - 4.11</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/themes/light/main.css" /> <script src="https://js.arcgis.com/4.11/"></script> <script> require([ "esri/tasks/Locator", "esri/Map", "esri/Graphic", "esri/request", "esri/views/MapView", "esri/widgets/Search", "esri/widgets/Search/SearchSource", "esri/geometry/geometryEngine", "esri/geometry/Point", "esri/layers/WMSLayer", "esri/widgets/Compass", "esri/widgets/Home" ], function ( Locator, Map, Graphic, esriRequest, MapView, Search, SearchSource, geometryEngine, Point, WMSLayer, Compass, Home ) { var url = "http://loc.geopunt.be/v2/location?",
layer = new WMSLayer({ url: 'https://geoservices.informatievlaanderen.be/raadpleegdiensten/GRB-basiskaart/wms' });
var map = new Map({ basemap: "gray" });
map.add(layer);
var view = new MapView({ map: map, center: [4.3, 51], //lon, lat zoom: 8, container: "viewDiv" });
var homeWidget = new Home({ view: view });
view.ui.add(homeWidget, "top-left");
var compass = new Compass({ view: view });
view.ui.add(compass, "top-left");
var customSearchSource = new SearchSource({ name: "Vlaanderen zoekopdracht", placeholder: "Geef je straatnaam in", displayField: "name", // Provide a getSuggestions method // to provide suggestions to the Search widget getSuggestions: function (params) { // You can request data from a // third-party source to find some // suggestions with provided suggestTerm // the user types in the Search widget return esriRequest(url, { query: { q: params.suggestTerm }, responseType: "json" }).then(function (results) { // Return Suggestion results to display // in the Search widget return results.data.LocationResult.map(function (item) { return { key: "name", text: item.FormattedAddress, sourceIndex: params.sourceIndex }; }); }); }, // Provide a getResults method to find // results from the suggestions getResults: function (params) { // If the Search widget passes the current location, // you can use this in your own custom source var operation = "q=" + params.suggestResult.text.replace(/ /g, "+"); var query = {}; // You can perform a different query if a location // is provided if (params.location) { query.lat = params.location.latitude; query.lon = params.location.longitude; } else { query.q = params.suggestResult.text.replace(/ /g, "+"); } return esriRequest(url + operation, { query: query, responseType: "json" }).then(function (results) { // Parse the results of your custom search var searchResults = results.data.LocationResult.map(function (feature) { // Create a Graphic the Search widget can display var graphic = new Graphic({ geometry: new Point({ x: feature.Location.Lon_WGS84, y: feature.Location.Lat_WGS84 }), attributes: feature }); // Optionally, you can provide an extent for // a point result, so the view can zoom to it var buffer = geometryEngine.geodesicBuffer( graphic.geometry, 50, "meters" ); // Return a Search Result var searchResult = { extent: buffer.extent, feature: graphic, name: feature.FormattedAddress }; return searchResult; });
// Return an array of Search Results return searchResults; }); } });
// Create Search widget using custom SearchSource var searchWidget = new Search({ view: view, sources: [customSearchSource], includeDefaultSources: false });
//Wanneer er gezocht moet worden kan je hier de waarde uithalen searchWidget.on("select-result", function (event) { // event is the event handle returned after the event fires. console.log(event.target.selectedResult.name); $beheeraanvragen.getKadastrale(event.target.selectedResult.name, false); });
view.on("click", function (event) { view.popup.clear(); view.popup.content = "Opzoeken adres..."; // 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 Coordinaten: X = " + rdx.toLocaleString() + " / Y = " + rdy.toLocaleString(), location: event.mapPoint // Plaats de popup op de aangeklikte locatie });
esriRequest(url, { query: "latlon=" + event.mapPoint.latitude + "," + event.mapPoint.longitude, responseType: "json" }).then(function (results) {
var frslt = results.data.LocationResult[0]; console.info(frslt); view.popup.content = frslt.FormattedAddress; $beheeraanvragen.getKadastrale(frslt.FormattedAddress, false); //view.popup.title = frslt.Location.Lat_WGS84 + ", " + frslt.Location.Lon_WGS84 });
});
// Add the search widget to the top left corner of the view view.ui.add(searchWidget, { position: "top-right" }); }); </script></head><body> <div id="viewDiv"></div></body></html>
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
