3D Map

JS API 3D Map provides a new map view effect based on vector map data, offering support for map functions such as rotation and perspective tilt compared to 2D maps. The 3D map is developed based on WebGL, ensuring smoothness while adding support for functions like level-less zooming.

This chapter will introduce you to:

• Enable 3D Map.
• 3D Map Compatibility Instructions.

3D Map Example

User Guide

Enable 3D Map

To enable the 3D map view effect, you need to reference the JS API version 1.4.0 or above, and add the viewMode:'3D' property to the map during Map initialization.

var map = new AMap.Map('container', {
  pitch: 50, //Map pitch angle, effective range 0 degrees to 83 degrees
  viewMode: '3D', //Map mode
  rotateEnable: true, //Whether to enable map rotation interaction
  pitchEnable: true, //Whether to enable map tilt interaction
  zoom: 17, 
  showOversea: true, //Enable world Map
  rotation: -15, //Initial map clockwise rotation angle
  zooms: [2, 20], //Zoom level range displayed on the map
});

Enable Map Zoom and Rotation Plugin

The functionality of the map can be extended by introducing plugins. This example uses AMap.plugin() for asynchronous loading. For more introduction methods, please refer to the plugin usage.

AMap.plugin(['AMap.ControlBar', 'AMap.ToolBar'], function () { //Asynchronous Loading Plugin
  var controlBar = new AMap.ControlBar({ //Map Rotation Control Plugin
      position: {
          right: '10px',
          top: '10px'
      }
  });
  map.addControl(controlBar);
  var toolBar = new AMap.ToolBar({ //Map Zoom Plugin
      position: {
          right: '40px',
          top: '110px'
      }
  });
  map.addControl(toolBar)
});

3D Map Compatibility Information

• Under the 3D map effect, if using custom raster images, it is necessary to ensure that the image resources returned by the raster image service have the Access-Control-Allow-Origin:* response Header, otherwise, custom raster images will not be able to load.
• 3D maps are currently compatible with numerous browsers on multiple platforms such as Windows, Mac, iOS, and Android. However, since map rendering depends on front-end environments like WebGL, if the terminal environment cannot meet the requirements for 3D rendering, we will still use the original 2D view for rendering.
• Starting from version v1.4 of JS API, 3D maps are supported. The components not supported in 3D view are as follows:

Description of properties and methods involved in this chapter

AMap.Map

AMap.plugin