ArcGIS API 4.x for JS basic map

ArcGIS api3.x for JS turns to ArcGIS api4.x, and I'm also the most recent 3-4 months thing, just as the company has a Webgis project that needs to showcase three-dimensional scenes, and the project chooses ArcGIS api4.x. I'm just breaking records. Some experience in the process of learning ArcGIS api4.x, some of their own personal understanding, the wrong place, also please colleagues forgive me and a lot of advice.

first, talk about the understanding of the names of several professional terms which I think are more important: 1.View

View, which provides a way to view and interact with the map component. A map is simply a container that stores the geographic information contained in the base layer and the operations layer, and the view renders the map and its layers so that they are visible to the user. View is a base class that has two subclasses representing two types of views: Mapview and Sceneview.

2.MapView

Mapview displays a map instance of a two-dimensional view, Mapview must establish and reference at least two objects: a map instance and a DOM element, each set in the Mappings and container properties.

3. Sceneview

Sceneview displays a map or webscene instance, rendering 3D technology uses WEBGL. Sceneview must have a valid map instance and a non-zero height and width in a DOM element to render.

4.Map

The Map class contains properties and methods for storing, managing, and overwriting layers that are common to two-and three-dimensional views. Layers can be added and removed, but can be viewed (in 3D view) through a single view (in two-dimensional view data) or in a scene view. Thus, an instance of the map is a simple container preservation layer, and the view shows how the layers and bases of the map interact with each other. The map class has two subclasses: WebMap and Webscene, respectively, corresponding to the two-dimensional view Mapview and the three-dimensional view Sceneview.

5.Basemap

Basemap is used to create custom basemaps. These basemaps create tile services that can publish tile services from their own servers or published by third parties.

6.Camera

Camera cameras define the Sceneview view visibility from position, tilt, and yaw angles, and the camera is only available for 3D sceneviews.

Second, ArcGIS api4.x offline deployment:

The idea of offline deployment follows what I wrote earlier: ArcGIS api3.x offline deployment, basically consistent. A little bit of a change is that I define a variable Arcgisapipath in the project to configure the path to the offline API:

var arcgisapipath = "Http://localhost:8888/ocean/js/arcgisapi/4.5/dojo";

Then configure the API's Init.js and dojo.js files to:

Note: Before the project references the ArcGIS API, the Arcgisapipath variable must be introduced, otherwise the API's offline configuration will not get the Arcgisapipath configuration path.

third, the basic basemap concrete realization idea: 1. Configure the map information file Mapconfig.js

/*--------------------------------Map Initial information configuration--------------------------------*/functionMapconfig () {}mapconfig.mapinitparams={fullextent: {//Full Image Rangexmin:13026179.382488998, ymin:2677291.306672236, Xmax:13044409.613734988, Ymax:2685919.1362399133}, Extent: {//Initialize Scopexmin:11810425.929735247, ymin:2257718.8019195194, Xmax:13209314.679703815, Ymax:2956468.0219521355}, Center: {x:12561975.237333735, y:2440969.8343777806, Spatialreference:3857}, Spatialreference: {wkid:3857},}mapconfig.imgmap={url: "Http://localhost:6080/arcgis/rest/services/ImageMap/MapServer", Labelurl: "", type:1};

2. Initializing variable definitions

var appConfig = {                 null                 , null,                 null  ,                 "Viewdiv" };

3. Initialize View parameters

varInitialviewparams ={map:map,//Zoom:4,                       //Center:MapConfig.center,ExtentNewExtent ({xmin:MapConfig.mapInitParams.extent.xmin, ymin:mapconf                           Ig.mapInitParams.extent.ymin, Xmax:MapConfig.mapInitParams.extent.xmax, Ymax:MapConfig.mapInitParams.extent.ymax, spatialreference: {wk                       Id:MapConfig.mapInitParams.spatialReference.wkid}}), Container:appConfig.container};

Some parameter description:

(1) Extent, view initialization display range;

(2) zoom level, view initialization scale;

(3) Center, the view initializes the central point position of the display;

(4) Container, view rendered container div;

    <div id= "Viewdiv" class= "map" >        <div class= "themebtn" >             <div id= "Infodiv" >                 <input class= "Esri-component Esri-widget-button esri-widget esri-interactive" type= "button" id= "switch-btn" value= "2D" >            </div>         </div>      </div>

(5) Maps, map objects.

 //  load default image basemap   imglayer = new   Tilelayer ({ URL:MAPCONFIG.IMGMAP.URL, ID:  "basemapid" });  var  imgbasemap = new   Basemap ({baselayers: [Imglayer], Title:  "Image Basemap" , ID:  "imgbasemap" });  var  map = new   Map ({basemap:imgbasemap});  

4. Create a three-dimensional view mode by default:

Appconfig.sceneview = CreateView (Initialviewparams, "3d"); Appconfig.activeview=Appconfig.sceneview; Initialviewparams.container=NULL; Appconfig.mapview= CreateView (Initialviewparams, "2d");functionCreateView (params, type) {varview; varis2d = Type = = = "2d"; if(is2d) {view=NewMapview (params); returnview; } Else{View=NewSceneview (params); }                       returnview;}

5. The following results are achieved:

43 or two or three-D mode switch specific implementation ideas: 1.2d3d Button Listener event:

var switchbutton = document.getElementById ("switch-btn"); Switchbutton.addeventlistener (  function() {    switchView ();});

2. The two or three-D switching function realizes:

functionSwitchView () {varIs3d = AppConfig.activeView.type = = = "3d"; AppConfig.activeView.container=NULL; if(is3d) {AppConfig.mapView.viewpoint=AppConfig.activeView.viewpoint.clone (); AppConfig.mapView.container=Appconfig.container; Appconfig.activeview=Appconfig.mapview; Switchbutton.value= "3D"; } Else{appConfig.sceneView.viewpoint=AppConfig.activeView.viewpoint.clone (); AppConfig.sceneView.container=Appconfig.container; Appconfig.activeview=Appconfig.sceneview; Switchbutton.value= "2D"; }                                            }

3. The following results are achieved:

ArcGIS API 4.x for JS basic map