polygon-3d extrude showing filled outline edges
1471
8
09-28-2020 10:42 AM
by
I'm trying to show a polygon result of a watershed using a webscene (AGS JS API 4.x and (polygon-3d and extrude feature). What I can't figure out, is there is a way to symbolize the feature to show filled edges and a transparent fill for the main polygon? Basically, i just want the outline of the polygon to be extruded and filled.
by
by
by
RickeyFight
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>
Floating polygon to see about only doing outline and not fill
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GraphicsLayer",
"esri/Graphic"
], function (Map, SceneView, GraphicsLayer, Graphic) {
var map = new Map({
basemap: "hybrid"
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
// autocasts as new Camera()
position: {
// autocasts as new Point()
x: -0.17746710975334712,
y: 51.44543992422466,
z: 1266.7049653716385
},
heading: 0.34445102566290225,
tilt: 82.95536300536367
}
});
/*********************
* Add graphics layer
*********************/
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
/***************************
* Add a 3D polygon graphic
***************************/
var polygon = {
type: "polygon", // autocasts as new Polygon()
rings: [
[-0.184, 51.48391],
[-0.184, 51.49091],
[-0.172, 51.49091],
[-0.172, 51.48391],
[-0.184, 51.48391]
]
};
var threeDfillSymbol2 = {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [
{
type: "extrude",
size: 800,
// autocasts as new ExtrudeSymbol3DLayer()
material: {
color: [67, 145, 244, 0.5] // orange
},
edges: {
// add edges of type solid
type: "solid",
color: "#AF6515" // dark orange
}
}
]};
var polygonGraphic = new Graphic({
geometry: polygon,
symbol: threeDfillSymbol2
});
graphicsLayer.add(polygonGraphic);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
by
by
