ArcGIS GraphicsLayer图例无法显示问题求助及代码排查

原因分析 #

ArcGIS API for JavaScript的Legend组件无法为GraphicsLayer自动生成图例，核心原因是你当前的实现是给每个Graphic单独设置符号，而非为整个图层配置统一的Renderer（渲染器）。Legend组件依赖图层的Renderer来识别需要展示的图例项，没有Renderer的情况下，它无法从零散的Graphic符号中提取图例信息，因此显示“No legend”。

修复方案 #

给GraphicsLayer添加UniqueValueRenderer（或ClassBreaksRenderer），将两种符号与对应的类别绑定，让Legend能识别并展示图例项。

修改后的代码示例 #

async function conversionFunction() {
    try {
        for (i = 0; i < obj.length; i++) {
            var lati = obj[i].Latitude;
            var longi = obj[i].Longitude;
            var schoolCode = obj[i].Departmentcode;
            var pointxy = await xyConversion(longi, lati);
            var newData = {
                Latitude: pointxy.pnt_lat,
                Longitude: pointxy.pnt_lon,
                schoolCode: schoolCode,
                // 添加用于分类的属性
                codeType: schoolCode.length == 11 ? "Preschool" : "Regular"
            }
            dataArr.push(newData)
        }
        console.log(dataArr)
        schLayer = new GraphicsLayer({ id: 'SchoolsLayer' });

        // 创建UniqueValueRenderer，基于codeType属性分类
        const renderer = new UniqueValueRenderer({
            field: "codeType",
            uniqueValueInfos: [
                {
                    value: "Preschool",
                    symbol: markerPresSymbol,
                    label: "Preschool"
                },
                {
                    value: "Regular",
                    symbol: markerPropSymbol,
                    label: "Regular School"
                }
            ]
        });
        // 给图层设置渲染器
        schLayer.setRenderer(renderer);

        for (var i = 0; i < dataArr.length; i++) {
            var tmplteJson = { title: "Details", content: `Department code : ${dataArr[i].schoolCode} ` };
            var poly_point1 = new esri.geometry.Point([dataArr[i].Longitude, dataArr[i].Latitude], new esri.SpatialReference({ wkid: 4326 }));
            // 不再给单个Graphic设置符号，由图层Renderer自动匹配
            var pointgraphic = new Graphic(poly_point1, null, {
                schoolCode: dataArr[i].schoolCode,
                codeType: dataArr[i].codeType
            });
            pointgraphic.setInfoTemplate(new InfoTemplate(tmplteJson));
            schLayer.add(pointgraphic);
        }

        var legend = new Legend({
            map: map,
            layerInfos: [{ layer: schLayer, title: "Schools" }]
        }, "legendDivD");
        
        map.addLayer(schLayer);
        legend.startup();
        
        $("#loading1").css('display', 'none');
    } catch (error) {
        console.error(error);
    }
}

关键修改点 #

• 给每个Graphic添加codeType属性，作为分类依据
• 创建UniqueValueRenderer，将两种符号与对应的codeType值绑定，并设置图例显示的标签
• 移除单个Graphic的符号赋值，由图层的Renderer自动根据codeType匹配符号
• 调整Legend的layerInfos，给图层设置合适的标题（可选）

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