Using ArcGIS to create ArcGIS application

Keywords: Javascript

Official documents of ArcGIS:


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", { 
     zoom: 13 , 
     minZoom: 4, 
     maxZoom: 11 });

All map related operations are converted to view

There are some changes in the layer operation method:


map.addLayer(pointGraphicLayer, 20); map.removeLayer(pointGraphicLayer);


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( 
            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>
    <meta charset="utf-8">
    <title>ArcGIS JavaScript APP</title>
      html, body, #viewDiv {
        padding: 0; margin: 0;height: 100%;width: 100%;
    <div id="viewDiv"></div>

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="">
<script src=""></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:

    ], 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

3D scene:

    ], 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  


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
    ], 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 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: "",
            useVectorBasemaps: true  
//Add the widget to the top right DefaultUI of the view by adding it to the
view.ui.add(basemapGallery, "top-right");


Posted by mars16 on Fri, 19 Jun 2020 00:00:58 -0700