MapView

MapView displays a 2D view of the Map instance. You must create a MapView instance to render the Map (and its operation and base layers) in 2D. To render the Map and its layers in 3D, see the documentation for SceneView.

To make the map visible to users in the DOM, you must create a MapView and reference at least two objects: a map instance and a DOM element. Each is set in the map and container properties respectively.
 

//Create a MapView instance (for 2D viewing)
var view = new MapView({
  map: myMap,  // Reference a Map instance
  container: "viewDiv"  // ID of the reference DOM element
  background: { // Automatically broadcast new Color Background()
    color: "magenta" // Auto broadcast as new Color ()
  }
});

Set map scale in MapView

view.scale = 24000; // Set a 1:240000 scale bar on the view

Set initial range

//Set the view range through center and zoom
view.center = [-112, 38];// Sets the center point of the view to the specified longitude / latitude
view.zoom = 13;// Set the zoom hierarchy to 13

//Set view range
view.extent = new Extent({
  xmin: -9177882,
  ymin: 4246761,
  xmax: -9176720,
  ymax: 4247967,
  spatialReference: {
    wkid: 102100
  }
});

By calling the on the MapView instance when () method to execute a program that cannot run until the map is loaded.

view.when(function(){
 // MapView and all resources in the map have been loaded. Now perform other procedures
}, function(error){
 // When the view cannot be loaded correctly, use the errback() function for processing
 console.log("The view's resources failed to load: ", error);
});

View attribute priority

Property	Overrides
viewpoint	extent, center, scale, zoom
extent	center, scale, zoom
scale	zoom

 

 

 

 

 

The goTo () method can also be used for animation to change or move the MapView from one range to another.

view.goTo({
  center: [-126, 49]
})
.catch(function(error) {
  if (error.name != "AbortError") {
     console.error(error);
  }
});


/***********************************************************************/

var pt = new Point({
  latitude: 49,
  longitude: -126
});

// Go to a given point
view.goTo(pt);

/***********************************************************************/

var opts = {
  duration: 5000  // The animation time is 5 seconds
};

// Use custom duration to point to level 15
view.goTo({
  target: pt,
  zoom: 15
}, opts);

/***********************************************************************/

// Use center and zoom to the same point
view.goTo({
  center: [-126, 49],
  zoom: 15
});


/***********************************************************************/


//Update the view's center attribute switch point
var pt = new Point({
  x: 12804.24,
  y: -1894032.09,
  spatialReference: 2027
});
view.center = pt;

/***********************************************************************/

view.goTo({//Previously used point jump
    position: {
        x: node.x,
        y: node.y,
        z: 10000,
        spatialReference: {wkid: 4545}
    },
    heading: 0,
    title: 0
    // zoom: 5
});

MapView events

 

• destroy()

Destroy the view and all related resources, including its maps, pop-up windows and UI elements. Once views are destroyed, they can no longer be used. To prevent these components from being broken, remove them from the view before calling destroy().

// Remove pop ups and legends from the view to prevent them from being destroyed
const popup = view.popup;
view.popup = null;
view.ui.remove(legend);

// Unset the map from the view to avoid damaging the map
const map = view.map;
view.map = null;

// Destroy the view and any remaining associated resources
view.destroy();

click event

// Get the screen point from the click event of the view
view.on("click", function (event) {
  // Search for drawings where you click
  // x, y coordinates of screen position
  // Screen coordinate definition
  view.hitTest(event).then(function (response) {
    if (response.results.length) {
      var graphic = response.results.filter(function (result) {
        // Check whether the drawing belongs to the layer of interest 
        return result.graphic.layer === myLayer;
      })[0].graphic;

      // Application result graph
      console.log(graphic.attributes);
    }
  });
});

// Gets the pointer movement event of the screen view
view.on("pointer-move", function(event){
  // Search for drawings on layers in hover position
  // Exclude view from hotTest graphics
  view.hitTest(event, {exclude: view.graphics}).then(function(response){
    // If the graph is returned, the result is processed
    if (response.results.length){
       // do something
    }
  })
})

Listening events

view.on("click", function(event){
  // Event is the reflection after event processing
  console.log(event.mapPoint);
});

// The pointer movement event is triggered when the user clicks Shift
// Click or move the mouse over the view
view.on('pointer-move', ["Shift"], function(event){
  var point = view2d.toMap({x: event.x, y: event.y});
  bufferPoint(point);
});

 

SceneView

SceneView uses WebGL to display a 3D view of a Map or WebScene instance.

In order for the Map to be visible to the user in the DOM, the SceneView must have both a valid Map instance and a non-zero height and width DOM element in which to render.

Note: before the view starts rendering the map, there must be valid data in the map, such as operation layer or basemap with base layer.

// Create a basic SceneView instance with basemap and world elevation
var view = new SceneView({
  // Instance of Map or WebScene
  map: new Map({
    basemap: "hybrid"
  }),

  // ID of the DOM element (which can also be the actual DOM element)
  container: "viewDiv"
});

var view = new SceneView({
 map: map,
 alphaCompositingEnabled: true,
 environment: {
   background: {
     type: "color",
     color: [0, 0, 0, 0]
   },
   starsEnabled: false,
   atmosphereEnabled: false
 }
})

Once a SceneView is constructed, it may not be ready for display immediately. For example, you may need to load the map data first to determine the spatial reference of the view, otherwise the DOM container may not have a non-zero size. Many view methods, such as hitTest or goTo, require views to be prepared before they can be used.

Views can be navigated programmatically through goTo() and view properties, and can also interact with mouse, keyboard or touch input. By default, SceneView navigation is enabled, including the interaction of mouse, keyboard and touch, as described in the following table. Touch interaction can be performed on any touch enabled display or laptop screen.

Traditional 2D mapping attributes (such as scale, scale, center and range) do not always work well in 3D. For example, when viewed in the background of a globe, the scale of the map is not clear. Therefore, SceneView supports these attributes on a best effort basis, with some limitations (see the documentation for each attribute for more information).

SceneView supports two different viewing modes, global (the left figure above) and local (the right figure above), which are specified by the viewingMode property. The global scene renders the earth as the earth, while the local scene renders the surface as a plane. Local mode allows navigation and display functions in localized or cropped areas. In both viewing modes, the user can navigate the camera below the ground by setting esri / Ground navigationConstraint type to none.

The viewing mode is determined based on the spatial reference of the view (if not explicitly set by the user). If the spatial reference is Web Mercator or WGS84, viewingMode will default to global. viewingMode defaults to local for any other spatial reference.

Supported coordinates:

SceneView supports the following coordinate systems in global scenes:

1. WGS84, WebMercator and CGCS2000
2. Non cached layers with any spatial references because they will be re projected to the scene spatial reference
3. Yes, Mars_2000_ (Sphere)，GCS_Mars_2000 and GCS_Moon_2000 support is experimental (see visualizing data in the Mars example).

Scenes with these coordinate systems have the following limitations:

(1) Dynamic layer, vector tile layer and scene layer are not supported

(2) The sun is currently not displayed correctly

(3) Unable to save to portal project

In local scenes, the following coordinate systems are supported:

1. Any projected coordinate system
2. Non cached layers with any spatial references because they will be re projected to the scene spatial reference

Note: SceneView does not support rendering of multipoint geometry.