使用 UniqueValueRenderer 时出现问题 - 颜色未显示在 chrome 中，但会显示在 Firefox 和 Edge 中

Question

我想通过 ArcGIS Javascript API 使用 ArcGIS 的图例功能。所以我为我的 CSVLayer 使用了 UniqueValueRenderer。

CSVLayer 显示正确。但是当我使用 Google Chrome 显示时，在所有情况下都会呈现 defaultSymbol。但是当我使用 Mozilla Firefox 或 Microsoft Edge 查看它时，它工作正常。

Chrome 的屏幕截图：

火狐截图：

var renderer = new UniqueValueRenderer({
    defaultLabel: "Other files",
    field: "Category",
    defaultSymbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#ABB2B9"
            },
            outline: {
                width: 0.2,
                color: p6
            },
            size: "12px"
        }]
    }, // autocasts as new SimpleFillSymbol()
    legendOptions: {
        title: "File type"
    }
});


renderer.addUniqueValueInfo({
    label: "Drawing",
    description: "Drawing files(.dwg, .rvt etc.)",
    value: "1",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#2ECC71"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

renderer.addUniqueValueInfo({
    label: "Specter",
    description: "Specter files.",
    value: "2",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#F3AD12"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

renderer.addUniqueValueInfo({
    label: "Snapshots",
    description: "Image files (.jpg, .png, .bmp etc.)",
    value: "3",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#E74C3C"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

renderer.addUniqueValueInfo({
    label: "Documents",
    description: "Office files (.doc, .xls, .xlsx etc.)",
    value: "4",
    symbol: {
        type: "point-3d", // autocasts as new PointSymbol3D()
        symbolLayers: [{
            type: "icon", // autocasts as new IconSymbol3DLayer()
            material: {
                color: "#A569BD"
            },
            outline: {
                width: 0.8,
                color: p6
            },
            size: "12px"
        }]
    }
});

这些是我的CSVFile里的内容

Latitude,Longitude,Depth,DocumentId,FileId,DocumentNumber,DocumentCreatedByUserName,DocumentDescription,RevisionNoValue,Category,OriginalFileName
"28.963349","77.684915","0","STR##104440","105134","ENGG-DOC-DEC-004","User","Description 1","0","0",""
"28.792274","77.522666","0","STR##102182","103587","ENGG-CIV-003","User","Description 2","0","2","ENGG-CIV-003.pdf"

整个 ArcGIS 代码

require([
    "esri/Map",
    "esri/layers/CSVLayer",
    "esri/views/SceneView",
    "esri/widgets/BasemapGallery",
    "esri/widgets/Expand",
    "esri/widgets/Locate",
    "esri/widgets/Search",
    "esri/Graphic",
    "esri/PopupTemplate",
    "esri/renderers/UniqueValueRenderer",
    "esri/widgets/Legend"
], function(Map, CSVLayer, SceneView, BasemapGallery, Expand, Locate, Search, Graphic, PopupTemplate, UniqueValueRenderer, Legend) {
    // If CSV files are not on the same domain as your website, a CORS enabled server
    // or a proxy is required.
    debugger;

    var renderer = new UniqueValueRenderer({
        defaultLabel: "Other files",
        field: "Category",
        defaultSymbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon", 
                material: {
                    color: "#ABB2B9"
                },
                outline: {
                    width: 0.2,
                    color: p6
                },
                size: "12px"
            }]
        }, // autocasts as new SimpleFillSymbol()
        legendOptions: {
            title: "File type"
        }
    });

    renderer.addUniqueValueInfo({
        label: "Drawing",
        description: "Drawing files(.dwg, .rvt etc.)",
        value: "1",
        symbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon",
                material: {
                    color: "#2ECC71"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    renderer.addUniqueValueInfo({
        label: "Specter",
        description: "Specter files.",
        value: "2",
        symbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon",
                material: {
                    color: "#F3AD12"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    renderer.addUniqueValueInfo({
        label: "Snapshots",
        description: "Image files (.jpg, .png, .bmp etc.)",
        value: "3",
        symbol: {
            type: "point-3d", 
            symbolLayers: [{
                type: "icon",
                material: {
                    color: "#E74C3C"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    renderer.addUniqueValueInfo({
        label: "Documents",
        description: "Office files (.doc, .xls, .xlsx etc.)",
        value: "4",
        symbol: {
            type: "point-3d",
            symbolLayers: [{
                type: "icon", 
                material: {
                    color: "#A569BD"
                },
                outline: {
                    width: 0.8,
                    color: p6
                },
                size: "12px"
            }]
        }
    });

    var url = '<valid csv file url>';



    var template = {
        title: "Document basic info - {DocumentNumber}",
        content: "Document number: {DocumentNumber}," +
            "<br/>Description: {DocumentDescription}" +
            "<br/>Revision no: {RevisionNoValue}" +
            "<br/>File name: {OriginalFileName}" +
            "<br/>Created by: {DocumentCreatedByUserName}" +
            "<br/><br/><a href='#' onclick='ViewDocumentDetails(`{DocumentId}`)'>Click here</a> to view the document details"
    };



    var csvLayer = new CSVLayer({
        title: "Documents",
        url: url,
        copyright: "Wrench Solutions",
        popupTemplate: template,
        elevationInfo: {
            // drapes icons on the surface of the globe
            mode: "on-the-ground"
        },
        renderer: renderer
    });



    var map = new Map({
        basemap: "topo",
        ground: "world-elevation",
        layers: [csvLayer]
    });

    var view = new SceneView({
        container: "viewDiv",
        center: [138, 35],
        zoom: 4,
        map: map
    });

    var basemapGallery = new BasemapGallery({
        view: view,
        container: document.createElement("div")
    });

    var locateBtn = new Locate({
        view: view
    });

    var search = new Search({
        view: view
    });


    view.ui.add(search, "top-right");


    var bgExpand = new Expand({
        view: view,
        content: basemapGallery
    });

    view.ui.add(locateBtn, {
        position: "top-left"
    });

    view.ui.add(bgExpand, "bottom-right");

    var legendExpand = new Expand({
        view: view,
        content: new Legend({
            view: view,
            style: "card",
        })
    });

    view.ui.add(legendExpand, "bottom-left");

    $(".esri-attribution__sources").css('display', 'none');
});

我想知道这是否是整个 ArcGIS Online 的问题，因为 ArcGIS Online 中存在类似的问题。

Answer 1

Chrome 似乎与 Firefox 不同地解释 CSV 中的字段。字段 DocumentID、Category 和 RevisionNoValue 被解释为 Chrome 中的日期，这就是 UniqueValueRenderer 的值中 none 匹配的原因。

您必须选择：

通过删除数字周围的引号 (") 来修复 CSV

告诉 CSVLayer specifically what type of fields 您的 CSV 包含

var csvLayer = new CSVLayer({
  title: "Documents",
  url: url,
  copyright: "Wrench Solutions",
  popupTemplate: template,
  elevationInfo: {
    // drapes icons on the surface of the globe
    mode: "on-the-ground"
  },
  renderer: renderer,
  fields: [
    {
      alias: "__OBJECTID",
      name: "__OBJECTID",
      type: "oid"
    },{
      alias: "Latitude",
      name: "Latitude",
      type: "double"
    },

    ... 

    ,{
      alias: "Category",
      name: "Category",
      type: "integer"
    },{
      alias: "OriginalFileName",
      name: "OriginalFileName",
      type: "string"
    }
  ]
});

完整源码见以下Codepen https://codepen.io/arnofiva/pen/cba32aedd13ceec9719cbf20b485f458

使用 UniqueValueRenderer 时出现问题 - 颜色未显示在 chrome 中，但会显示在 Firefox 和 Edge 中

Issue with using UniqueValueRenderer - color not displayed in chrome but it is getting displayed in Firefox and Edge

arcgis

arcgis-js-api