<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Maps Toolbar</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/nihilo/nihilo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<style>
html, body, #mainWindow {
font-family: sans-serif;
height: 100%;
width: 100%;
}
html, body {
margin: 0;
padding: 0;
}
#header {
height: 80px;
overflow: auto;
padding: 0.5em;
}
</style>
<script src="http://js.arcgis.com/3.12/"></script>
<script>
var map, toolbar, symbol, geomTask;
var _public = {};
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters",
"esri/toolbars/draw",
"esri/graphic",
"esri/geometry/Polygon",
"esri/tasks/QueryTask",
"esri/tasks/query",
"esri/tasks/FeatureSet",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/parser", "dijit/registry",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
], function(
Map,
ArcGISDynamicMapServiceLayer,
ImageParameters,
Draw,
Graphic,
Polygon,
QueryTask,
Query,
FeatureSet,
Point,
SpatialReference,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
parser,
registry
) {
parser.parse();
map = new Map("map", {
sliderOrientation : "horizontal"
});
var imageParameters = new ImageParameters();
imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://192.168.100.72:6080/arcgis/rest/services/ksa_bounaries_wfs/MapServer", {
"opacity" : 0.5,
"imageParameters" : imageParameters
});
map.addLayer(dynamicMapServiceLayer);
map.on("load", createToolbar);
// loop through all dijits, connect onClick event
// listeners for buttons to activate drawing tools
registry.forEach(function(d) {
// d is a reference to a dijit
// could be a layout container or a button
if ( d.declaredClass === "dijit.form.Button" ) {
d.on("click", activateTool);
}
});
function activateTool() {
var tool = this.label.toUpperCase().replace(/ /g, "_");
toolbar.activate(Draw[tool]);
map.hideZoomSlider();
}
function createToolbar(themap) {
toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
/* function KabTest(evt){
alert ("jjjjj");
}*/
var _kabqueryInside;
var featureSet = new FeatureSet();
function addToMap(evt) {
_public._kabevt= evt;
alert ("here i am in 1");
var symbol;
toolbar.deactivate();
map.showZoomSlider();
switch (evt.geometry.type) {
case "point":
case "multipoint":
symbol = new SimpleMarkerSymbol();
break;
case "polyline":
alert ("this is free hand polyline");
symbol = new SimpleLineSymbol();
break;
default:
symbol = new SimpleFillSymbol();
break;
}
var graphic = new Graphic(evt.geometry, symbol);
_public._kabgraphic=graphic;
alert ("here i am in graphic adding");
map.graphics.add(graphic);
_public._kabgraphic=graphic;
var stateExtent = evt.geometry.getExtent().expand(1.0);
//this code is for search by polygon
_public._kabstateExtent=stateExtent;
map.setExtent(stateExtent);
//constructing Polygon
// var _kabpolygon = ([[xmin=stateExtent.xmin], [ymin=stateExtent.ymin], [xmax=stateExtent.xmax], [ymax=stateExtent.ymax]]);
var symbol1 = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
var _kabpolygon = new esri.geometry.Polygon(_public._kabgraphic.geometry);
/* var _kabpolygon = {"rings":[[
[xmin=stateExtent.xmin, ymin=stateExtent.ymin],
[xmax=stateExtent.xmax, ymax=stateExtent.ymax],
[xmin=stateExtent.xmin, ymin=stateExtent.ymin],
[xmax=stateExtent.xmax, ymax=stateExtent.ymax]
]] "spatialReference":{" wkid":4326}
};*/
_public._kabpolygon=_kabpolygon;
alert (_kabpolygon);
var polygon = new esri.geometry.Polygon(polygon);
var singleRingPolygon = new Polygon(_kabpolygon, symbol1);
_public._kabsingleRingPolygon=singleRingPolygon;
var gsvc = null;
//constructing points
var symbol = new esri.symbol.SimpleFillSymbol().setStyle(esri.symbol.SimpleFillSymbol.STYLE_SOLID);
gsvc = new esri.tasks.GeometryService("http://192.168.100.72:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
var _kabqueryTaskInside = new QueryTask("http://192.168.100.72:6080/arcgis/rest/services/ksa_mot_roads/FeatureServer/0");
_public._kabqueryTaskInside=_kabqueryTaskInside;
//build query filter
alert ("here i am1");
_kabqueryInside = new Query();
_public._kabqueryInside=_kabqueryInside;
_kabqueryInside.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
_kabqueryInside.geometry = graphic.geometry;
alert ("here i am2");
_kabqueryInside.returnGeometry = true;
//_kabqueryInside.where = "RYD_MASJID_ID like '%'";
_kabqueryTaskInside.execute(_kabqueryInside, queryCallback);
alert ("here i am3");
function queryCallback(featureSet) {
alert(featureSet);
_public._kabfeatureSet=featureSet;
var symbol = new esri.symbol.SimpleMarkerSymbol();
alert("here i am 5");
symbol.style = esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE;
symbol.setSize(8);
symbol.setColor(new dojo.Color([255,255,0,0.5]));
_public._kabsymbol=symbol;
var features = featureSet.features;
_public._kabfeatures=features;
dojo.forEach(features, function(feature) {
feature.setSymbol(symbol);
console.log(feature);
_public._kabfeature=feature;
map.graphics.add(feature);
});
}
}
});
</script>
</head>
<body class="nihilo">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<span>Draw:<br /></span>
<button data-dojo-type="dijit/form/Button">Point</button>
<button data-dojo-type="dijit/form/Button">Multi Point</button>
<button data-dojo-type="dijit/form/Button">Line</button>
<button data-dojo-type="dijit/form/Button">Polyline</button>
<button data-dojo-type="dijit/form/Button">Polygon</button>
<button data-dojo-type="dijit/form/Button">Freehand Polyline</button>
<button data-dojo-type="dijit/form/Button">Freehand Polygon</button>
<!--The Arrow,Triangle,Circle and Ellipse types all draw with the polygon symbol-->
<button data-dojo-type="dijit/form/Button">Arrow</button>
<button data-dojo-type="dijit/form/Button">Triangle</button>
<button data-dojo-type="dijit/form/Button">Circle</button>
<button data-dojo-type="dijit/form/Button">Ellipse</button>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>