1

I am new to ArcGIS map development in javascript, I am trying to add a labelClass for 3D graphic layer. Can anyone help me how to add a label for 3D map using javascript 4.0

  • The question is not clear. The graphic layers do not support labelingInfo method. The featurelayer support labelingInfo method. What do you need? – lele3p Jun 20 '16 at 11:07
  • I wanted to add label for Graphic to graphicLayer, I don't have a feature layer, thank you for your reply, I understood that the graphic layers do not support labeling – Krish Jun 22 '16 at 1:33
1

Ok.
To add label to a graphic you must use TextSymbol3DLayer and add, for each graphic, another graphic with TextSymbol3DLayer.
Here's the code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>3D Graphics - 4.0</title>

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

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",

        "esri/Graphic",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/TextSymbol",

        "esri/symbols/TextSymbol3DLayer",

        "dojo/domReady!"
      ],
      function(
        Map, SceneView, GraphicsLayer,
        Graphic, Point, Polyline, Polygon,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, TextSymbol,
        TextSymbol3DLayer
      ) {

        var map = new Map({
          basemap: "hybrid"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,

          camera: { // autocasts as new Camera()
            position: { // autocasts as new Point()
              x: -0.17746710975334712,
              y: 51.44543992422466,
              z: 1266.7049653716385
            },
            heading: 0.34445102566290225,
            tilt: 82.95536300536367
          }
        });

        /*********************
         * Add graphics layer
         *********************/

        var graphicsLayer = new GraphicsLayer();

        map.add(graphicsLayer);

        /*************************
         * Add a 3D point graphic
         *************************/

        // London
        var point = new Point({
            x: -0.178,
            y: 51.48791,
            z: 1010
          }),

          markerSymbol = new SimpleMarkerSymbol({
            color: [226, 119, 40],

            outline: { // autocasts as new SimpleLineSymbol()
              color: [255, 255, 255],
              width: 2
            }
          });

        var attrs = {};
        attrs["COUNTY"] = "Pippo";
        var pointGraphic = new Graphic({
          geometry: point,
          symbol: markerSymbol
        });

        graphicsLayer.add(pointGraphic);

        var textSymbol = new TextSymbol({
          color: "white",
          haloColor: "black",
          haloSize: "1px",
          text: "You are here",
          xoffset: 3,
          yoffset: 3,
          font: {  // autocast as esri/symbols/Font
            size: 12,
            family: "sans-serif",
            weight: "bolder"
          }
        });

        var pointGraphic2 = new Graphic({
          geometry: point,
          symbol: textSymbol
        });
        graphicsLayer.add(pointGraphic2);
        /****************************
         * Add a 3D polyline graphic
         ****************************/

        var polyline = new Polyline([
            [-0.178, 51.48791, 0],
            [-0.178, 51.48791, 1000]
          ]),

          lineSymbol = new SimpleLineSymbol({
            color: [226, 119, 40],
            width: 4
          });

        var polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: lineSymbol
        });

        graphicsLayer.add(polylineGraphic);

        /***************************
         * Add a 3D polygon graphic
         ***************************/

        var polygon = new Polygon([
            [-0.184, 51.48391, 400],
            [-0.184, 51.49091, 500],
            [-0.172, 51.49091, 500],
            [-0.172, 51.48391, 400],
            [-0.184, 51.48391, 400]
          ]),

          fillSymbol = new SimpleFillSymbol({
            color: [227, 139, 79, 0.8],
            outline: { // autocasts as new SimpleLineSymbol()
              color: [255, 255, 255],
              width: 1
            }
          });

        var polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: fillSymbol
        });

        graphicsLayer.add(polygonGraphic);

      });
  </script>
</head>

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

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.