4.7 API SketchViewModel on Sceneview (Update Geometries)

TubaKumbara — Tue, 24 Apr 2018 06:37:29 GMT

Hello.

Thanks for new 4.7 API. 4.7 has very good updates.

I'm drawing some geometries on sceneview. Is this possible to update / edit geometries on sceneview. Below code working good on MapView but doesn't working on SceneView, I can't select for editing.

Thanks inadvance.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Sketch temporary geometries - 4.7</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: verdana;
}
#topbar {
background: #fff;
position: absolute;
top: 15px;
right: 15px;
padding: 10px;
}
.action-button {
font-size: 16px;
background-color: transparent;
border: 1px solid #D3D3D3;
color: #6e6e6e;
height: 32px;
width: 32px;
text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.action-button:hover,
.action-button:focus {
background: #0079c1;
color: #e4e4e4;
}
.active {
background: #0079c1;
color: #e4e4e4;
}
</style>
<script>
require([
"esri/views/SceneView",
"esri/Map",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
], function(
SceneView, Map,
SketchViewModel, Graphic, GraphicsLayer
) {
// GraphicsLayer to hold graphics created via sketch view model
var tempGraphicsLayer = new GraphicsLayer();
var updateGraphic;
// Arctic Ocean Basemap
var map = new Map({
basemap: "gray",
layers: [tempGraphicsLayer]
});
var view = new SceneView({
container: "viewDiv",
map: map,
zoom: 3
});
var pointSymbol = { // symbol used for points
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "#8A2BE2",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3 // points
}
}
var polylineSymbol = { // symbol used for polylines
type: "simple-line", // autocasts as new SimpleMarkerSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
}
var polygonSymbol = { // symbol used for polygons
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: {
color: "white",
width: 1
}
}
view.when(function() {
// create a new sketch view model
var sketchViewModel = new SketchViewModel({
view: view,
layer: tempGraphicsLayer,
pointSymbol: pointSymbol,
polylineSymbol: polylineSymbol,
polygonSymbol: polygonSymbol
});
setUpClickHandler();
// ************************************************************
// Get the completed graphic from the event and add it to view.
// This event fires when user presses
// * "C" key to finish sketching point, polygon or polyline.
// * Double-clicks to finish sketching polyline or polygon.
// * Clicks to finish sketching a point geometry.
// ***********************************************************
sketchViewModel.on("draw-complete", addGraphic);
sketchViewModel.on("update-complete", addGraphic);
sketchViewModel.on("update-cancel", addGraphic);
function addGraphic(evt) {
var geometry = evt.geometry;
var symbol;
// Choose a valid symbol based on return geometry
switch (geometry.type) {
case "point":
symbol = pointSymbol;
break;
case "polyline":
symbol = polylineSymbol;
break;
default:
symbol = polygonSymbol;
break;
}
// Create a new graphic; add it to the GraphicsLayer
var graphic = new Graphic({
geometry: geometry,
symbol: symbol
});
tempGraphicsLayer.add(graphic);
// Remove stored reference to the updated graphic
// Required in 'update-complete' callback specifically
updateGraphic= null;
}
// *************************************
// activate the sketch to create a point
// *************************************
var drawPointButton = document.getElementById("pointButton");
drawPointButton.onclick = function() {
// set the sketch to create a point geometry
sketchViewModel.create("point");
(this);
};
// ****************************************
// activate the sketch to create a polyline
// ****************************************
var drawLineButton = document.getElementById("polylineButton");
drawLineButton.onclick = function() {
// set the sketch to create a polyline geometry
sketchViewModel.create("polyline");
setActiveButton(this);
};
// ***************************************
// activate the sketch to create a polygon
// ***************************************
var drawPolygonButton = document.getElementById("polygonButton");
drawPolygonButton.onclick = function() {
// set the sketch to create a polygon geometry
sketchViewModel.create("polygon");
setActiveButton(this);
};
// ***************************************
// activate the sketch to create a rectangle
// ***************************************
var drawRectangleButton = document.getElementById(
"rectangleButton");
drawRectangleButton.onclick = function() {
// set the sketch to create a polygon geometry
sketchViewModel.create("rectangle");
setActiveButton(this);
};
// ***************************************
// activate the sketch to create a circle
// ***************************************
var drawCircleButton = document.getElementById("circleButton");
drawCircleButton.onclick = function() {
// set the sketch to create a polygon geometry
sketchViewModel.create("circle");
setActiveButton(this);
};
// **************
// reset button
// **************
document.getElementById("resetBtn").onclick = function() {
sketchViewModel.reset();
tempGraphicsLayer.removeAll();
setActiveButton();
};
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements.classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
// ************************************************************************************
// set up logic to handle geometry update and reflect the update on "tempGraphicsLayer"
// ************************************************************************************
function setUpClickHandler() {
view.on("click", function(evt) {
view.hitTest(evt).then(function(response) {
var results = response.results;
console.log(results);
console.log(results.length);

// Found a valid graphic
if (results.length && results[results.length - 1]
.graphic) {
// Check if we're already editing a graphic
if (!updateGraphic) {
// Save a reference to the graphic we intend to update
updateGraphic = results[results.length - 1].graphic;
console.log("bla");
console.log(updateGraphic);
// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
tempGraphicsLayer.remove(updateGraphic);
sketchViewModel.update(updateGraphic.geometry);
}
}
});
});
}
});
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="topbar">
<button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button"
title="Draw point"></button>
<button class="action-button esri-icon-polyline" id="polylineButton" type="button"
title="Draw polyline"></button>
<button class="action-button esri-icon-polygon" id="polygonButton" type="button"
title="Draw polygon"></button>
<button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton" type="button"
title="Draw rectangle"></button>
<button class="action-button esri-icon-radio-unchecked" id="circleButton" type="button"
title="Draw circle"></button>
<button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button>
</div>
</div>
</body>
</html>

Re: 4.7 API SketchViewModel on Sceneview (Update Geometries)

UndralBatsukh — Tue, 24 Apr 2018 15:29:54 GMT

Hi there,

SketchViewModel is not supported in 3D at this time. It is designed to be used in 2D for now.

With that said, the intersecting graphic is not being returned from SceneView.hitTest as it is pointed out in the document: Draped graphics (i.e. graphics in layers where the elevation mode is on-the-ground) are currently not returned from this method, even when they intersect the input screen point.

Hope this helps,

-Undral

Re: 4.7 API SketchViewModel on Sceneview (Update Geometries)

Rocky_ — Thu, 08 Nov 2018 20:59:56 GMT

Hi Tuba Kumbara and Undral Batsukh

Am also facing similar problem with SketchViewModel in 3D sceneView..

So my question to both of you is, still its not supported in 4.9 JavaScript API of ArcGIS.

Please let me know if know any other options to make it happen.

Thank You

Re: 4.7 API SketchViewModel on Sceneview (Update Geometries)

UndralBatsukh — Wed, 19 Dec 2018 17:51:40 GMT

Hi there,

Sketching is still not available in 3D at 4.10. But we are looking into adding sketching capabilities in 3D for future release.

topic 4.7 API SketchViewModel on Sceneview (Update Geometries) in ArcGIS JavaScript Maps SDK Questions

4.7 API SketchViewModel on Sceneview (Update Geometries)

Re: 4.7 API SketchViewModel on Sceneview (Update Geometries)

Re: 4.7 API SketchViewModel on Sceneview (Update Geometries)

Re: 4.7 API SketchViewModel on Sceneview (Update Geometries)