Drawing a rectangle on a Map

WwLl — Wed, 13 Mar 2019 15:58:24 GMT

Im am trying to draw a rectangle, i got a button for it. But it still doesnt draw.

I used:

https://developers.arcgis.com/javascript/latest/api-reference/esri-views-2d-draw-SegmentDrawAction.html

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=draw-line

Can someone tell me what i do wrong???

Thanks !

<!DOCTYPE html>

<head>

require([

"esri/Map", //Class: läd code um die Karte zu erstellen

"esri/views/MapView", //Class: läd code um die Karte anzuzeigen

"dojo/dom",

"esri/layers/TileLayer",

"esri/core/urlUtils",

"esri/widgets/Search",

"dojo/io-query",

"esri/views/2d/draw/SegmentDrawAction",

"esri/Graphic",

"esri/views/2d/draw/Draw"

//in der selben Reihenfolge wie oben!!!

function (Map, MapView, dom, TileLayer, urlUtils,

Search, ioQuery, SegmentDrawAction, Graphic, Draw) {

//-----Holt Parameter aus URL----------------------------------------------------------------------

var uri = window.location.toString();

var query = uri.substring(uri.indexOf("?") + 1, uri.length);

var queryObject = ioQuery.queryToObject(query);

//-----Holt Parameter aus URL----------------------------------------------------------------------

//-----Map-----------------------------------------------------------------------------------------

urlUtils.addProxyRule({ //Zugriff beschaffen

urlPrefix: "...",

proxyUrl: "..."

});

var bibiBasemap = new TileLayer({

url: "...",

id: "bibibase",

visible: true

});

var bibiPunkte = new TileLayer({

url: "...",

id: "bibiPunkte",

visible: true

});

var map = new Map({

layers: [bibiBasemap, bibiPunkte] //Reihenfolge!!!!!

});

var view = new MapView({

container: "viewDiv", //beinhaltet die Karte damit man es sehen kann

map: map

});

//-----Map------------------------------------------------------------------------------------------

//-----Rectangle-Button-----------------------------------------------------------------------------

view.ui.add("rectangle-button", "top-right");

//-----Rectangle-Button-----------------------------------------------------------------------------

//-----Search---------------------------------------------------------------------------------------

(...)

//-----Search--------------------------------------------------------------------------------------

//-----LiveKoordinaten-----------------------------------------------------------------------------

(...)

//-----LiveKoordinaten-----------------------------------------------------------------------------

//-----Popup Fenster-------------------------------------------------------------------------------

(...)

//-----Rectangle-Draw---------------------------------------------------------------------------

document.getElementById("rectangle-button").onclick = function () {

view.graphics.removeAll();

var action = draw.create("rectangle",{mode: "click"});

function createGraphic(event){

var vertices = event.vertices;

view.graphics.removeAll();

var graphic = new Graphic({

geometry: {

type: "rectangle",

paths: vertices,

spatialReference: bibiBasemap.spatialReference

symbol: {

type: "simple-line",

color: [255, 0, 0],

width: 6,

cap: "round",

join: "round"

}

});

view.graphics.add(graphic)

}

};

//-----Rectangle-Draw---------------------------------------------------------------------------

});

//-----Popup-Fenster---------------------------------------------------------------------------------

});

</script>

<style>

html,

body {

width: 100%;

height: 100%;

}

#viewDiv {

width: 600px;

height: 600px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Re: Drawing a rectangle on a Map

KenBuja — Sat, 11 Dec 2021 07:41:36 GMT

Where did you instantiate the new Draw?

const draw = new Draw({
  view: view
});
‍‍‍‍

topic Drawing a rectangle on a Map in ArcGIS JavaScript Maps SDK Questions

Drawing a rectangle on a Map

Re: Drawing a rectangle on a Map