Community

Aan de slag met ArcGIS JavaScript - Nederlandse basiskaartgalerij

555
1
05-13-2019 01:18 PM
Egge-Jan_Pollé
by MVP Regular Contributor
MVP Regular Contributor
0 1 555
‎05-13-2019 01:18 PM

https://community.esri.com/people/EPolle_TensingInternational/blog/2019/06/02/aan-de-slag-met-arcgis...

BasemapGallery

Tot nu toe heeft onze applicatie (zie deze oefening) slechts één basiskaart. Hier willen wij de mogelijkheid toevoegen om van basiskaart te wisselen, en zo bijvoorbeeld ook een luchtfoto als ondergrond te gebruiken.

Het toevoegen van een basiskaartgalerij gaan we doen met een BasemapGallery widget. Als je deze widget zonder verdere argumenten in een web app toevoegt, dan bevat deze vanzelf al een aantal basiskaarten. Maar helaas, helaas, al deze standaardbasiskaarten zijn in de Web Mercator projectie (Spatial Reference: 102100  (3857)), en dat werkt niet voor onze kaart, want die is in de Nederlandse projectie (Spatial Reference: 28992). Alle kaarten in de galerij moeten in dezelfde projectie zijn.

Om onze basiskaartgalerij te vullen met kaarten in de juiste projectie, moeten we eerst een aantal kaarten als Basemap definiëren, en deze vervolgens aan een lokale bron, een LocalBasemapsSource, toevoegen. 

Dit zijn de 6 basiskaarten van Esri Nederland die we in deze oefening in onze basiskaartgalerij gaan stoppen - maar je kunt deze lijst natuurlijk zelf aanpassen met andere basiskaarten. In het script worden de kaarten aangeroepen via hun unieke id:

De broncode staat hieronder. Klik hier om de applicatie in actie te zien.

Oh ja, onze basiskaartgalerij neemt nu wel veel ruimte in beslag op het scherm. In een volgende oefening zullen we zien hoe we een widget dicht kunnen klappen en onder een knop kunnen verbergen.

Vervolgoefeningen:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <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="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/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
      
      var esriNLBasemaps = new LocalBasemapsSource({
        basemaps : [topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL]
      });

      var basemapGallery = new BasemapGallery({
        view: view,
		source: esriNLBasemaps
      });

      view.ui.add([basemapGallery], "top-right");

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Comment
SergeDe_Backer
by
New Contributor III
‎09-17-2019 03:50 AM

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>

0 Kudos
About the Author
GIS Consultant at Avineon-Tensing