JavaScript API中BlendRenderer按年龄与人口规模渲染无符号问题求助

核心错误点 #

• 字段映射缺少数值范围配置：BlendRenderer的fields数组中每个字段条目必须明确指定minValue和maxValue，用来完成年龄占比到颜色不透明度的映射，你仅在注释中标注了各字段的数值范围，但未写入实际配置，API无法计算渲染参数，直接导致无效果输出。
• 符号类型与图层几何类型不匹配：你使用的人口普查区块要素服务为面类型图层，但给BlendRenderer配置的是SimpleMarkerSymbol点符号，面图层无法直接渲染点符号。
• 视觉变量与符号类型不兼容：sizeInfo类型的视觉变量仅对点符号、线符号生效，面符号不存在大小属性，如果要实现符号大小随总人口变化的需求，需要先将面图层转换为质心点图层再做渲染。

可运行修复代码（面渲染版本） #

该版本实现了面区块的年龄结构颜色混合效果，如需点符号大小效果，可将原面图层替换为质心点图层，再换回SimpleMarkerSymbol并保留sizeInfo配置即可：

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.38/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/css/esri.css">
  <style>
    html, body, #map {
      height: 100%;
      margin: 0;
    }

    #meta {
      position: absolute;
      left: 20px;
      bottom: 20px;
      width: 20em;
      height: 19em;
      z-index: 40;
      background: #ffffff;
      color: #777777;
      padding: 5px;
      border: 2px solid #666666;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      font-family: arial;
      font-size: 0.9em;
    }

    #meta h3 {
      color: #666666;
      font-size: 1.1em;
      padding: 0px;
      margin: 0px;
      display: inline-block;
    }
  </style>
  <script src="https://js.arcgis.com/3.38/"></script>
  <script>
    require([
      "dojo/_base/array", "esri/Color", "esri/dijit/PopupTemplate", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer",
      "esri/map", "esri/renderers/BlendRenderer", "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol", "dojo/domReady!"
    ], function (array, Color, PopupTemplate, ArcGISTiledMapServiceLayer, FeatureLayer, Map, BlendRenderer, SimpleFillSymbol, SimpleLineSymbol,
      SimpleMarkerSymbol){

      map = new Map("map", {
        basemap: "gray-vector",
        center: [-95.28, 38.959],
        zoom: 12
      });

      var layerUrl = "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Lawrence_KS_Demographic_Info/FeatureServer/0";

      // 修复：新增每个字段的minValue、maxValue，符号改为面符号
      var blendRendererOptions = {
        symbol: new SimpleFillSymbol().setOutline(new SimpleLineSymbol().setWidth(1).setColor(new Color([200,200,200]))),
        fields: [
          {
            field: "TotalPop2015_above30",
            color: new Color("#0000e6"),
            minValue: 0.26,
            maxValue: 0.65
          }, {
            field: "POP2015_20to30",
            color: new Color("#e60000"),
            minValue: 0.1,
            maxValue: 0.44
          }, {
            field: "PopUnder18_2015",
            color: new Color("#00e600"),
            minValue: 0.11,
            maxValue: 0.3
          }
        ],
        normalizationField: "TOTPOP_CY"
      };
      renderer = new BlendRenderer(blendRendererOptions);
     
      var template = new PopupTemplate({
        "fieldInfos": [
          {
            "fieldName": "POP2015_20to30",
            "label": "20-29岁人口",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }, {
            "fieldName": "TotalPop2015_above30",
            "label": "30岁及以上人口",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }, {
            "fieldName": "PopUnder18_2015",
            "label": "19岁及以下人口",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }, {
            "fieldName": "TOTPOP_CY",
            "label": "总人口",
            "visible": true,
            "format": {
              "places": 0,
              "digitSeparator": true
            }
          }
        ]
      });

      layer = new FeatureLayer(layerUrl, {
        outFields: ["TOTPOP_CY", "PopUnder18_2015", "TotalPop2015_above30", "POP2015_20to30"],
        opacity: 1,
        infoTemplate: template
      });

      layer.setRenderer(renderer);
      map.addLayer(layer);

    });
     </script>
  </head>
  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
         <div id="meta">
            <br> 每个区块的颜色混合对应年龄结构占比：
            <ul>
               <li>红色：20-29岁</li>
               <li>蓝色：30岁及以上</li>
               <li>绿色：19岁以下</li>
            </ul>
            颜色不透明度越高，对应年龄组的集中度越高。
         </div>
      </div>
    </div>
  </body>
</html>

点符号大小效果实现说明 #

如果需要实现符号大小随总人口变化的效果，先将原面图层通过ArcGIS桌面端或在线工具生成质心点图层，再将BlendRenderer的symbol改回SimpleMarkerSymbol，重新添加sizeInfo视觉变量即可正常渲染。

内容的提问来源于stack exchange，提问作者user17165498