Hello, I'm using "FreehandPolygon" in this example:
http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=graphics_add
when I draw a polygon coordinates recovery and keep in a textarea tag and then save them in the database, but I can not draw the polygon on the map with these coordinates.
I have 2 actions:
1) "add Graph demo" Dynamically adds a polygon on the map OK.
2) "add Graph", steps:
the user clicks on the "Draw Zone" button and can draw the polygon on the map, when it ends I keep drawing the coordinates in the textarea tag.
I can click "Delete Zone" and then "add Graph" to show the polygon on the map but does nothing.
my code:
<div class="form-group ">
<div id="info">
<button style="display:;" type="button" class="tool btn btn-primary pull-left" id="FreehandPolygon">Draw Zone</button>
</div>
&n
<button style="display:;" type="button" class="btn btn-danger pull-left" id="clearGraphics">Delete Zone</button>
<button style="display:;" type="button" class="btn btn-info pull-left" id="addGraphics">add Graph</button>
<button style="display:;" type="button" class="btn btn-success pull-left" id="addGraphicsDemo">add Graph demo</button>
</div>
<textarea id="load_zona"></textarea>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
var map, tb;
require([
"esri/map",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/Color",
"dojo/dom",
"dojo/on",
"esri/geometry/webMercatorUtils",
"esri/geometry/Point",
"esri/SpatialReference",
"dojo/domReady!"
], function(
Map,
Draw,
SimpleMarkerSymbol,
SimpleLineSymbol,
PictureFillSymbol,
CartographicLineSymbol,
Graphic,
Color,
dom,
on,
webMercatorUtils,
Point,
SpatialReference
) {
map = new Map("mapDiv", {
center: [-58.791635351999616, -34.60544583699959], // lon, lat OK CENTER MAP
zoom: 5,
basemap: "gray"
});
map.on("load", initToolbar);
//Setup button click handlers
on(dom.byId("clearGraphics"), "click", function(){
if(map){
map.graphics.clear();
}
});
on(dom.byId("addGraphics"), "click", loadGraphic);
on(dom.byId("addGraphicsDemo"), "click", loadGraphicDemo);
// markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));
// lineSymbol used for freehand polyline, polyline and line.
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 10,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5
);
// fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
// the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
var fillSymbol = new PictureFillSymbol(
"http://optimocamino.dev/images/IsoLogo.png",
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
),
42,
42
);
/*
* FUNCTIONS
*/
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
// event delegation so a click handler is not
// needed for each individual button
on(dom.byId("info"), "click", function(evt) {
if ( evt.target.id === "info" ) {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
$("#clearGraphics").click();//elimino los graficos cargados previamente, solo se permite un grafico.
});
}
function addGraphic(evt) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.enableMapNavigation();
// figure out which symbol to use
var symbol;
console.log("evt.geometry.type:::"+evt.geometry.type)
console.log(evt.geometry.rings)
/*
* save coordenadas
*/
console.log("save coordenadas");
var myJsonString = JSON.stringify(evt.geometry.rings);
var rings = evt.geometry.rings[0];
strSrings = "[[";
auxArray = [];
for(var i =0;i<rings.length;i++){
console.log(rings);
/*
* option A: save X and Y from evt.geometry.rings
*/
y = rings[0];
x = rings[1];
auxArray.push("["+y+","+x+"]");
/*
* option B: paser X and Y with geographicToWebMercator
*/
// var mapPnt = new Point(y,x, new SpatialReference({wkid:4326}));
// pnt = webMercatorUtils.geographicToWebMercator(mapPnt);
// _y = pnt.y;
// _x = pnt.x;
// auxArray.push("["+_y+","+_x+"]");
}
strSrings += auxArray.join(",");
strSrings += "]]";
$("#load_zona").html(strSrings);
// $("#load_zona_rings").html(evt.geometry.rings);
console.log("end save coordenadas")
if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;//USA ESTE SYMBOL
} else {
symbol = fillSymbol;
}
map.graphics.add(new Graphic(evt.geometry, symbol));
}
function loadGraphic() {
tb.deactivate();
map.enableMapNavigation();
//array con coordenadas
load_zona = $("#load_zona").html();
parsedTest = JSON.parse(load_zona);
console.log(load_zona);
console.log(parsedTest);
//create poligon
var myPolygon = {
"geometry":{
"rings":parsedTest
//
,
"spatialReference":{"wkid":4326}
},
"symbol":
{
"color":[0,0,0,64],
"outline":{
"color":[0,0,0,255],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"
},
"type":"esriSFS",
"style":"esriSFSSolid"
}
};
//deactivate the toolbar and clear existing graphics
symbol = lineSymbol;
var gra = new Graphic(myPolygon, symbol);
map.graphics.add(gra);
}
function loadGraphicDemo() {
tb.deactivate();
map.enableMapNavigation();
parsedJson = [
[
[-115.3125,37.96875],[-111.4453125,37.96875],[-99.84375,36.2109375],[-99.84375,23.90625],[-116.015625,24.609375],[-115.3125,37.96875]
]
];
//create poligon
var myPolygon = {
"geometry":{
"rings":parsedJson,
"spatialReference":{"wkid":4326}
},
"symbol":
{
"color":[0,0,0,64],
"outline":{
"color":[0,0,0,255],
"width":1,
"type":"esriSLS",
"style":"esriSLSSolid"
},
"type":"esriSFS",
"style":"esriSFSSolid"
}
};
//deactivate the toolbar and clear existing graphics
symbol = lineSymbol;
var gra = new Graphic(myPolygon, symbol);
map.graphics.add(gra);
}
});
symbol = lineSymbol;
var gra = new Graphic(myPolygon, symbol);
map.graphics.add(gra);
}
});
</script>
which are the correct coordinates I should keep?