主题可视化与现实的 3D 符号

1
2
3
4
5
6
7
8
const trunkRenderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "web-style", // autocasts as new WebStyleSymbol()
    styleName: "esriRealisticTreesStyle",
    name: "其他"
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const crownRenderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: sym, // set from the code snippet in step 3
  visualVariables: [
    {
      type: "size",
      axis: "height", // specify which axis to apply the data values to
      field: "Crown_Height",
      valueUnit: "feet"
    },
    {
      type: "size",
      axis: "width", // specify which axis to apply the data values to
      field: "Width_EW",
      valueUnit: "feet"
    },
    {
      type: "size",
      axis: "depth", // specify which axis to apply the data values to
      field: "Width_NS",
      valueUnit: "feet"
    }
  ]
};

1
2
3
4
5
6
7
8
9
10
const visualVariables = crownRenderer.visualVariables.splice(0);
visualVariables.push({
  type: "color",
  field: "C_Storage", // Carbon storage
  stops: [
    { value: 0, color: "#f7fcb9" }, // features with zero carbon
    { value: 10000, color: "#31a354" } // features with 8000 carbon
  ]
});
crownRenderer.visualVariables = visualVariables;

1
2
3
4
5
6
7
8
9
10
11
12
const treesLayer = new FeatureLayer({
  url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
  renderer: renderer, // set renderer on layer
  outFields: ["*"],
  popupTemplate: {
    // autocasts as new PopupTemplate()
    title: "{Cmn_Name}",
    content:
      "<i>{Sci_Name}</i><br>" +
      "This tree is in {Condition} condition and is {Height} feet in height."
  }
});