Community

save polygon via angular 6 to api

1029
0
08-04-2018 12:06 AM
MdSamsuzzoha
by
New Contributor
‎08-04-2018 12:06 AM

i am trying to pass the 

event.geometry

value to outside of the api function to send the value via http and store it to the backend

my code looks like,

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { loadModules } from 'esri-loader';

@Component({
selector: 'app-esri-map',
templateUrl: './esri-map.component.html',
styleUrls: ['./esri-map.component.css']
})
export class EsriMapComponent implements OnInit {

public drawPointTest;
public name = 'hello';
public testdrawPointTest;
// this is needed to be able to create the MapView at the DOM element in this component
@ViewChild('mapViewNode') private mapViewEl: ElementRef;

constructor() { }

ngOnInit() {
loadModules([
'esri/Map',
'esri/views/MapView',
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer"
])
.then(([EsriMap, EsriMapView, SketchViewModel, Graphic, GraphicsLayer]) => {
let editGraphic;
// GraphicsLayer to hold graphics created via sketch view model
const tempGraphicsLayer = new GraphicsLayer();
const map = new EsriMap({
basemap: 'gray',
layers: [tempGraphicsLayer]
});

const mapView = new EsriMapView({
container: this.mapViewEl.nativeElement,
center: [90.399452, 23.777176],
zoom: 10,
map: map
});
mapView.when(function () {
// create a new sketch view model
const sketchViewModel = new SketchViewModel({
view: mapView,
layer: tempGraphicsLayer,
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: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
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
sketchViewModel.on("create-complete", addGraphic);

// Listen the sketchViewModel's update-complete and update-cancel events
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);

//*************************************************************
// called when sketchViewModel's create-complete event is fired.
//*************************************************************
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol
});
alert(JSON.stringify(event.geometry));
this.drawPointTest = event.geometry;
console.log(this.drawPointTest);
console.log(this.drawPointTest.spatialReference.latestWkid);
this.testdrawPointTest = this.drawPointTest.spatialReference.latestWkid;
// this.sendDrawPont(event.geometry);
this.sendDrawPont();
tempGraphicsLayer.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.add(event.graphic);

// set the editGraphic to null update is complete or cancelled.
editGraphic = null;
}

// ************************************************************************************
// set up logic to handle geometry update and reflect the update on "tempGraphicsLayer"
// ************************************************************************************
function setUpClickHandler() {
mapView.on("click", function (event) {
mapView.hitTest(event).then(function (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 (!editGraphic) {
// Save a reference to the graphic we intend to update
editGraphic = results[results.length - 1].graphic;
// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
tempGraphicsLayer.remove(editGraphic);
sketchViewModel.update(editGraphic);
}
}
});
});
}

//*************************************
// 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");
setActiveButton(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(this);
};

function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
mapView.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
});
})
.catch(err => {
console.error(err);
});
}
sendDrawPont() {
alert(this.testdrawPointTest);
}
}
0 Kudos
0 Replies