📄 finaldemo.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>ESRI JavaScript 1/2 day 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("esri.tasks.query");
dojo.require("esri.tasks.geometry");
dojo.require("esri.tasks.gp");
//Make references for dojo controls for the floating panels/title panes
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Dialog");
dojo.require("dojo.data.ItemFileWriteStore"); //Used for the Neighborhood dropdown list
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.form.ComboBox");
//Variable for esri.map
var map;
//Variables for map services/lyaers
var streetMap, imagery, portlandService, dynamicMapServiceLayer;
//Varaibles for identify task, identify parameters
var identify, identifyParams;
var layerIdPrefix = "layerId";
//varaibles for Query Task for querying a parcel
var queryTask, query;
//event for syncing on Click With Identify
//Not in Demo 5- needs to be for final application so user can run Clip/Ship after identify
var Identify_OnClick;
function init()
{
//set the start extent to an area within Portland
//Place the map in the div named "map"
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 is the ArcGIS Online imagery
imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer", {id:"imagery"});
map.addLayer(imagery);
//add the ArcGIS Online Streetmap service, hide it so the imagery appears first
streetMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer", {id:"streetMap"});
map.addLayer(streetMap);
streetMap.hide();
//add the Portland Service from a sample server and set the transparency
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);
//Reference a geocoding service from the sample server
//when the locator has been executed, listen to "OnAddressToLocationsComplete" to add the results to the map
locator = new esri.tasks.Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");
dojo.connect(locator, "onAddressToLocationsComplete", showResults);
//Set the info template for when the user clicks on an address on a map that was returned
infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
//set up Identify Task
dojo.connect(portlandService, "onLoad", populateToc);
identify = new esri.tasks.IdentifyTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_LandBase_AGO/MapServer");
dojo.connect(identify, "onComplete", addToMap);
identifyParams = new esri.tasks.IdentifyParameters();
identifyParams.tolerance = 2;
identifyParams.returnGeometry = true;
//Geoprocessor for clip and ship
gp = new esri.tasks.Geoprocessor("http://sampleserver2.arcgisonline.com/ArcGIS/rest/services/Portland/ESRI_CadastralData_Portland/GPServer/ClipAndShip");
gp.setOutputSpatialReference({wkid:4326});
//Find horizontal slider to change Definition Query of Dynamic map service
var a = dijit.byId('horizontalSlider');
onClickHandle = dojo.connect(a.sliderHandle, 'onmouseup', function(e) { updatemap(dojo.byId('popDens').value); });
//Listen to when "Dynamic Census Data" Floating Panel is expanded to turn on the Dynamic map service
var b = dijit.byId('CensusTitle');
onToggleHandle = dojo.connect(b, 'toggle', function(e) { if (b.open) { addDynamic(dojo.byId('popDens').value); } else { dynamicMapServiceLayer.hide();}});
//Set up Query Task for Neighborhood query. This query task is not shown in the other demos
queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_Neighborhoods_AGO/MapServer/0");
query = new esri.tasks.Query();
query.returnGeometry = false;
query.outFields = ["NAME"];
query.where = "1=1";
execute();
}
//This function gets called when the user clicks the "Imagery" button in the upper right to turn off the StreetMap layer
function TurnOffStreetMap() {
streetMap.hide();
imagery.show();
}
//This function gets called when the user clicks the "Street Map" button in the upper right to turn off the Imagery layer
function TurnOffImagery() {
imagery.hide();
streetMap.show();
}
//addDynamic function gets called when the "Dynamic Census Data" floating panel is expanded
//A new dynamic service is added
function addDynamic(inVal) {
dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer");
//The next line sets the visible layer- only showing the second layer from the map service
dynamicMapServiceLayer.setVisibleLayers([1]);
var layerDefinitions = [];
layerDefinitions[1] = "POP07_SQMI > " + inVal;
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);
map.addLayer(dynamicMapServiceLayer);
}
//updatemap function gets called when the slider bar moves in the "Dynamic Census Data" floating panel
//applies a definition query to the dynamic layer
function updatemap(inVal) {
var layerDefinitions = [];
layerDefinitions[1] = "POP07_SQMI > " + inVal;
dynamicMapServiceLayer.setLayerDefinitions(layerDefinitions);
}
//locate function gets called by the geocoding service in the "Locate Address" Floating panel
function locate() {
var add = dojo.byId("address").value.split(",");
var address = {
Address : add[0],
City: add[1],
State: add[2],
Zip: add[3]
};
locator.addressToLocations(address,["Loc_name"]);
}
//In the init() function, the locator is defined. When the "onAddressToLocationsComplete" event fires, the below showResults function runs
//Function will accept candidates from the geocoding service, take ones with the appropriate candidate score and add as graphics
function showResults(candidates) {
var candidate;
var symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
symbol.setColor(new dojo.Color([255,0,0,0.75]));
for (var i=0, il=candidates.length; i<il; i++) {
candidate = candidates[i];
if (candidate.score > 80) {
var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };
//Locator is a composite address locator = will get back results for city center/zip code center, etc.
//Make sure to only return the address found at a street address
if (candidate.attributes.Loc_name == "Street_Address") {
var graphic = new esri.Graphic(candidate.location, symbol, attributes, infoTemplate);
map.graphics.add(graphic);
}
}
}
}
//QueryParcel function gets called when the user clicks the "Query and Pan to Parcel" button in the "Query Parcel by ID" floating Panel
function QueryParcel(){
//First Query Task represents the tax lot layer (second layer) from the map service in the URL below
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;
//Only get relevant fields to display in the info window
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 a feature is found, call the show feature function, to display it on the map
//If a feature is not found, display an alert box indicating that the feature wasn't found
if (fset.features.length === 1) {
showFeature(fset.features[0]);
} else if (fset.features.length !== 0) {
alert ("No parcel found");
} else{
alert ("No parcels found at that location, try another spot.");}
});
}
//showFeature function gets called if a feature is found in the QueryParcel function.
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -