标注

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const labelClass = {  // autocasts as new LabelClass()
  symbol: {
    type: "text",  // autocasts as new TextSymbol()
    color: "white",
    haloColor: "blue",
    haloSize: 1,
    font: {  // autocast as new Font()
       family: "Noto Sans",
       size: 14
     }
  },
  labelPlacement: "above-right",
  labelExpressionInfo: {
    expression: "$feature.Team + TextFormatting.NewLine + $feature.Division"
  },
  maxScale: 0,
  minScale: 25000000,
  where: "Conference = 'AFC'"
};

const labelLayer = new FeatureLayer({
  portalItem: {  // autocasts as new PortalItem()
    id: "7f0bfc7bf67a407d8efebf584f6d956d"
  },
  labelingInfo: [labelClass]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const labelClass = {  // autocasts as new LabelClass()
  symbol: {
    type: "label-3d", // autocasts as new LabelSymbol3D()
    symbolLayers: [
      {
        type: "text", // autocasts as new TextSymbol3DLayer()
        material: {
          color: "purple"
        },
        font: {  // autocasts as new Font()
          family: "Just Another Hand",
          weight: bold
        },
        size: 22
      }
    ]
  },
  labelPlacement: "below-center",
  labelExpressionInfo: {
    expression: 'DefaultValue($feature.CITY_NAME, "no data")'
  }
};

const labelLayer = new FeatureLayer({
  url: “url”,
  labelingInfo: [labelClass]
});

1
2
3
4
5
6
7
@font-face {
   font-family: "MyFont";
   font-style: normal;
   font-weight: 400;
   font-display: auto;
   src: url("./my-font.ttf") format("truetype");
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const labelSymbol = {
  type: "label-3d", // autocasts as new LabelSymbol3D
  symbolLayers: [
    {
      type: "text", // autocasts as new TextSymbol3DLayer()
      material: {
        color: [0, 0, 0, 0.8]
      },
      font: {
        size: 30,
        family: "MyFont"
      }
    }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const labelClass = {  // autocasts as new LabelClass()
  symbol: {
    type: "label-3d", // autocasts as new LabelSymbol3D()
    symbolLayers: [
      {
        type: "text", // autocasts as new TextSymbol3DLayer()
        material: {
          color: "black"
        },
        halo: {
          color: [255, 255, 255, 0.7],
          size: 2
        },
        font: {
          family: "Noto Sans"
        },
        size: 10
      }
    ]
  },
  labelPlacement: "above-right",
  labelExpressionInfo: {
    expression: `$feature.NAME + TextFormatting.NewLine + Text($feature.HOEHE, "#,### m")`
  }
};

const labelLayer = new FeatureLayer({
  url: "url",
  elevationInfo: {
    mode: "relative-to-ground"
  },
  labelingInfo: [labelClass]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
geosceneConfig.fontsUrl = "https://myserver.com/fonts";  // reference fonts from a server in `pbf`

const labelClass = {  // autocasts as new LabelClass()
  symbol: {
    type: "text",  // autocasts as new TextSymbol()
    color: "white",
    haloColor: "blue",
    haloSize: 1,
    font: {  // autocast as new Font()
       family: "Wes Welker",
       size: 83
     }
  },
  labelPlacement: "above-right",
  labelExpressionInfo: {
    expression: "$feature.Team + TextFormatting.NewLine + $feature.Division"
  },
  maxScale: 0,
  minScale: 25000000,
  where: "Conference = 'AFC'"
};

const labelLayer = new FeatureLayer({
  portalItem: {  // autocasts as new PortalItem()
    id: "7f0bfc7bf67a407d8efebf584f6d956d"
  },
  labelingInfo: [labelClass]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const textSymbol = {
  type: "text",  // autocasts as new TextSymbol()
  color: "blue",
  haloColor: "red",
  haloSize: "1px",
  text: "Wish you were here",
  xoffset: 3,
  yoffset: 3,
  font: {  // autocasts as new Font()
    size: 12,
    family: "Orbitron",
    weight: "bold"
  }
};

const point = {
  type: "point",  // autocasts as new Point()
  longitude: -71.26,
  latitude:  42.09
};

const pointGraphic = new Graphic({
  geometry: point,
  symbol: textSymbol
});

view.graphics.add(pointGraphic);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const textSymbol3D = {
  type: "point-3d",  // autocasts as new PointSymbol3D()
  symbolLayers: [{
    type: "text",  // autocasts as new TextSymbol3DLayer()
    font: {  // autocasts as new Font()
      size: 12,
      family: "Just Another Hand"
    },
    text: "Wish I was here",
    material: {
      color: "green"
    },
    size: 12
  }]
};

const point = {
  type: "point",  // autocasts as new Point()
  longitude: -71.26,
  latitude:  42.09
};

const pointGraphic3D = new Graphic({
  geometry: point,
  symbol: threeDpoint
});

view.graphics.add(pointGraphic3D);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const labelClass = {  // autocasts as new LabelClass()
  symbol: {
    type: 'text',  // autocasts as new TextSymbol()
    color: 'green',
    font: {  // autocast as new Font()
      family: 'CalciteWebCoreIcons',
      size: 12
    }
  },
  labelPlacement: 'above-left',
  labelExpressionInfo: {
    expression: '"\ue61d"'  // geoscene-icon-map-pin
  }
};

const fl = new FeatureLayer({
  url: "url",
  labelingInfo: labelClass
});

1
2
3
4
5
// template literal
"$feature.MARKER_ACTIVITY + '\\n' + $feature.RECAREANAM"

// TextFormatting.NewLine
"$feature.MARKER_ACTIVITY + TextFormatting.NewLine + $feature.RECAREANAM"