save polygon via angular 6 to api

MdSamsuzzoha — Sat, 04 Aug 2018 07:06:31 GMT

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);

}

topic save polygon via angular 6 to api in ArcGIS JavaScript Maps SDK Questions

save polygon via angular 6 to api