Visualize data using ArcGIS javascript API using portal id-CodePudding

I am trying to visualize data on mars, i find this bit of code, but it is using feature layer, but i am publishing my layer on the portal so i am bit concerned about portal id, rather than feature layer, can somebody share the code, how can we do the same using portal id, and what changes we made to the same code to run the application.

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Visualize data on Mars | Sample | ArcGIS API for JavaScript 4.21
    </title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/ElevationLayer",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/widgets/LayerList"
      ], (
        Map,
        SceneView,
        ElevationLayer,
        TileLayer,
        FeatureLayer,
        LayerList
      ) => {
        const marsElevation = new ElevationLayer({
          url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDEM200M/ImageServer",
          copyright:
            "NASA, ESA, HRSC, Goddard Space Flight Center, USGS Astrogeology Science Center, Esri"
        });

        const marsImagery = new TileLayer({
          url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MDIM/MapServer",
          title: "Imagery",
          copyright: "USGS Astrogeology Science Center, NASA, JPL, Esri"
        });

        const map = new Map({
          ground: {
            layers: [marsElevation]
          },
          layers: [marsImagery]
        });

        const view = new SceneView({
          map: map,
          container: "viewDiv",
          qualityProfile: "high",
          // setting the spatial reference for Mars_2000 coordinate system
          spatialReference: {
            wkid: 104971
          },
          camera: {
            position: {
              x: 27.63423,
              y: -6.34466,
              z: 1281525.766,
              spatialReference: 104971
            },
            heading: 332.28,
            tilt: 37.12
          }
        });

        const cratersLayer = new FeatureLayer({
          url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/Mars_Nomenclature_Mountains/FeatureServer",
          definitionExpression: "type = 'Crater, craters'",
          title: "Craters",
          renderer: {
            type: "simple",
            symbol: {
              type: "polygon-3d",
              symbolLayers: [
                {
                  type: "fill",
                  material: { color: [255, 255, 255, 0.1] },
                  outline: {
                    color: [0, 0, 0, 0.4],
                    size: 2
                  }
                }
              ]
            }
          },
          labelingInfo: [
            {
              labelPlacement: "above-center",
              labelExpressionInfo: { expression: "$feature.NAME" },
              symbol: {
                type: "label-3d",
                symbolLayers: [
                  {
                    type: "text",
                    material: {
                      color: [0, 0, 0, 0.9]
                    },
                    halo: {
                      size: 2,
                      color: [255, 255, 255, 0.7]
                    },
                    font: {
                      size: 10
                    }
                  }
                ],
                verticalOffset: {
                  screenLength: 40,
                  maxWorldLength: 500000,
                  minWorldLength: 0
                },
                callout: {
                  type: "line",
                  size: 0.5,
                  color: [255, 255, 255, 0.9],
                  border: {
                    color: [0, 0, 0, 0.3]
                  }
                }
              }
            }
          ]
        });

        map.add(cratersLayer);

        const shadedReliefLayer = new TileLayer({
          url: "https://astro.arcgis.com/arcgis/rest/services/OnMars/MColorDEM/MapServer",
          copyright:
            "USGS Astrogeology Science Center, NASA, JPL, ESA, DLR, Esri",
          title: "Shaded relief",
          visible: false
        });

        map.add(shadedReliefLayer);

        const layerList = new LayerList({
          view
        });

        view.ui.add(layerList, "top-right");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

CodePudding user response：

you can use code like this instead of feature layer :

const map = new WebMap({
          basemap: {
            portalItem: {
              id: "fxffgygutcchcchcy6566hc"
            }
          }
        });