Drawing a rectangle on a Map

559
1
03-13-2019 08:58 AM
WwLl
by
New Contributor II

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.h...

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>
<meta name="viewport" content="initial-scale = 1, maximum-scale = 1, user-scalable = no">
<title>map</title>

<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
<link rel="stylesheet" href="SketchWidget.css">

<script> //Hier die API Classes
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 id="viewDiv"></div>
<span id="info" style="position:absolute; top:750px; color:#000; z-index:50;"></span>
<Button onClick="window.close();">OK</Button>

<div id="rectangle-button" class="esri-widget esri-widget--button esri-interactive">
<span class="esri-icon-sketch-rectangle"></span>
</div>

</body>

</html>
0 Kudos
1 Reply
KenBuja
MVP Honored Contributor

Where did you instantiate the new Draw?

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