ArcGIS API for JavaScript 4.9 Learning Notes 1 (Creating 2D/3D Maps)
2D:
Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Intro to MapView - Create a 2D map</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </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> require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView){ var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene zoom: 4, // Sets zoom level based on level of detail (LOD) center: [15, 65] // Sets center point of view using longitude,latitude }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Code Interpretation:
-
Introduce files hosted on CDN:
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script>
-
require function
require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView){ var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene zoom: 4, // Sets zoom level based on level of detail (LOD) center: [15, 65] // Sets center point of view using longitude,latitude }); }); </script>1. The first parameter of the require entry function is an array, similar to # import in Java, which refers to the functions required for the second parameter. The second parameter is a function. Note that the functions loaded before and after must be consistent. If the first parameter loaded is "esri Map", then the first parameter in the callback function must be "Map".
2.Map has a basemap attribute, which allows you to choose map styles
ESRI The style of the bottom drawing is provided as follows: streets ,satellite ,hybrid, topo, gray,dark-gray, oceans, national-geographic,terrain, osm, dark-gray-vector, gray-vector,streets-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector,topo-vector.terrain, dark-gray, dark-gray-vector, gray-vector, streets-vector,streets-night-vector, streets-relief-vector, streets-navigation-vector , topo-vector etc.
3. In the second parameter of the callback function, a view is passed in. There are two types of views: MapView (for viewing 2D maps) and Scene View (for viewing 3D maps).
- container is used in MapView to bind the DIV id provided to the map, ** does not need to write # **
- Map is used to bind the map module created above
- zoom is used to set scaling levels (3-18)
- The center is a map center in latitude and longitude.
3D:
Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Intro to SceneView - Create a 3D map</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </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> require([ "esri/Map", "esri/views/SceneView" ], function(Map, SceneView){ var map = new Map({ basemap: "streets", ground: "world-elevation" }); var view = new SceneView({ container: "viewDiv", map: map, scale: 50000000, center: [-101.17, 21.78] }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
Unlike 2D, the callback function new in the 3D sample code has a SceneView constructor (which is also the biggest difference between creating a 2D map and a 3D map), in which scale is used to define scales.