Home > Developer > JavaScript
ArcGIS API for JavaScript 4.2 is learned directly from the website's sample, API reference is also translated from the official website, and since no one has published 4.2 of the study notes before the online deadline, I'll try.
What is ArcGIS API for JS? Here is not much to introduce, the most important point is the 4.x version and 3.x version of the change, according to the official meaning is to re-write the bottom.
The Notes stipulate:
ArcGIS API for JavaScript abbreviation AJS
Test development using a CDN (that is, not configuring the on-premises environment)
The rest of the changes, additions and deletions as required.
To display the map on an HTML page, there is a block element to take and perform the rendering.
This section takes the simplest, lowest-demand 2D map display as an example.
First in the HTML page must have a Div, officially named "Viewdiv". Then in the JS code to the output of this div. Post the skeleton portion of the JS code (expand to see the code)
This part of the code will be located under the 4.2 JS file reference.
require ( [ "Esri/map", "Esri/views/mapview", "dojo/domready!" ] , function (Map, Mapview) { // your code });The meanings of the three strings in the first argument (string array) of the Require entry function are now interpreted.
These three strings are similar to the using namespaces in C #, the Include header files in C + +, and #import in Java, and are references to the functionality required for the second parameter.
Specifically why these three strings are explained later.
The second parameter is a function (in C # It will pass the delegate, presumably ignoring this parenthesis), and the function body is as follows:
function(Map, Mapview) {varMap =NewMap ({basemap:"OSM"//Base Map Type }); varView =NewMapview ({container:"Viewdiv",//the ID of the block element that undertook the mapMap:map,//Map object, from above newZoom:8,//Zoom LevelCenter: [114, 30]//latitude and longitude of center });}
We explain the two instantiated object map and view here.
"The Map object is the data part of the maps, and view is the visual part of the map. 】
The creation parameters of the map object, in this case, the Basemap, the query reference can be known using the OSM as a type of base map. Basemap is a class that can be queried in the reference document as well. The official use of the streets map, and 114,30 near streets is not, I switched to the OSM map.
When the View object is constructed, it has 4 parameters, the annotation is easy to understand, does not explain the long, it is important that the map object is instantiated by the above new.
As for JS's function parameters and strange constructors, I do not explain, in short, the map and Mapview two nouns, is the Esri/map module and the Esri/views module under the two classes just.
This is the meaning of the first two strings in array one.
["Esri/map", "Esri/views/mapview", "dojo/domready!"] The third string is not interpreted for a moment
"References to the map class and the Mapview class"
The information for the map class is as follows:
inherited from accessor, subclasses have WebMap and Webscene.
The arguments to the constructor have one: Basemap type parameters
For the properties and methods of the Map object, refer to the following:
Map
Similarly, the Mapview object reference is as follows:
Mapview
Mapview object constructors, properties, and functions are also written in detail. Mapview inherits from the view class, whereas the view class inherits from the accessor class.
The note above is the second parameter.
Now, put out the full HTML page code, you can copy and paste into the local HTML file, double-click open to see the map.
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Metaname= "Viewport"content= "initial-scale=1, maximum-scale=1, User-scalable=no"><title>Get started with mapview-create a 2D map</title><style>html, body, #viewDiv{padding:0;margin:0;Height:100%;width:100%; }</style><Linkrel= "stylesheet"href= "Https://js.arcgis.com/4.2/esri/css/main.css"><Scriptsrc= "HTTPS://JS.ARCGIS.COM/4.2/"></Script><Script>require (["Esri/map", "Esri/views/mapview", "dojo/domready!"], function(Map, Mapview) {varMap= NewMap ({basemap:"OSM" }); varView= NewMapview ({container:"Viewdiv", Map:map, zoom:8, center: [ the, -] });});</Script></Head><Body> <DivID= "Viewdiv"></Div></Body></HTML>A first example
No accident, it would be like this:
I use Chrome 56 browser, which is the machine in the Internet café, Win7+chrome 55.
Add:
Link and the first script tag are references to the official stylesheets and class libraries, and none of them can be run.
Because AJS is dojo-based, you need to use dojo/domready! in the third element of the require's first string array parameter, specifically why, the official example has written, as the application level of development is not in-depth, interested students can look at the framework of AJS and so on.
ArcGIS API for JavaScript 4.2 Learn notes [1] Show Map
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
