vue use ArcGis API for js to create map implementation example

Example of arcgis api creating a map in vue

Today I'm sharing the creation of a map instance in vue using the arcgis api and displaying it on the map.

First, the introduction of arcgis

You can refer to the previous post for this one specifically:Use of the ArcGis API for js in the

Creating a map instance

This Map class is what is used to store, manage and override the properties and methods of layers common to both 2D and 3D viewing.

        var map = new Map({
          basemap:'streets'  //Configure basemap type
        })

View de-referencing maps

• Once the map is created, a view is needed to reference the map so that it can be displayed in the web page.

        //create 2d view
        var view = new MapView({
          container:'viewDiv',//html structure, to be declared with an id
          map:map,// Example of a referenced map
          zoom: 4,//Indicates the current zoom level of the view, usually used together with center to set the initial value of the view.
          center: [15, 65]//Set the center of the displayed map
        })

Creating a 3d view

Creating a 3d view is pretty much the same thing

        var view = new SceneView({
          container: "viewMap", 
          map: map,              
          center:[113.54,22.36],
          zoom:4,
          extent:{//Configure initial map extent
            xmin: 113.53778263250001,
            ymin: 22.361690773984428,
            xmax: 113.56382441750009,
            ymax: 22.377545955584687,
            spatialReference: 4326// Configure the coordinate system
          },          
        });

Finally run the project and you can see that the map has been successfully displayed in the web page.

Specific configuration documentation can be found on the arcgis website'sAPI

Above is vue using ArcGis API for js to create maps to achieve the details of the example, more information about vue ArcGis API for js to create maps please pay attention to my other related articles!