📄 demo5_identify.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"); //Needed for floating panels
var map; //represents esri.map
var imagery; //arcgisonline imagery
var streetMap; //arcgisonline streetmap data
var portlandService; //Portland Data from sample server
var identify, identifyParams; //Step 4 Layer Identify object and parameters
var layerIdPrefix = "layerId"; //used to populate layers for Identify tool
var numLayers;
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);
//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;
}
function TurnOffStreetMap() {
streetMap.hide();
imagery.show();
}
function TurnOffImagery() {
imagery.hide();
streetMap.show();
}
function populateToc() {
var layers = portlandService.layerInfos;
var layer, id;
numLayers = layers.length;
var s = [];
for (var i=0; i<numLayers; i++) {
layer = layers[i];
id = layer.id;
s.push("<input type=\"checkbox\" id=\"" + layerIdPrefix + id + "\" name=\"" + layerIdPrefix + id + "\" /><label for=\"" + layerIdPrefix + id + "\">" + layer.name + "</label>")
}
dojo.byId("toc").innerHTML = s.join("<br />");
}
function syncIdentify(){
dojo.connect(map, "onClick", doIdentify);
}
function doIdentify(evt) {
map.graphics.clear();
var symbol = 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 graphic = new esri.Graphic(evt.mapPoint,symbol);
map.graphics.add(graphic);
identifyParams.geometry = evt.mapPoint;
identifyParams.layerOption = dojo.byId("layerOption").value;
identifyParams.mapExtent = map.extent;
var layerIds = identifyParams.layerIds = [];
for (var i = 0; i<numLayers; i++) {
if (dojo.byId(layerIdPrefix + i).checked) {
layerIds.push(i);
}
}
identify.execute(identifyParams)
}
function addToMap(results) {
for (var i=0, il=results.length; i<il; i++) {
var graphic = results[i].feature;
switch (graphic.geometry.type) {
case "point":
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,255,0]), 1), new dojo.Color([0,255,0,0.25]));
break;
case "polyline":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([0,255,0]), 1);
break;
case "polygon":
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([0,255,0]), 2), new dojo.Color([0,255,0,0.25]));
break;
case "multipoint":
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1), new dojo.Color([0,255,0,0.5]));
break;
}
graphic.setSymbol(symbol);
var infoTemplate = new esri.InfoTemplate("Layer Name: " + results[i].layerName,"${*}");
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic);
}
}
function initToolbar() {
map.graphics.clear();
var tb = new esri.toolbars.Draw(map);
//find points in Extent when user completes drawing extent
dojo.connect(tb, "onDrawEnd", addClipGraphic);
//set drawing mode to extent
tb.activate(esri.toolbars.Draw.POLYGON);
}
function addClipGraphic(geometry) {
var symbol = new esri.symbol.SimpleLineSymbol();
map.graphics.add(new esri.Graphic(geometry, symbol));
}
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 dojoType="dijit.TitlePane" title="Identify Attributes" open="false" style="width:350px">
<table>
Check the layer(s) you want to identify, then click the identify button below, then click on map to identify a feature. A graphic will appear on the feature you identified. Click the graphic again to obtain the attributes.
<br />
Option:<br />
<select id="layerOption">
<option value="all">All</option>
<option value="visible">Visible</option>
<option value="top">Top</option>
</select>
<br />
Layer Ids:<br />
<span id="toc"></span>
<button onclick = "syncIdentify()"; style="display: block;float: right; margin: 6px 0 20px 0; clear: both; border: 1px solid #999; background: #EEEEEE">Identify Feature</button>
</table>
</div>
</div>
</div>
</td>
<td valign="top">
</td>
</tr>
</tbody>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -