arcgis-visualization

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

ArcGIS Visualization

ArcGIS 可视化

Use this skill when styling layers with renderers, symbols, visual variables, labels, and effects.

当你需要使用渲染器、符号、视觉变量、标签和效果来设置图层样式时，可以使用本技能。

Renderer Types Overview

渲染器类型概述

Renderer	Use Case
SimpleRenderer	Same symbol for all features
UniqueValueRenderer	Different symbols by category
ClassBreaksRenderer	Different symbols by numeric ranges
HeatmapRenderer	Density visualization
DotDensityRenderer	Dot density maps
DictionaryRenderer	Military symbology

渲染器	使用场景
SimpleRenderer	为所有要素使用相同的符号
UniqueValueRenderer	按类别使用不同符号
ClassBreaksRenderer	按数值范围使用不同符号
HeatmapRenderer	密度可视化
DotDensityRenderer	点密度地图
DictionaryRenderer	军事符号体系

SimpleRenderer

javascript

const renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "blue",
    size: 8,
    outline: {
      color: "white",
      width: 1
    }
  }
};

layer.renderer = renderer;

javascript

const renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "blue",
    size: 8,
    outline: {
      color: "white",
      width: 1
    }
  }
};

layer.renderer = renderer;

With Visual Variables

结合视觉变量

javascript

const renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "#13EB0C",
    outline: { color: "#A9A9A9", width: 0.5 }
  },
  visualVariables: [{
    type: "size",
    field: "population",
    stops: [
      { value: 1000, size: 4 },
      { value: 10000, size: 12 },
      { value: 100000, size: 24 }
    ]
  }]
};

javascript

const renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "#13EB0C",
    outline: { color: "#A9A9A9", width: 0.5 }
  },
  visualVariables: [{
    type: "size",
    field: "population",
    stops: [
      { value: 1000, size: 4 },
      { value: 10000, size: 12 },
      { value: 100000, size: 24 }
    ]
  }]
};

UniqueValueRenderer

Basic Unique Values

基础唯一值配置

javascript

const renderer = {
  type: "unique-value",
  field: "type",
  defaultSymbol: { type: "simple-fill", color: "gray" },
  uniqueValueInfos: [
    {
      value: "residential",
      symbol: { type: "simple-fill", color: "#FFFF00" },
      label: "Residential"
    },
    {
      value: "commercial",
      symbol: { type: "simple-fill", color: "#FF0000" },
      label: "Commercial"
    },
    {
      value: "industrial",
      symbol: { type: "simple-fill", color: "#800080" },
      label: "Industrial"
    }
  ]
};

javascript

const renderer = {
  type: "unique-value",
  field: "type",
  defaultSymbol: { type: "simple-fill", color: "gray" },
  uniqueValueInfos: [
    {
      value: "residential",
      symbol: { type: "simple-fill", color: "#FFFF00" },
      label: "Residential"
    },
    {
      value: "commercial",
      symbol: { type: "simple-fill", color: "#FF0000" },
      label: "Commercial"
    },
    {
      value: "industrial",
      symbol: { type: "simple-fill", color: "#800080" },
      label: "Industrial"
    }
  ]
};

Grouped Unique Values (with headings in legend)

分组唯一值（图例中带标题）

javascript

const renderer = {
  type: "unique-value",
  field: "zonecode",
  uniqueValueGroups: [
    {
      heading: "Commercial",
      classes: [
        {
          label: "C-1 | Neighborhood Commercial",
          symbol: createFillSymbol([189, 145, 145]),
          values: "C-1"
        },
        {
          label: "C-2 | Community Commercial",
          symbol: createFillSymbol([255, 179, 219]),
          values: "C-2"
        }
      ]
    },
    {
      heading: "Residential",
      classes: [
        {
          label: "R-1 | Low Density",
          symbol: createFillSymbol([255, 255, 224]),
          values: "R-1"
        },
        {
          label: "Special Areas",
          symbol: createFillSymbol([161, 237, 237]),
          values: ["S-DW", "S-DR", "S-RP"] // Multiple values
        }
      ]
    }
  ]
};

function createFillSymbol(color) {
  return {
    type: "simple-fill",
    color: color,
    outline: null
  };
}

javascript

const renderer = {
  type: "unique-value",
  field: "zonecode",
  uniqueValueGroups: [
    {
      heading: "Commercial",
      classes: [
        {
          label: "C-1 | Neighborhood Commercial",
          symbol: createFillSymbol([189, 145, 145]),
          values: "C-1"
        },
        {
          label: "C-2 | Community Commercial",
          symbol: createFillSymbol([255, 179, 219]),
          values: "C-2"
        }
      ]
    },
    {
      heading: "Residential",
      classes: [
        {
          label: "R-1 | Low Density",
          symbol: createFillSymbol([255, 255, 224]),
          values: "R-1"
        },
        {
          label: "Special Areas",
          symbol: createFillSymbol([161, 237, 237]),
          values: ["S-DW", "S-DR", "S-RP"] // 多值匹配
        }
      ]
    }
  ]
};

function createFillSymbol(color) {
  return {
    type: "simple-fill",
    color: color,
    outline: null
  };
}

ClassBreaksRenderer

javascript

const renderer = {
  type: "class-breaks",
  field: "population",
  normalizationField: "area", // Optional: divide by this field
  legendOptions: {
    title: "Population Density"
  },
  defaultSymbol: {
    type: "simple-fill",
    color: "black",
    style: "backward-diagonal"
  },
  defaultLabel: "No data",
  classBreakInfos: [
    {
      minValue: 0,
      maxValue: 100,
      symbol: { type: "simple-fill", color: "#fffcd4" },
      label: "< 100"
    },
    {
      minValue: 100,
      maxValue: 500,
      symbol: { type: "simple-fill", color: "#b1cdc2" },
      label: "100 - 500"
    },
    {
      minValue: 500,
      maxValue: 1000,
      symbol: { type: "simple-fill", color: "#38627a" },
      label: "500 - 1,000"
    },
    {
      minValue: 1000,
      maxValue: Infinity,
      symbol: { type: "simple-fill", color: "#0d2644" },
      label: "> 1,000"
    }
  ]
};

javascript

const renderer = {
  type: "class-breaks",
  field: "population",
  normalizationField: "area", // 可选：按该字段归一化
  legendOptions: {
    title: "Population Density"
  },
  defaultSymbol: {
    type: "simple-fill",
    color: "black",
    style: "backward-diagonal"
  },
  defaultLabel: "No data",
  classBreakInfos: [
    {
      minValue: 0,
      maxValue: 100,
      symbol: { type: "simple-fill", color: "#fffcd4" },
      label: "< 100"
    },
    {
      minValue: 100,
      maxValue: 500,
      symbol: { type: "simple-fill", color: "#b1cdc2" },
      label: "100 - 500"
    },
    {
      minValue: 500,
      maxValue: 1000,
      symbol: { type: "simple-fill", color: "#38627a" },
      label: "500 - 1,000"
    },
    {
      minValue: 1000,
      maxValue: Infinity,
      symbol: { type: "simple-fill", color: "#0d2644" },
      label: "> 1,000"
    }
  ]
};

HeatmapRenderer

javascript

const renderer = {
  type: "heatmap",
  colorStops: [
    { color: "rgba(63, 40, 102, 0)", ratio: 0 },
    { color: "#472b77", ratio: 0.083 },
    { color: "#563098", ratio: 0.25 },
    { color: "#7139d4", ratio: 0.5 },
    { color: "#853fff", ratio: 0.664 },
    { color: "#c29f80", ratio: 0.83 },
    { color: "#ffff00", ratio: 1 }
  ],
  maxDensity: 0.01,
  minDensity: 0,
  radius: 18 // Blur radius in pixels
};

javascript

const renderer = {
  type: "heatmap",
  colorStops: [
    { color: "rgba(63, 40, 102, 0)", ratio: 0 },
    { color: "#472b77", ratio: 0.083 },
    { color: "#563098", ratio: 0.25 },
    { color: "#7139d4", ratio: 0.5 },
    { color: "#853fff", ratio: 0.664 },
    { color: "#c29f80", ratio: 0.83 },
    { color: "#ffff00", ratio: 1 }
  ],
  maxDensity: 0.01,
  minDensity: 0,
  radius: 18 // 模糊半径（像素）
};

2D Symbol Types

2D 符号类型

SimpleMarkerSymbol (Points)

SimpleMarkerSymbol（点要素）

javascript

const symbol = {
  type: "simple-marker",
  style: "circle", // circle, square, cross, x, diamond, triangle
  color: [255, 0, 0],
  size: 12,
  outline: {
    color: [255, 255, 255],
    width: 2
  }
};

javascript

const symbol = {
  type: "simple-marker",
  style: "circle", // circle, square, cross, x, diamond, triangle
  color: [255, 0, 0],
  size: 12,
  outline: {
    color: [255, 255, 255],
    width: 2
  }
};

SimpleLineSymbol

javascript

const symbol = {
  type: "simple-line",
  style: "solid", // solid, dash, dot, dash-dot, etc.
  color: [0, 0, 255],
  width: 2,
  cap: "round",   // round, butt, square
  join: "round"   // round, miter, bevel
};

javascript

const symbol = {
  type: "simple-line",
  style: "solid", // solid, dash, dot, dash-dot, etc.
  color: [0, 0, 255],
  width: 2,
  cap: "round",   // round, butt, square
  join: "round"   // round, miter, bevel
};

SimpleFillSymbol (Polygons)

SimpleFillSymbol（面要素）

javascript

const symbol = {
  type: "simple-fill",
  style: "solid", // solid, none, horizontal, vertical, cross, etc.
  color: [255, 255, 0, 0.5], // RGBA
  outline: {
    type: "simple-line",
    color: [0, 0, 0],
    width: 1
  }
};

javascript

const symbol = {
  type: "simple-fill",
  style: "solid", // solid, none, horizontal, vertical, cross, etc.
  color: [255, 255, 0, 0.5], // RGBA
  outline: {
    type: "simple-line",
    color: [0, 0, 0],
    width: 1
  }
};

PictureMarkerSymbol

javascript

const symbol = {
  type: "picture-marker",
  url: "https://example.com/icon.png",
  width: 24,
  height: 24,
  xoffset: 0,
  yoffset: 0
};

javascript

const symbol = {
  type: "picture-marker",
  url: "https://example.com/icon.png",
  width: 24,
  height: 24,
  xoffset: 0,
  yoffset: 0
};

TextSymbol

javascript

const symbol = {
  type: "text",
  text: "Label",
  color: "white",
  font: {
    family: "Arial",
    size: 12,
    weight: "bold"
  },
  haloColor: "black",
  haloSize: 1
};

javascript

const symbol = {
  type: "text",
  text: "Label",
  color: "white",
  font: {
    family: "Arial",
    size: 12,
    weight: "bold"
  },
  haloColor: "black",
  haloSize: 1
};

3D Symbol Types

3D 符号类型

PointSymbol3D

javascript

const symbol = {
  type: "point-3d",
  symbolLayers: [{
    type: "icon",
    resource: { primitive: "circle" },
    material: { color: "red" },
    size: 12
  }]
};

// Object marker
const symbol = {
  type: "point-3d",
  symbolLayers: [{
    type: "object",
    resource: { primitive: "cylinder" }, // cone, cube, sphere, diamond
    material: { color: "blue" },
    height: 100,
    width: 10,
    depth: 10
  }]
};

javascript

const symbol = {
  type: "point-3d",
  symbolLayers: [{
    type: "icon",
    resource: { primitive: "circle" },
    material: { color: "red" },
    size: 12
  }]
};

// 对象标记
const symbol = {
  type: "point-3d",
  symbolLayers: [{
    type: "object",
    resource: { primitive: "cylinder" }, // cone, cube, sphere, diamond
    material: { color: "blue" },
    height: 100,
    width: 10,
    depth: 10
  }]
};

WebStyleSymbol (3D icons from gallery)

WebStyleSymbol（图库中的3D图标）

javascript

const symbol = {
  type: "web-style",
  name: "Pushpin 1",
  styleName: "Esri2DPointSymbolsStyle"
};

javascript

const symbol = {
  type: "web-style",
  name: "Pushpin 1",
  styleName: "Esri2DPointSymbolsStyle"
};

MeshSymbol3D (for SceneLayer)

MeshSymbol3D（用于SceneLayer）

javascript

const symbol = {
  type: "mesh-3d",
  symbolLayers: [{
    type: "fill",
    material: {
      color: [244, 247, 134]
    }
  }]
};

javascript

const symbol = {
  type: "mesh-3d",
  symbolLayers: [{
    type: "fill",
    material: {
      color: [244, 247, 134]
    }
  }]
};

LineSymbol3D

javascript

const symbol = {
  type: "line-3d",
  symbolLayers: [{
    type: "path",
    profile: "quad", // circle, quad
    material: { color: "red" },
    width: 5,
    height: 5
  }]
};

javascript

const symbol = {
  type: "line-3d",
  symbolLayers: [{
    type: "path",
    profile: "quad", // circle, quad
    material: { color: "red" },
    width: 5,
    height: 5
  }]
};

PolygonSymbol3D

javascript

const symbol = {
  type: "polygon-3d",
  symbolLayers: [{
    type: "extrude",
    material: { color: "blue" },
    size: 100 // Extrusion height
  }]
};

javascript

const symbol = {
  type: "polygon-3d",
  symbolLayers: [{
    type: "extrude",
    material: { color: "blue" },
    size: 100 // 拉伸高度
  }]
};

Visual Variables

视觉变量

Size Variable

大小变量

javascript

visualVariables: [{
  type: "size",
  field: "magnitude",
  stops: [
    { value: 1, size: 4 },
    { value: 5, size: 20 },
    { value: 10, size: 40 }
  ]
}]

javascript

visualVariables: [{
  type: "size",
  field: "magnitude",
  stops: [
    { value: 1, size: 4 },
    { value: 5, size: 20 },
    { value: 10, size: 40 }
  ]
}]

Color Variable

颜色变量

javascript

visualVariables: [{
  type: "color",
  field: "temperature",
  stops: [
    { value: 0, color: "blue" },
    { value: 50, color: "yellow" },
    { value: 100, color: "red" }
  ]
}]

javascript

visualVariables: [{
  type: "color",
  field: "temperature",
  stops: [
    { value: 0, color: "blue" },
    { value: 50, color: "yellow" },
    { value: 100, color: "red" }
  ]
}]

Opacity Variable

透明度变量

javascript

visualVariables: [{
  type: "opacity",
  field: "confidence",
  stops: [
    { value: 0, opacity: 0.1 },
    { value: 100, opacity: 1 }
  ]
}]

javascript

visualVariables: [{
  type: "opacity",
  field: "confidence",
  stops: [
    { value: 0, opacity: 0.1 },
    { value: 100, opacity: 1 }
  ]
}]

Rotation Variable

旋转变量

javascript

visualVariables: [{
  type: "rotation",
  field: "heading",
  rotationType: "geographic" // or "arithmetic"
}]

javascript

visualVariables: [{
  type: "rotation",
  field: "heading",
  rotationType: "geographic" // 或 "arithmetic"
}]

Labeling

标注

javascript

layer.labelingInfo = [{
  symbol: {
    type: "text",
    color: "white",
    font: {
      family: "Noto Sans",
      size: 10,
      weight: "bold"
    },
    haloColor: "#472b77",
    haloSize: 1
  },
  labelPlacement: "above-center", // Various placement options
  labelExpressionInfo: {
    expression: "$feature.name" // Arcade expression
  },
  where: "population > 10000", // SQL filter
  minScale: 500000,
  maxScale: 0
}];

layer.labelsVisible = true;

javascript

layer.labelingInfo = [{
  symbol: {
    type: "text",
    color: "white",
    font: {
      family: "Noto Sans",
      size: 10,
      weight: "bold"
    },
    haloColor: "#472b77",
    haloSize: 1
  },
  labelPlacement: "above-center", // 多种放置选项
  labelExpressionInfo: {
    expression: "$feature.name" // Arcade表达式
  },
  where: "population > 10000", // SQL过滤器
  minScale: 500000,
  maxScale: 0
}];

layer.labelsVisible = true;

Label Placements

标注放置位置

Points:

above-center

below-center

center-center

above-left

, etc.

Lines:
```
above-along
```
,
```
below-along
```
,
```
center-along
```
Polygons:
```
always-horizontal
```
,
```
curved-horizontal
```

点要素：

above-center

below-center

center-center

above-left

等

线要素：
```
above-along
```
,
```
below-along
```
,
```
center-along
```
面要素：
```
always-horizontal
```
,
```
curved-horizontal
```

Arcade Label Expressions

Arcade 标注表达式

javascript

labelExpressionInfo: {
  expression: `
    var pop = $feature.population;
    if (pop > 1000000) {
      return $feature.name + " (" + Round(pop/1000000, 1) + "M)";
    }
    return $feature.name;
  `
}

javascript

labelExpressionInfo: {
  expression: `
    var pop = $feature.population;
    if (pop > 1000000) {
      return $feature.name + " (" + Round(pop/1000000, 1) + "M)";
    }
    return $feature.name;
  `
}

Effects and Blend Modes

效果与混合模式

Layer Effects

图层效果

javascript

// Drop shadow
layer.effect = "drop-shadow(2px 2px 3px gray)";

// Blur
layer.effect = "blur(2px)";

// Grayscale
layer.effect = "grayscale(100%)";

// Brightness/contrast
layer.effect = "brightness(150%) contrast(120%)";

// Combined effects
layer.effect = "drop-shadow(1px, 1px, 1px, gray) brightness(120%)";

javascript

// 投影阴影
layer.effect = "drop-shadow(2px 2px 3px gray)";

// 模糊
layer.effect = "blur(2px)";

// 灰度
layer.effect = "grayscale(100%)";

// 亮度/对比度
layer.effect = "brightness(150%) contrast(120%)";

// 组合效果
layer.effect = "drop-shadow(1px, 1px, 1px, gray) brightness(120%)";

Feature Effects

要素效果

javascript

import FeatureEffect from "@arcgis/core/layers/support/FeatureEffect.js";

layerView.featureEffect = new FeatureEffect({
  filter: {
    where: "population > 100000"
  },
  includedEffect: "bloom(1, 0.5px, 0.2)",
  excludedEffect: "grayscale(100%) opacity(30%)"
});

javascript

import FeatureEffect from "@arcgis/core/layers/support/FeatureEffect.js";

layerView.featureEffect = new FeatureEffect({
  filter: {
    where: "population > 100000"
  },
  includedEffect: "bloom(1, 0.5px, 0.2)",
  excludedEffect: "grayscale(100%) opacity(30%)"
});

Blend Modes

混合模式

javascript

layer.blendMode = "multiply"; // normal, multiply, screen, overlay, darken, lighten

javascript

layer.blendMode = "multiply"; // normal, multiply, screen, overlay, darken, lighten

Smart Mapping (Auto-generated Renderers)

智能映射（自动生成渲染器）

javascript

import colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
import sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";

// Generate color renderer
const colorResponse = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  field: "population",
  view: view,
  theme: "high-to-low" // above, below, high-to-low, centered-on, extremes
});
featureLayer.renderer = colorResponse.renderer;

// Generate size renderer
const sizeResponse = await sizeRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  field: "magnitude",
  view: view
});
featureLayer.renderer = sizeResponse.renderer;

javascript

import colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
import sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";

// 生成颜色渲染器
const colorResponse = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  field: "population",
  view: view,
  theme: "high-to-low" // above, below, high-to-low, centered-on, extremes
});
featureLayer.renderer = colorResponse.renderer;

// 生成大小渲染器
const sizeResponse = await sizeRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  field: "magnitude",
  view: view
});
featureLayer.renderer = sizeResponse.renderer;

Autocasting

自动类型转换（Autocasting）

All symbol and renderer objects support autocasting - you can use plain objects instead of constructing classes.

所有符号和渲染器对象都支持自动类型转换——你可以使用普通对象代替构造类。

JavaScript

javascript

// This plain object autocasts to a SimpleRenderer with SimpleMarkerSymbol
layer.renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "red",
    size: 8
  }
};

javascript

// 这个普通对象会自动转换为带SimpleMarkerSymbol的SimpleRenderer
layer.renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "red",
    size: 8
  }
};

TypeScript (with type safety)

TypeScript（带类型安全）

typescript

// Use 'as const' to keep discriminated union types narrow
layer.renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "red",
    size: 8
  }
} as const;

// Or use 'satisfies' for explicit type checking
layer.renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "red",
    size: 8
  }
} satisfies __esri.SimpleRendererProperties;

typescript

// 使用 'as const' 来保持判别联合类型的窄化
layer.renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "red",
    size: 8
  }
} as const;

// 或使用 'satisfies' 进行显式类型检查
layer.renderer = {
  type: "simple",
  symbol: {
    type: "simple-marker",
    color: "red",
    size: 8
  }
} satisfies __esri.SimpleRendererProperties;

Explicit Classes (when you need instance methods)

显式类（当你需要实例方法时）

typescript

import SimpleRenderer from "@arcgis/core/renderers/SimpleRenderer.js";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol.js";

layer.renderer = new SimpleRenderer({
  symbol: new SimpleMarkerSymbol({
    color: "red",
    size: 8
  })
});

Tip: Use autocasting for configuration-heavy code. Use explicit classes when you need instance methods or
instanceof
checks. See arcgis-core-maps skill for detailed guidance.

typescript

import SimpleRenderer from "@arcgis/core/renderers/SimpleRenderer.js";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol.js";

layer.renderer = new SimpleRenderer({
  symbol: new SimpleMarkerSymbol({
    color: "red",
    size: 8
  })
});

提示： 对于配置密集型代码，使用自动类型转换。当你需要实例方法或
instanceof
检查时，使用显式类。有关详细指导，请参阅 arcgis-core-maps 技能。

Common Pitfalls

常见陷阱

Missing type property: Always include

type

for autocasting

javascript

// Wrong
{ color: "red" }
// Correct
{ type: "simple-marker", color: "red" }

Color formats: Colors can be hex, named, RGB array, or RGBA array

javascript

color: "red"
color: "#FF0000"
color: [255, 0, 0]
color: [255, 0, 0, 0.5] // With transparency

Visual variables require numeric fields: Ensure the field contains numbers
Label expressions are Arcade: Use Arcade syntax, not JavaScript

缺少type属性： 自动类型转换时必须始终包含

type

javascript

// 错误写法
{ color: "red" }
// 正确写法
{ type: "simple-marker", color: "red" }

颜色格式： 颜色可以是十六进制、命名色、RGB数组或RGBA数组

javascript

color: "red"
color: "#FF0000"
color: [255, 0, 0]
color: [255, 0, 0, 0.5] // 带透明度

视觉变量需要数值型字段： 确保字段包含数值
标注表达式使用Arcade语法： 使用Arcade语法，而非JavaScript