Drawing a rectangle on a Map
1345
1
03-13-2019 08:58 AM
by
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/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>
