Я хочу использовать функцию Легенды для ArcGIS, используя ArcGIS Javascript API. Поэтому я использовал UniqueValueRenderer для моего CSVLayer.
CSVLayer отображается правильно. Но когда я отображаю с помощью Google Chrome, defaultSymbol отображается во всех случаях. Но когда я просматриваю его с помощью Mozilla Firefox или Microsoft Edge, он работает нормально.
Снимок экрана Chrome: 
Снимок экрана Firefox: 
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.