In LuciadRIA, the view component of the Model-View-Controller architecture is the map. The map manages:
-
The layers that visualize the loaded vector and raster data
-
The transformation from reference coordinates to screen coordinates and the other way round
-
The map controllers used to interact with the map and the data
-
The map size
Creating a map
A map is always created on a DOM node. The DOM node is a mandatory parameter to the map constructor. The constructor creates the necessary DOM structures to display the map, and hooks into several DOM events to realize an interactive map.
//The HTML page should have a dom node with this id, e.g. // <div id="map" /> const domNodeID = "map"; //Create the map and specify the dom node id const map = new WebGLMap(domNodeID);
By default, the map visualizes geographical data in an equidistant cylindrical projection.
If you want to use another projection, you can configure the Map reference using the reference
property in the option
hash:
//Use the factory method of the ReferenceProvider module to create //the polar-stereographic reference const worldReference = getReference("EPSG:3995"); //Pass that reference in the constructor of the WebGLMap const map = new WebGLMap("map", { reference: worldReference });
It’s impossible to change the map reference at runtime. |
A WebGL map supports both a 2D map and a 3D map, depending on the reference you supply in the constructor. These are illustrations of both:
//The HTML page should have a dom node with this id, e.g. // <div id="map" /> const domNodeID = "map"; //To create a 3D map, use the 3D Geocentric reference which is //created using the factory method of the ReferenceProvider module const geocentricReference = getReference("EPSG:4978"); //Create the map and specify the dom node id const map = new WebGLMap(domNodeID, { reference: geocentricReference });
//Use the factory method of the ReferenceProvider module to create //a 2D polar-stereographic reference const worldReference = getReference("EPSG:3995"); //Pass that reference in the constructor of the map const map = new WebGLMap("map", { reference: worldReference });