<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <!--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>Find Task</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; } body { font-size: 0.9em; font-family: Geneva, Arial, Helvetica, sans-serif; } .details { font-weight: bold; } #grid { border: 1px solid #333;} </style> <script> var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script> <script> dojo.require("dojox.grid.DataGrid"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("esri.map"); dojo.require("esri.tasks.find"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); var findTask, findParams, map; function init() { var initExtent = new esri.geometry.Extent({ "xmin": -125.0552, "ymin": 38.7130, "xmax": -70.2156, "ymax": 48.4081, "spatialReference": { "wkid": 4326} }); map = new esri.Map("map", { extent: initExtent }); var censusMapLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", { id: "usa" }); map.addLayer(censusMapLayer); //create find task with url to map service findTask = new esri.tasks.FindTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer"); //create find parameters and define known values findParams = new esri.tasks.FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0, 1, 2]; findParams.searchFields = ["CITY_NAME", "NAME", "SYSTEM", "STATE_ABBR", "STATE_NAME"]; dojo.connect(grid, "onRowClick", onRowClickHandler1); } function execute(searchText) { //set the search text to find parameters findParams.searchText = searchText; findTask.execute(findParams, showResults); } function showResults(results) { //symbology for graphics var markerSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 255, 0, 0.25])); var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 1); var polygonSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25])); //find results return an array of findResult. map.graphics.clear(); var dataForGrid = []; //Build an array of attribute information and add each found graphic to the map dojo.forEach(results, function (result) { var graphic = result.feature; //dataForGrid.push([result.layerName, result.foundFieldName, result.value]); switch (graphic.geometry.type) { case "point": dataForGrid.push([result.layerName, result.foundFieldName, result.value.toString(), result.feature.geometry.x, result.feature.geometry.y]); graphic.setSymbol(markerSymbol); break; case "polyline": dataForGrid.push([result.layerName, result.foundFieldName, result.value.toString(), ((result.feature.geometry.getExtent().xmin + result.feature.geometry.getExtent().xmax) / 2), ((result.feature.geometry.getExtent().ymin + result.feature.geometry.getExtent().ymax) / 2)]); graphic.setSymbol(lineSymbol); break; case "polygon": dataForGrid.push([result.layerName, result.foundFieldName, result.value.toString(), ((result.feature.geometry.getExtent().xmin + result.feature.geometry.getExtent().xmax) / 2), ((result.feature.geometry.getExtent().ymin + result.feature.geometry.getExtent().ymax) / 2)]); graphic.setSymbol(polygonSymbol); break; } map.graphics.add(graphic); }); var data = { items: dataForGrid }; var store = new dojo.data.ItemFileReadStore({ data: data }); grid.setStore(store); } //Zoom to the parcel when the user clicks a row function onRowClickHandler1(evt) { var gr = grid.getItem(evt.rowIndex); map.graphics.clear(); var x = parseFloat(gr[3][0]); var y = parseFloat(gr[4][0]); if ((x.toString() != "NaN") || (y.toString() != "NaN")) { var initExtent = new esri.geometry.Extent({ "xmin": x - 0.1, "ymin": y - 0.1, "xmax": x + 0.1, "ymax": y + 0.1, "spatialReference": map.spatialReference }); map.graphics.add(new esri.Graphic(new esri.geometry.Point(x, y, map.spatialReference), new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 8, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.3])))) map.setExtent(initExtent); } } dojo.ready(init); </script> </head> <body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" style="width:100%;height:100%;margin:0" data-dojo-props="design:'headline',gutters:true"> <div class="details" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region:'top'" style="height:30px;"> Find State/City/River: <input type="text" id="searchText" value="KS" /> <input type="button" value="Find" onclick="execute(dojo.byId('searchText').value);"/> </div> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="border:1px solid #000;"></div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width:300px;"> <!--Refer to field by the position id, since the data doesn't have field names--> <table data-dojo-type="dojox.grid.DataGrid" jsid="grid" id="grid" > <thead> <tr> <th field="0" > Layer Name </th> <th field="1" > Field Name </th> <th field="2" > Value </th> </tr> </thead> </table> </div> </div> </body> </html>
Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.