arcgis-smart-mapping

ArcGIS 智能制图

使用此技能可根据数据自动生成渲染器、计算统计数据并创建智能可视化。

导入方式

直接 ESM 导入

import * as colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";
import * as sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";
import * as typeRendererCreator from "@arcgis/core/smartMapping/renderers/type.js";
import summaryStatistics from "@arcgis/core/smartMapping/statistics/summaryStatistics.js";
import histogram from "@arcgis/core/smartMapping/statistics/histogram.js";

CDN 动态导入

const colorRendererCreator = await $arcgis.import(
  "@arcgis/core/smartMapping/renderers/color.js",
);
const summaryStatistics = await $arcgis.import(
  "@arcgis/core/smartMapping/statistics/summaryStatistics.js",
);

注意： 以下示例使用直接 ESM 导入。使用 CDN 时，请将 import X from "path" 替换为 const X = await $arcgis.import("path")。

Smart Mapping 模块概览

模块	导入路径	用途
renderers/color	@arcgis/core/smartMapping/renderers/color.js	基于颜色的渲染器
renderers/size	@arcgis/core/smartMapping/renderers/size.js	基于大小的渲染器
renderers/type	@arcgis/core/smartMapping/renderers/type.js	唯一值渲染器
renderers/heatmap	@arcgis/core/smartMapping/renderers/heatmap.js	热力图渲染器
renderers/dotDensity	@arcgis/core/smartMapping/renderers/dotDensity.js	点密度渲染器
renderers/opacity	@arcgis/core/smartMapping/renderers/opacity.js	透明度渲染器
renderers/relationship	@arcgis/core/smartMapping/renderers/relationship.js	双变量渲染器
renderers/predominance	@arcgis/core/smartMapping/renderers/predominance.js	优势渲染器
renderers/pieChart	@arcgis/core/smartMapping/renderers/pieChart.js	饼图渲染器
renderers/univariateColorSize	@arcgis/core/smartMapping/renderers/univariateColorSize.js	颜色与大小组合
renderers/location	@arcgis/core/smartMapping/renderers/location.js	简单位置渲染器
statistics/classBreaks	@arcgis/core/smartMapping/statistics/classBreaks.js	分级断点值
statistics/histogram	@arcgis/core/smartMapping/statistics/histogram.js	直方图区间
statistics/summaryStatistics	@arcgis/core/smartMapping/statistics/summaryStatistics.js	最小值/最大值/平均值/标准差
statistics/uniqueValues	@arcgis/core/smartMapping/statistics/uniqueValues.js	唯一字段值
statistics/predominantCategories	@arcgis/core/smartMapping/statistics/predominantCategories.js	主导类别
statistics/heatmapStatistics	@arcgis/core/smartMapping/statistics/heatmapStatistics.js	热力图密度统计
statistics/summaryStatisticsForAge	@arcgis/core/smartMapping/statistics/summaryStatisticsForAge.js	根据日期字段计算年龄
symbology/color	@arcgis/core/smartMapping/symbology/color.js	配色方案
symbology/support/colorRamps	@arcgis/core/smartMapping/symbology/support/colorRamps.js	色带库
heuristics/sizeRange	@arcgis/core/smartMapping/heuristics/sizeRange.js	最佳大小范围
heuristics/scaleRange	@arcgis/core/smartMapping/heuristics/scaleRange.js	最佳比例尺范围
labels/clusters	@arcgis/core/smartMapping/labels/clusters.js	聚类标签
labels/bins	@arcgis/core/smartMapping/labels/bins.js	分箱标签
popup/clusters	@arcgis/core/smartMapping/popup/clusters.js	聚类弹出窗口
popup/templates	@arcgis/core/smartMapping/popup/templates.js	弹出窗口模板

渲染器创建器

颜色渲染器（连续）

根据数值创建具有颜色渐变的渲染器。

import * as colorRendererCreator from "@arcgis/core/smartMapping/renderers/color.js";

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

featureLayer.renderer = renderer;

颜色渲染器（分级）

创建具有不同颜色类别的渲染器。

const { renderer, classBreakInfos } =
  await colorRendererCreator.createClassBreaksRenderer({
    layer: featureLayer,
    view: view,
    field: "income",
    classificationMethod: "natural-breaks", // equal-interval, quantile, standard-deviation
    numClasses: 5,
    colorScheme: {
      id: "esri-orange-9",
    },
  });

featureLayer.renderer = renderer;

大小渲染器（连续）

import * as sizeRendererCreator from "@arcgis/core/smartMapping/renderers/size.js";

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

featureLayer.renderer = renderer;

大小渲染器（分级）

const { renderer } = await sizeRendererCreator.createClassBreaksRenderer({
  layer: featureLayer,
  view: view,
  field: "sales",
  classificationMethod: "quantile",
  numClasses: 4,
});

类型（唯一值）渲染器

import * as typeRendererCreator from "@arcgis/core/smartMapping/renderers/type.js";

const { renderer, uniqueValueInfos } = await typeRendererCreator.createRenderer(
  {
    layer: featureLayer,
    view: view,
    field: "landuse",
    numTypes: 10, // Maximum categories before "Other"
    sortBy: "count", // value, count
  },
);

featureLayer.renderer = renderer;

热力图渲染器

import * as heatmapRendererCreator from "@arcgis/core/smartMapping/renderers/heatmap.js";

const { renderer } = await heatmapRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field: "magnitude", // Optional: weight by field
  radius: 18,
  minDensity: 0,
  maxDensity: 0.05,
});

featureLayer.renderer = renderer;

点密度渲染器

import * as dotDensityRendererCreator from "@arcgis/core/smartMapping/renderers/dotDensity.js";

const { renderer } = await dotDensityRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  attributes: [
    { field: "dem_votes", color: "blue", label: "Democrat" },
    { field: "rep_votes", color: "red", label: "Republican" },
  ],
  dotValue: 1000,
  dotBlendingEnabled: true,
});

featureLayer.renderer = renderer;

关系渲染器

在双变量地图中显示两个变量之间的关系。

import * as relationshipRendererCreator from "@arcgis/core/smartMapping/renderers/relationship.js";

const { renderer } = await relationshipRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  field1: { field: "population" },
  field2: { field: "income" },
  numClasses: 3, // 2, 3, or 4
  focus: "HH", // HH, HL, LH, LL
});

优势类别渲染器

显示每个要素中数值最高的类别。

import * as predominanceRendererCreator from "@arcgis/core/smartMapping/renderers/predominance.js";

const { renderer } = await predominanceRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  fields: [
    { name: "dem_votes", label: "Democrat" },
    { name: "rep_votes", label: "Republican" },
    { name: "ind_votes", label: "Independent" },
  ],
  includeSizeVariable: true,
  includeOpacityVariable: true,
});

饼图渲染器

import * as pieChartRendererCreator from "@arcgis/core/smartMapping/renderers/pieChart.js";

const { renderer } = await pieChartRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  attributes: [
    { field: "asian", label: "Asian" },
    { field: "black", label: "Black" },
    { field: "white", label: "White" },
    { field: "other", label: "Other" },
  ],
  sizeOptimizationEnabled: true,
});

单变量颜色-大小渲染器

结合颜色和大小来突出显示单个变量。

import * as univariateRendererCreator from "@arcgis/core/smartMapping/renderers/univariateColorSize.js";

const { renderer } = await univariateRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population",
  theme: "above-and-below",
});

位置渲染器

基于位置的简单可视化（不使用数据驱动的样式）。

import * as locationRendererCreator from "@arcgis/core/smartMapping/renderers/location.js";

const { renderer } = await locationRendererCreator.createRenderer({
  layer: featureLayer,
  view: view,
  color: [0, 112, 255],
});

统计函数

汇总统计

import summaryStatistics from "@arcgis/core/smartMapping/statistics/summaryStatistics.js";

const result = await summaryStatistics({
  layer: featureLayer,
  field: "temperature",
});

console.log(result.avg); // Mean
console.log(result.count); // Feature count
console.log(result.max); // Maximum
console.log(result.min); // Minimum
console.log(result.stddev); // Standard deviation
console.log(result.sum); // Sum
console.log(result.variance); // Variance

分级

import classBreaks from "@arcgis/core/smartMapping/statistics/classBreaks.js";

const result = await classBreaks({
  layer: featureLayer,
  field: "population",
  classificationMethod: "natural-breaks", // equal-interval, quantile, standard-deviation
  numClasses: 5,
  normalizationField: "area", // Optional
});

console.log(result.classBreakInfos);
// [{ minValue: 0, maxValue: 1000, count: 50 }, ...]

直方图

import histogram from "@arcgis/core/smartMapping/statistics/histogram.js";

const result = await histogram({
  layer: featureLayer,
  field: "income",
  numBins: 20,
  minValue: 0,
  maxValue: 200000,
});

console.log(result.bins);
// [{ minValue: 0, maxValue: 10000, count: 150 }, ...]

唯一值

import uniqueValues from "@arcgis/core/smartMapping/statistics/uniqueValues.js";

const result = await uniqueValues({
  layer: featureLayer,
  field: "category",
});

console.log(result.uniqueValueInfos);
// [{ value: "Type A", count: 100 }, ...]

年龄汇总统计

import summaryStatisticsForAge from "@arcgis/core/smartMapping/statistics/summaryStatisticsForAge.js";

const result = await summaryStatisticsForAge({
  layer: featureLayer,
  field: "construction_date",
  unit: "years", // years, months, days, hours, minutes, seconds
});

console.log(result.avg); // Average age in years

优势类别

import predominantCategories from "@arcgis/core/smartMapping/statistics/predominantCategories.js";

const result = await predominantCategories({
  layer: featureLayer,
  fields: ["typeA_count", "typeB_count", "typeC_count"],
});

console.log(result.predominantCategoryInfos);

热力图统计

import heatmapStatistics from "@arcgis/core/smartMapping/statistics/heatmapStatistics.js";

const result = await heatmapStatistics({
  layer: featureLayer,
  view: view,
  field: "magnitude",
});

console.log(result.maxDensity);
console.log(result.minDensity);

符号系统（配色方案）

获取配色方案

import * as symbologyColor from "@arcgis/core/smartMapping/symbology/color.js";

const schemes = symbologyColor.getSchemes({
  geometryType: "polygon",
  theme: "high-to-low",
});

console.log(schemes.primaryScheme); // Best match
console.log(schemes.secondarySchemes); // Alternatives

配色方案主题

主题	说明
high-to-low	顺序（从低值到高值）
above-and-below	发散（以中心点为界）
centered-on	以特定值为中心
extremes	突出显示高值和低值

获取色带

import * as colorRamps from "@arcgis/core/smartMapping/symbology/support/colorRamps.js";

const allRamps = colorRamps.all();
const byName = colorRamps.byName("Green-Brown");

启发式方法

大小范围

import sizeRange from "@arcgis/core/smartMapping/heuristics/sizeRange.js";

const result = await sizeRange({
  layer: featureLayer,
  view: view,
  field: "population",
});

console.log(result.minSize); // Suggested minimum
console.log(result.maxSize); // Suggested maximum

比例尺范围

import scaleRange from "@arcgis/core/smartMapping/heuristics/scaleRange.js";

const result = await scaleRange({
  layer: featureLayer,
  view: view,
});

console.log(result.minScale);
console.log(result.maxScale);

聚类与分箱标签

聚类标签

import * as clusterLabels from "@arcgis/core/smartMapping/labels/clusters.js";

const { labelingInfo } = await clusterLabels.getLabelSchemes({
  layer: featureLayer,
  view: view,
});

分箱标签

import * as binLabels from "@arcgis/core/smartMapping/labels/bins.js";

const { labelingInfo } = await binLabels.getLabelSchemes({
  layer: featureLayer,
  view: view,
});

栅格智能制图

分级栅格渲染器

import * as rasterClassBreaks from "@arcgis/core/smartMapping/raster/renderers/classBreaks.js";

const { renderer } = await rasterClassBreaks.createRenderer({
  layer: imageryLayer,
  view: view,
  classificationMethod: "natural-breaks",
  numClasses: 5,
});

imageryLayer.renderer = renderer;

拉伸栅格渲染器

import * as rasterStretch from "@arcgis/core/smartMapping/raster/renderers/stretch.js";

const { renderer } = await rasterStretch.createRenderer({
  layer: imageryLayer,
  view: view,
  stretchType: "standard-deviation", // min-max, standard-deviation, histogram-equalization
  numberOfStandardDeviations: 2,
});

RGB 栅格渲染器

import * as rasterRGB from "@arcgis/core/smartMapping/raster/renderers/rgb.js";

const { renderer } = await rasterRGB.createRenderer({
  layer: imageryLayer,
  view: view,
  bandIds: [4, 3, 2], // NIR, Red, Green (false color)
});

流向渲染器

import * as rasterFlow from "@arcgis/core/smartMapping/raster/renderers/flow.js";

const { renderer } = await rasterFlow.createRenderer({
  layer: imageryLayer,
  view: view,
});

常见模式

完整的智能制图工作流

// 1. Create renderer
const { renderer } = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "population",
});

// 2. Get histogram for slider widget
const histogramResult = await histogram({
  layer: featureLayer,
  field: "population",
  numBins: 50,
});

// 3. Apply renderer
featureLayer.renderer = renderer;

// 4. Create histogram range slider
const slider = new HistogramRangeSlider({
  bins: histogramResult.bins,
  min: histogramResult.minValue,
  max: histogramResult.maxValue,
  values: [histogramResult.minValue, histogramResult.maxValue],
});

多变量可视化

// Color by one variable, size by another
const colorResult = await colorRendererCreator.createContinuousRenderer({
  layer: featureLayer,
  view: view,
  field: "income",
});

const sizeResult = await sizeRendererCreator.createVisualVariables({
  layer: featureLayer,
  view: view,
  field: "population",
});

colorResult.renderer.visualVariables.push(sizeResult.visualVariable);
featureLayer.renderer = colorResult.renderer;

仅创建视觉变量

const { visualVariable } = await colorRendererCreator.createVisualVariable({
  layer: featureLayer,
  view: view,
  field: "temperature",
  theme: "high-to-low",
});

// Add to existing renderer
renderer.visualVariables = [visualVariable];

参考示例

• visualization-sm-color - 使用颜色渲染器进行智能制图
• visualization-sm-size - 使用大小渲染器进行智能制图
• visualization-sm-types - 针对唯一值类型的智能制图
• visualization-sm-relationship - 关系智能制图
• visualization-sm-predominance - 优势类别可视化
• visualization-sm-dotdensity - 点密度智能制图
• visualization-sm-uni-colorsize - 单变量颜色-大小
• visualization-sm-multivariate - 多变量智能制图
• visualization-sm-classbreaks - 分级智能制图
• visualization-histogram-color - 由直方图驱动的颜色可视化

常见问题

1. 需要视图：大多数智能制图函数都需要 view 参数来进行依赖比例尺的计算。

   // Anti-pattern: missing view
   const { renderer } = await colorRendererCreator.createContinuousRenderer({
     layer: featureLayer,
     field: "population",
   });
   

   // Correct: include view
   const { renderer } = await colorRendererCreator.createContinuousRenderer({
     layer: featureLayer,
     view: view,
     field: "population",
   });
   

2. 异步操作：所有智能制图函数都会返回 promise。请务必对结果使用 await。

3. 字段类型不匹配：连续颜色/大小渲染器需要数值字段。类型/唯一值渲染器需要字符串/编码值字段。

4. 图层必须已加载：图层需要已加载，并且包含指定字段。

   await featureLayer.load();
   const { renderer } = await colorRendererCreator.createContinuousRenderer({...});
   

5. 配色方案与几何类型：配色方案特定于几何类型。

   const schemes = symbologyColor.getSchemes({
     geometryType: featureLayer.geometryType, // point, polyline, polygon
     theme: "high-to-low",
   });
   

相关技能

• arcgis-visualization - 手动配置渲染器和符号
• arcgis-feature-effects - 视觉效果和过滤器
• arcgis-layers - 图层类型和配置
• arcgis-core-maps - 地图和视图设置