Hello -
I've been working with the SketchViewModel sandbox the last few days and I've gotten most of it working in my own app but I've run into one thing that I haven't been able to figure out. The code I am using is directly pulled from the sandbox example but for thoroughness it is at the bottom of this post. Everything works until the shape should be drawn on the map but it seems none of the events are being fired. As you can see I have tried to print out some simple messages to the console to make sure that the events are being called and they do not appear. To even further test that it is the events not being fired I created some more functions to print out messages when they are fired and still nothing. Any help would be great and thank you for taking a look.
edit: I missed adding in some of the other functions that are supposed to be called. They are now below the other code.
this.sketchView = new SketchViewModel( {
view: this.view,
layer: tempGraphicsLayer,
type: "simple-fill",
pointSymbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "#8A2BE2",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3
}
},
polylineSymbol: {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
},
polygonSymbol: { // used for symbolizing polygons
type: "simple-fill",
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: {
color: "white",
width: 1
}
}
} );
setUpClickHandler();
// Listen to create-complete event to add a newly created graphic to view
this.sketchView.on( "create-complete", function(event) {
console.log('complete called');
} );
// Listen the sketchViewModel's update-complete and update-cancel events
this.sketchView.on( "update-complete", updateGraphic );
this.sketchView.on( "update-cancel", updateGraphic );
this.sketchView.on( "click", function(event) {
console.log('click');
});
this.sketchView.on( "create", function(event) {
console.log('create');
});
this.sketchView.on( "create-init", function(event) {
console.log('create-init');
});
//*************************************************************
// called when sketchViewModel's create-complete event is fired.
//*************************************************************
function addGraphic( event ) {
console.log('creating graphic');
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic( {
geometry: event.geometry,
symbol: this.sketchView.graphic.symbol
} );
tempGraphicsLayer.graphics.add( graphic );
}
//***************************************************************
// called when sketchViewModel's update-complete or update-cancel
// events are fired.
//*************************************************************
function updateGraphic( event ) {
// event.graphic is the graphic that user clicked on and its geometry
// has not been changed. Update its geometry and add it to the layer
event.graphic.geometry = event.geometry;
tempGraphicsLayer.graphics.add( event.graphic );
// set the editGraphic to null update is complete or cancelled.
this.editGraphic = null;
}
// ************************************************************************************
// set up logic to handle geometry update and reflect the update on "tempGraphicsLayer"
// ************************************************************************************
function setUpClickHandler() {
this.view.on( "click", function( event ) {
this.view.hitTest( event ).then( function( response ) {
console.log('response');
console.log(response);
var results = response.results;
// Found a valid graphic
if ( results.length && results[results.length - 1]
.graphic ) {
// Check if we're already editing a graphic
if ( !this.editGraphic ) {
// Save a reference to the graphic we intend to update
this.editGraphic = results[results.length - 1].graphic;
// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
tempGraphicsLayer.graphics.remove( this.editGraphic );
this.sketchView.update( this.editGraphic );
}
}
} );
}
.png "JonathanUihlein"){kind=avatar}
