require([
"esri/map",
"dojo/ready",
"dgrid/OnDemandGrid",
"dojo/dom",
"dojo/on",
"esri/graphic",
"esri/geometry/Point",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/dom-style",
"dijit/registry",
"esri/tasks/query",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/InfoTemplate",
"dojo/_base/Color",
"esri/renderers/SimpleRenderer",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/QueryTask",
"dojo/_base/declare",
"dojo/number",
"dojo/on",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function (
map,
ready,
Grid,
dom,
on,
graphic,
Point,
Selection,
Memory,
array,
domStyle,
registry,
Query,
Color,
SimpleMarkerSymbol,
InfoTemplate,
Color1,
SimpleRenderer,
FeatureLayer,
SimpleFillSymbol,
SimpleLineSymbol,
QueryTask,
declare,
dojoNum,
on,
parser
) {
ready(function () {
parser.parse();
//
// create the dgrid
window.grid = new (declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"id": { "label": "STT" },
// "maso": { "label": "Mã", "formatter": dojoNum.format },
"ten": { "label": "Tên" },
"diachi": { "label": "địa chỉ" }
// "dientich": { "label": "Diện tích", "formatter": dojoNum.format }
}
}, "timkiem");
// add a click listener on the ID column
grid.on(".field-id:click", selectState);
window.map = map;
var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://192.166.3.252:6080/arcgis/rest/services/NENCHUNG/Nen_chung1/MapServer");
myMap.addLayer(layer);
window.statesUrl = "http://192.166.3.252:6080/arcgis/rest/services/NENCHUNG/Nen_chung1/MapServer/2";
window.outFields = ["OBJECTID", "ten", "diaChi"];
queryTask1 = new QueryTask(window.statesUrl);
//initialize query
query1 = new esri.tasks.Query();
query1.returnGeometry = true;
query1.outFields = window.outFields;
//initialize InfoTemplate
infoTemplate1 = new InfoTemplate("${OBJECTID}", "Name : ${OBJECTID}<br/> State : ${ten}<br />Population : ${diaChi}");
// create symbol for selected features
symbol1 = new SimpleMarkerSymbol();
symbol1.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
symbol1.setSize(80);
symbol1.setColor(new Color([255, 255, 0, 1]));
var fl = new FeatureLayer(window.statesUrl, {
id: "states",
mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
outFields: window.outFields
});
fl.on("load", function () {
fl.maxScale = 0; // show the states layer at all scales
});
//change cursor to indicate features are click-able
fl.on("mouse-over", function () {
myMap.setMapCursor("pointer");
});
fl.on("mouse-out", function () {
myMap.setMapCursor("default");
});
myMap.addLayer(fl);
myMap.on("layers-add-result", populateGrid(Memory));
function populateGrid(Memory) {
var qt = new QueryTask(window.statesUrl);
// TENHUYEN LIKE'%" + dom.byId("search-text").value + "%'
var query = new Query();
query.where = "ten LIKE'%" + dom.byId("search-text").value + "%'";
query.returnGeometry = false;
query.outFields = window.outFields;
qt.execute(query, function (results) {
var data = array.map(results.features, function (feature) {
return {
// property names used here match those used when creating the dgrid
"id": feature.attributes[window.outFields[0]],
"ten": feature.attributes[window.outFields[1]],
"diachi": feature.attributes[window.outFields[2]]
// "dientich": feature.attributes[window.outFields[3]]
}
});
var memStore = new Memory({ data: data });
window.grid.set("store", memStore);
});
}
// fires when a row in the dgrid is clicked
function selectState(e) {
query1.where = "1=1";
//execute query
queryTask1.execute(query1, showResults);
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
myMap.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = featureSet.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(symbol1);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate1);
//Add graphic to the map graphics layer.
myMap.graphics.add(graphic);
}
}
});
});
}
