ArcGIS JavaScript中PieChartRenderer渲染失败的解决办法

DevOps 小满

2026-6-20

修复ArcGIS PieChartRenderer渲染问题

错误原因

FeatureLayer的renderer属性不支持PieChartRenderer，该渲染器属于ArcGIS API中的**可视化图层（VisualizationLayer）**专属配置，FeatureLayer仅支持报错信息中列出的渲染器类型（如SimpleRenderer、UniqueValueRenderer等）。

修复步骤

导入VisualizationLayer类
将原FeatureLayer作为VisualizationLayer的数据源（source属性）
将PieChartRenderer配置到VisualizationLayer的renderer属性上

修改后的完整代码

import { setDefaultOptions, loadModules } from "esri-loader";
import PieChartRenderer from "@arcgis/core/renderers/PieChartRenderer.js";
import VisualizationLayer from "@arcgis/core/layers/VisualizationLayer.js";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";

const buurtenFeatureLayer = new FeatureLayer({
  id: "buurten_2023_v1_age",
  url: "https://services.arcgis.com/zmBQLV64TsFvEpV0/arcgis/rest/services/buurten_2023_v1_age/FeatureServer",
  spatialReference: { wkid: 28992 },
  hasZ: false,
  outFields: ["BU_NAAM", "P_00_14_JR", "P_15_24_JR"],
});

const pieChartLayer = new VisualizationLayer({
  source: buurtenFeatureLayer,
  renderer: new PieChartRenderer({
    size: 10,
    attributes: [
      {
        color: [255, 69, 0, 0.4],
        label: "Perc 0-14",
        field: "P_00_14_JR",
      },
      {
        color: [255, 69, 255, 0.4],
        label: "Perc 15-24",
        field: "P_15_24_JR",
      },
    ],
    outline: {
      width: 1.5,
      color: "white",
    },
  }),
});

// 之后将pieChartLayer添加到地图中即可
// map.add(pieChartLayer);