Arcgis deel 1 - NieneB/pzh_web_map GitHub Wiki
We hebben een web kaart gemaakt met Leaflet. Maar hetzelfde kunnen we ook doen met de ArcGIS JavaScript API.
De ArcGIS JavaScript API is veel uitgebreider dan Leaflet. Maar is daarom ook zwaarder. Je zult merken dat de ArcGIS JS API uit meerdere kleinere bibliotheken bestaat, die we elke keer moeten toevoegen.
Met de ArcGIS JS API kan je zowel 2D als 3D kaarten maken. Het is goed te integreren met de ESRI online omgeving en de ArcGIS server. Zo kan je direct ArcGIS online visualisaties in je ArcGIS JS kaart zetten.
Waar Leaflet gaat voor simpelheid en basis functies, bied ArcGIS JS API je veel meer functionaliteit om een complete User Experience te bouwen. Leaflet kan je ook uitbereiden met plug-ins of custom JavaScript maar ArcGIS JS heeft dit al allemaal geiintegreerd.
Gebruik ook de Documentatie van de ArcGIS JavaScript API. Hier staan veel voorbeelden en uitleg over de mogelijkheden!
We beginnen met een een nieuwe folder.Dit moet een ander folder zijn als waar je Leaflet kaart staat.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>basis HTML</title>
</head>
<body>
<H1>voorbeeld</H1>
</body>
</html>jouwWerkFolder en noem het index.html.
<div> in de <body>.
<div id="map"></div>main.css in jouwWerkFolder.
#map {
height: 500px;
width:100%;
} Ga terug naar je index.html bestand en zet de volgende link naar je CSS bestand in de <head>.
<link rel="stylesheet" href="main.css"/>Tot nu toe is de basis hetzelfde. Maar in plaats van Leaflet gaat we nu de ArcGIS JavaScript library gaan toevoegen!
// Reference the JavaScript API from our CDN and you are ready to get started:
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script><head> van je HTML bestand.
<body>.
Nu hebben we dit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ArcMap JavaScript API example</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div id="map"></div>
<script src="https://js.arcgis.com/4.9/"></script>
</body>ArcGIS heeft een net iets andere manier om de kaart te maken dan Leaflet. Ondanks dat het net wat anders wordt opgeschreven komt het op hetzelfde neer:
<script>
require([
"esri/Map",
"esri/views/MapView"
], function (Map, MapView) {
// Code to create the map and view will go here
// INIT MAP
var map = new Map({
basemap: "dark-gray"
});
// CREATE the 2D Mapview
var view = new MapView({
container: "map", // Reference to the DOM node that will contain the view
map: map // References the map object created in step 3
});
view.center = [4.306, 52.07] // Sets the center point of the view at a specified lon/lat
view.zoom = 10;
});
</script>ℹ️ de basemap wordt door ERSI aangeboden.
ArcGIS JS werkt met een map en een view. We maken hier een 2D mapView maar er zijn ook mogelijkheden om een 3D view te maken. Vooral voor de 3D visualisaties zijn views belangrijk.
Leaflet.js kent geen view.
Open de debugger
- Klik met de rechter muisknop in het scherm van de browser en kies :
Inspect Element- Je kan ook F12 drukken.
De debugger laat de inhoud van de web pagina zien. Maar ook logs en errors! Ga naar het tab blad,
Web Consoleom te zien of er een error is die je een handig kan zijn om je web site de debuggen.
Bij onze Leaflet kaart hebben we een marker toegevoegd aan de kaart. Dit kunnen we in ArcGIS JS ook doen alleen zijn hier weer meer stappen nodig. Dit is omdat de ArcGIS JS API bedoelt is om veel grotere visualisaties te maken, een kleine actie is daarom wat ingewikkelder.
Meer informatie https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/index.html
//Construct a point object
var point = {
type: "point",
longitude: 4.317155,
latitude: 52.087075
}; // Create an object for storing attributes related to the line
var pointAtt = {
Name: "Provincie Huis"
};//Construct a SimpleMarkerSymbol object
var markerSymbol = {
type: "simple-marker",
color: [226, 15, 5],
outline: {
color: [255, 255, 255],
width: 2
}
}; //Construct a Graphic object
var graphic = new Graphic({
geometry: point,
symbol: markerSymbol,
attributes: pointAtt,
popupTemplate: { // autocasts as new PopupTemplate()
title: "{Name}"
}
});graphic object toe aan de view
// Add GraphicsLayer to Map object
view.graphics.add(graphic);➡️ Ga door naar Arcgis deel 2 om een WMS laag toe te voegen.