<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Legend widget - 4.14</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<script src="https://js.arcgis.com/4.14/"></script>
<script>
require([
"esri/Map",
"esri/WebScene",
"esri/views/SceneView",
"esri/Camera",
"esri/layers/FeatureLayer",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/ExtrudeSymbol3DLayer",
"esri/geometry/geometryEngine",
"esri/widgets/Slider",
"esri/widgets/Legend",
"esri/widgets/Expand",
"esri/views/ui/DefaultUI"
], function(
Map,
WebScene,
SceneView,
Camera,
FeatureLayer,
UniqueValueRenderer,
ExtrudeSymbol3DLayer,
geometryEngine,
Slider,
Legend,
Expand,
DefaultUI
) {
var map = new Map({
basemap: "topo-vector"
});
const view = new SceneView({
map: map,
zoom: 16.5,
center: [103.809, 1.279],
container: "viewDiv",
qualityProfile: "high",
environment: {
lighting: {
directShadowsEnabled: true,
ambientOcclusionEnabled: true
},
atmosphere: {
quality: "high"
}
}
});
var SolarPanelRenderer = {
type: "simple", // autocasts as new UniqueValueRenderer()
symbol: {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [
{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
size: 1,
// autocasts as new ExtrudeSymbol3DLayer()
material: {
color: "#F0F8FF",
profile:"round"
},
edges:{
type: "solid",
color: "#000000",
}
}
]
}
};
const SolarPanelLayer = new FeatureLayer({
url:
"https://services6.arcgis.com/drFaxsYR91JoOHAb/arcgis/rest/services/SolarPanel/FeatureServer/0",
elevationInfo: {
mode: "relative-to-ground",
offset: 10
},
title: "SolarPanel",
outFields: ["*"],
renderer:SolarPanelRenderer,
//popupTemplate:template_SolarPanel
});
map.add(SolarPanelLayer);
view.when(function() {
// get the first layer in the collection of operational layers in the WebMap
// when the resources in the MapView have loaded.
var featureLayer = map.layers.getItemAt(0);
var legend = new Legend({
view: view,
layerInfos: [
{
layer: FeatureLayer,
title: "Legend"
}
]
});
// Add widget to the bottom right corner of the view
view.ui.add(legend, "bottom-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="Legend"></div>
</body>
</html>
