Official documents of ArcGIS: https://developers.arcgis.com/javascript/
Chapter 1: understanding and using ArcGIS
1 ArcGIS for js 4.x
Version 4.15 is used, there are differences between each version of ArcGIS, and there are some big differences between 3 and 4
The map can be displayed in 2D or 3D, and the drawing logic has been modified. The map and layer are not in the processing logic, but the view processing view is specially used to visualize the data in the map or scene. The map contains the actual data or layers to display, while the view processes the displayed data.
4.x has more MapView, and the map is displayed in MapView:
var map = new Map({ basemap: "streets" });
var view = new MapView({
container: "viewDiv",
map: map,
center:[118.183013,39.638808], zoom: 6 });
map = new Map("map", {
center:[118.183013,39.638808],
zoom: 13 ,
minZoom: 4,
maxZoom: 11 });All map related operations are converted to view
There are some changes in the layer operation method:
3.x map.addLayer(pointGraphicLayer, 20); map.removeLayer(pointGraphicLayer); 4.x map.add(graphicsLayer) map.remove(graphicsLayer);
Some classes can be directly used without introduction:
var point = { type: "point", longitude: 118.183013, latitude: 39.638808 };
var simpleFillSymbol = { type: "simple-fill",
color: [227, 139, 79, 0.8],
opacity 80% outline: { color: [255, 255, 0], width: 1 }
};
var point = new Point(118.183013,39.638808);
var simpleFillSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NONE,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
new Color([148, 236, 60]),2),
new Color([255, 255, 179, 0]));
var polygon =new Polygon ( [118.183013, 39.638808],
[118.333013, 39.828808],
[118.543013, 39.878808] );Module and package updates:
Changed package name, such as esri/dijitnow esri/widgets /.
Short, clearer module names, such as TileLayer instead of arcgistiledmaservicelayer.
Consistent sleeve module name, all modules now have a capital letter, including start Map, Graphic and Query.
Support classes have been moved to the support folder to make API references more organized, such as esri/layers/support and esri/tasks/support.
The structure has changed esri/config. Properties of esriConfig.defaults It is now located in esriconfig. For example, to set the default geometry service
5. The new version of popuptemplate no longer has infowindow
2 create application
1. Create HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ArcGIS JavaScript APP</title>
<style>
html, body, #viewDiv {
padding: 0; margin: 0;height: 100%;width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>2. Add references to CSS and API
The < script > tag loads JavaScript from CDN through the ArcGIS API. After you release a new version of the API, update the version number to match the new release
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.15/"></script>
3. Loading module
esri/Map - load map specific code esri/views/MapView - loads the code that allows the map to be viewed in 2D mode
Use the second < script > tag to load a specific module from the API. Load the following modules using the syntax in the following code snippet
esri/Map - load map specific code esri/views/MapView - load code that allows the map to be viewed in 2D mode
require([ "esri/Map", "esri/views/MapView" ],
function(Map, MapView) {});The global require() function (provided by Dojo) is used to load modules. Esri's JavaScript API is built on Dojo to take advantage of Dojo's modular code base and its ability to coordinate cross browser differences.
4. Create a map
Use to create a new Map, which is a reference to the Map class loaded from the esri/Map module. You can basemap specify Map properties by passing an object to the Map constructor
require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
});Other base map options are satellite, hybrid, topo, gray, dark gray, oceans, osm, National Geographic.
5 create 2D map or 3D scene
In < head >, add the < script > tag and AMD require statement to load Map and MapView or SceneView modular. Create a new Map And set the basemap property to TOPO vector. If you want to create a 3D scene, set the ground property to world elevation to display elevation changes. Finally, follow one of the following steps to create the appropriate view:
2D map:
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // longitude, latitude
zoom: 13
});
});
</script>3D scene:
<script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView) {
var map = new Map({
basemap: "topo-vector",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: {
x: -118.80800,
y: 33.96100,
z: 25000
},
tilt: 65
}
});
});
</script>
3 base map
Various underlays used in applications. Many of them can be referenced directly with string constants.
Base map attributes light gray vector, dark gray vector, satellite, streets relief vector, and streets navigation vector
var map = new Map({basemap: "streets-navigation-vector"});The options of base map are: streets,satellite, hybrid, topo, gray, dark gray, oceans, osm, National Geographic.
Build an application to interactively select and display ArcGIS Online base map:
To build an application that can switch between underlays, use the BasemapToggle or BasemapGallery widget.
The BasemapToggle widget allows you to switch between two defined underlays,
The BasemapGallery widget allows you to choose from multiple underlays that belong to the ArcGIS Online group. You can use either a set of underlays hosted by Esri or a set of underlays specifically for your application
Example 1: to switch the base map:
One of the easiest ways to enable selection between two underlays is to use the BasemapToggle widget. In this step, you configure the widget to switch between the terrain and satellite underlays.
//In the require statement, add references to the BasemapToggle and BasemapGallery modules
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, BasemapToggle, BasemapGallery) {In function at the end of the code in main, create a BasemapToggle widget to set the view and nextBasemap properties to satellite
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
// Then add the widget to the of the view and add it to the DefaultUI in the lower right corner of the view.
view.ui.add(basemapToggle, "bottom-right");Example 2: select a base map from the ArcGIS Online group:
Another way to select a base map is to use the basemap Gallery widget. In this step, you use the widget to load a base map from the ArcGIS Online group so that users can select and display the base map.
In main function, create a BasemapGallery widget and configure it to load the base map from it ArcGIS Online . Set view as the active view and source as the ArcGIS Online portal. Set url to https://wwww.arcgis.com And set useVectorBasemaps to, true to load the underlay from the vector block group. If this value is set to this value, false loads the grid block underlay group
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true
}
}
});
//Add the widget to the top right DefaultUI of the view by adding it to the
view.ui.add(basemapGallery, "top-right");