📄 demo4_querywithgeometryservice.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JavaScript Seminar</title>
<script type="text/javascript">djConfig = { parseOnLoad:true }</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1"></script>
<style type="text/css">
@import "http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript">
//This demo application is intended for education purposes only and associated with the
//ESRI JavaScript API 1/2 day seminars presented in the fall of 2008.
//Register for seminars at:
// http://www.esri.com/events/seminars/arcgis93_server/index.html
//All the services used in the following demonstrations rely on ESRI sample servers.
//The services running on the sample servers may change in the future;
//thus, you should not rely on the services in your own applications.
//The sample server services are being utilized in this seminar for demonstration purposes only.
//As the demonstrations rely on the sample servers, the content of these demos will only be valid as long as the services on the sample servers continue to run.
dojo.require("esri.map");
dojo.require("dijit.TitlePane"); //Added for Query Demo
dojo.require("dijit.form.TextBox"); //Added for Query Demo
dojo.require("dijit.Dialog") //Added for Query Demo to pop up mailing lists
var map; //represents esri.map
var imagery; //arcgisonline imagery
var streetMap; //arcgisonline streetmap data
var portlandService; //Portland Data from sample server
function init() {
var startExtent = new esri.geometry.Extent({ xmin: -123.6, ymin: 44.873, xmax: -121.645, ymax: 45.793, spatialReference: new esri.SpatialReference({wkid: 4326})});
map = new esri.Map("map", { extent:startExtent } );
imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
map.addLayer(imagery);
streetMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer", {id:"streetMap"});
map.addLayer(streetMap);
streetMap.hide();
portlandService = new esri.layers.ArcGISTiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_LandBase_AGO/MapServer", {id:"portlandService"});
portlandService.setOpacity(0.75);
map.addLayer(portlandService);
}
function TurnOffStreetMap() {
streetMap.hide();
imagery.show();
}
function TurnOffImagery() {
imagery.hide();
streetMap.show();
}
//QueryParcel
function QueryParcel(){
//First Query Task represents
var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_LandBase_AGO/MapServer/1");
var query = new esri.tasks.Query();
var infoTemplate2 = new esri.InfoTemplate();
//build query filter
query.returnGeometry = true;
query.outFields = ["TLID", "SITEADDR", "TOTALVAL", "TAXCODE", "SALEDATE", "SALEPRICE"];
query.where = "TLID = '" + dojo.byId('parcelID').value + "'"; // Pass in value from text box, default is 21E10BB07200'";
//Execute task and call showResults on completion
queryTask.execute(query, function(fset) {
if (fset.features.length === 1) {
showFeature(fset.features[0]);
} else if (fset.features.length !== 0) {
alert ("Something");
} else{
alert ("No parcels found at that location, try another spot.");}
});
}
function showFeature(feature) {
map.graphics.clear();
curFeature = feature;
var fExtent = feature.geometry.getExtent();
var centerPt = fExtent.getCenter();
map.centerAt(centerPt);
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.5]));
feature.setSymbol(symbol);
feature.setInfoTemplate(new esri.InfoTemplate("Parcel ID : <pre style='display:inline;'>${TLID}</pre>",
"<form>Address : ${SITEADDR}"
+ "<br />Total Value : ${TOTALVAL}"
+ "<br />Tax Code : ${TAXCODE}"
+ "<br />Last Sale : ${SALEDATE}"
+ "<br />Sale Price : ${SALEPRICE}"
+ "<br />"
+ "<br /><b>Generate Mailing List: </b>"
+ "<br/> Enter buffer distance in ft: "
+ "<br/><input id='txtgpdist' width='30px' type='text' name='txtgpdist' value='100'> <input id='btnGP' type='button' onclick='RunGeometryService(dojo.byId('txtgpdist').value, curFeature)' value='Submit' ></form>"
));
map.graphics.add(feature);
map.infoWindow.resize(210, 210);
map.infoWindow.setTitle(feature.getTitle()).setContent(feature.getContent());
map.infoWindow.show(map.toScreen(centerPt), map.getInfoWindowAnchor(map.toScreen(centerPt)));
}
function RunGeometryService(distance, featureinput) {
//Geometry Service Endpoint
var gsvc = new esri.tasks.GeometryService("http://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");
//Use another query to find addresses within buffer
var MailingQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_LandBase_AGO/MapServer/1");
var MailingQuery = new esri.tasks.Query();
map.graphics.clear();
var feature = featureinput;
var params = new esri.tasks.BufferParameters();
params.features = [ feature ];
// CASE [1]: if you want to buffer in linear units such as meters, km, miles etc.
params.distances = [ distance ];
params.unit = esri.tasks.BufferParameters.UNIT_FEET;
params.bufferSpatialReference = new esri.SpatialReference({wkid: 102113});
gsvc.buffer(params);
dojo.connect(gsvc, "onBufferComplete", function(features) {
var symbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0,0,255,0.65]), 2
),
new dojo.Color([0,0,255,0.35])
);
//should only be one buffer polygon, so no need to loop through
var bufferpoly = features[0].geometry;
features[0].setSymbol(symbol);
//Add buffered graphics to map
map.graphics.add(features[0]);
//Buffer has completed
//Use ouptut from buffer as input for another query to find addresses
MailingQuery.returnGeometry = true;
MailingQuery.outFields = ["TLID", "SITEADDR", "SITECITY"];
MailingQuery.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;
function execute() {
queryTask.execute(query, showResults1);
}
function showResults1(results) {
var options = new dojo.data.ItemFileWriteStore({ data: { identifier: 'name', items: []} });
var s = "";
var nameArray = new Array();
for (var i = 0, il = results.features.length; i < il; i++) {
var featureAttributes = results.features[i].attributes;
for (att in featureAttributes) {
try {
if (att == "NAME")
nameArray.push(featureAttributes[att]);
} catch (ex) { }
}
}
nameArray.sort();
for (var i = 0; i < nameArray.length; i++) {
try {
options.newItem({ name: nameArray[i] });
} catch (ex) {
//alert(ex);
}
}
var comboBoxFetchStrategy = new dijit.form.ComboBox({
name: "prog3",
autoComplete: false,
store: options, onChange: zoomNeighborhood
}, dojo.byId("progCombo3"));
}
function zoomNeighborhood(value) {
var neighQuery;
neighQuery = new esri.tasks.Query();
neighQuery.returnGeometry = true;
neighQuery.outFields = ["NAME", "SHAPE"];
neighQuery.where = "NAME='" + value + "'";
queryTask.execute(neighQuery, zoomNeighborhoodResults);
}
function zoomNeighborhoodResults(results) {
map.graphics.clear();
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 255, 0.35]), 1), new dojo.Color([255, 0, 0, 0.35]));
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
for (var i = 0, il = results.features.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = results.features[i];
graphic.setSymbol(symbol);
var infoTemplate = new esri.InfoTemplate();
infoTemplate.title = "${NAME}";
infoTemplate.content = "<b>NAME: </b>${NAME}";
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
map.setExtent(graphic.geometry.getExtent().expand(2));
}
}
//Pass in the extent of the buffer polygon to determine the parcels that fall within
MailingQuery.geometry = bufferpoly.getExtent();
MailingQueryTask.execute(MailingQuery);
});
// +++++Listen for QueryTask executecomplete event+++++
dojo.connect(MailingQueryTask, "onComplete", function(fset) {
dojo.byId('MailingLabels').innerHTML = " ";
var resultFeatures = fset.features;
var symbol = new esri.symbol.SimpleFillSymbol(
esri.symbol.SimpleFillSymbol.STYLE_SOLID,
new esri.symbol.SimpleLineSymbol(
esri.symbol.SimpleLineSymbol.STYLE_SOLID,
new dojo.Color([0,0,255,0.65]), 2
),
new dojo.Color([255,0,255,0.35])
);
for (var i=0, il=resultFeatures.length; i<il; i++) {
//alert ("found one");
dojo.byId('MailingLabels').innerHTML = (dojo.byId('MailingLabels').innerHTML + "<br />" + resultFeatures[i].attributes['SITEADDR'] + ", " + resultFeatures[i].attributes['SITECITY']);
resultFeatures[i].setSymbol(symbol);
map.graphics.add(resultFeatures[i]);
}
dijit.byId('MailingList').show()
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<table>
<tbody>
<tr>
<td>
<div style="position:relative;">
<div id="map" style="width:1100px; height:600px; border:1px solid #000;">
</div>
<div style="position:absolute; right:25px; top:10px; z-Index:999;">
<button dojoType="dijit.form.Button" onClick="TurnOffStreetMap();">Imagery</button>
<button dojoType="dijit.form.Button" onClick="TurnOffImagery();">Street Map</button>
</div>
<div style="position:absolute; right:10px; top:50px; z-Index:999;">
<div dojoType="dijit.TitlePane" title="Query Parcel by ID" open="false" style="width:350px">
<table>
<input id="parcelID" type="decimal" name="parcelID" value="21E10BB07200" dojoType="dijit.form.TextBox" /> <br/>
<button onclick = "QueryParcel()"; style="display: block;float: right; margin: 6px 0 20px 0; clear: both; border: 1px solid #999; background: #EEEEEE">Query and Pan to Parcel</button>
</div>
</div>
</div>
</td>
<td valign="top">
</td>
</tr>
</tbody>
</table>
<div dojoType="dijit.Dialog" id="MailingList" title="Mailing List">
<p>Addresses within buffer distance:</p>
<span id="MailingLabels"></span>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -