<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>甘农大</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v38_sdk/arcgis_js_api/library/3.8/3.8/js/dojo/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v38_sdk/arcgis_js_api/library/3.8/3.8/js/esri/css/esri.css" />
<script src="jsapi_vsdoc12_v33.js"></script>
<script type="text/Javascript" src="http://localhost/arcgis_js_v38_sdk/arcgis_js_api/library/3.8/3.8/init.js"></script>
<style type="text/css">
#divMap {
1250px;
height:650px;
border:1px solid #4cff00;
}
#divOverviewMap {
border: 1px solid #ff6a00;
z-index: 1000;
}
#divInfo {
370px;
height:50px;
position:absolute;
top:0;
right:0;
border:1px solid #ff0000
}
</style>
<script type="text/javascript">
var map;
var mapUrl;
var point;
var dynamicMapServiceLayer;
var overViewMap;
var scalebar;
var identifyTask;
var identifyParameters;
var tabledata = new Array();
dojo.require("esri.map");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.tasks.IdentifyTask");
function init() {
map = new esri.Map("divMap", {
//nac: true,
slider: true,
center: [103.701407, 36.088679],
zoom: 13
});
mapUrl = "http://localhost:6080/arcgis/rest/services/甘肃农业大学/GanSuNongYeDaXue/MapServer";
dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(mapUrl);
map.addLayer(dynamicMapServiceLayer);
//添加鹰眼
dojo.connect(map, "onLoad", function () {
overViewMap = new esri.dijit.OverviewMap(
{
map: map, // 必要的
visible: true, // 初始化可见，默认为false
attachTo: "top-right", // 默认右上角
150, // 默认值是地图高度的 1/4th
height: 150, // 默认值是地图高度的 1/4th
opacity: 0.40, // 透明度 默认0.5
maximizeButton: true, // 最大化,最小化按钮，默认false
expandFactor: 3, //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。
color: "red"
}, "divOverviewMap");
overViewMap.startup();
//监听坐标位置
dojo.connect(map, "onMouseDrag", showPosition)
dojo.connect(map, "onMouseMove", showPosition);
dojo.connect(map, "onClick", initIdentify);
});
//监听并添加比例尺
dojo.connect(map, "onLoad", function () {
scalebar = new esri.dijit.Scalebar(
{
attachTo: "bottom-right",
map: map,
scalebarUnit: "english"
}, divMap);
});
dojo.connect(map, "onLoad", initToolbar);
function initToolbar(map) {
tb = new esri.toolbars.Draw(map);
dojo.connect(tb, "onDrawEnd", addGraphic);
}
function addGraphic(geometry) {
var symbol = dojo.byId("symbol").value;
if (symbol) {
symbol = eval(symbol);
}
else {
var type = geometry.type;
if (type === "point" || type === "multipoint") {
symbol = tb.markerSymbol;
}
else if (type === "line" || type === "polyline") {
symbol = tb.lineSymbol;
}
else {
symbol = tb.fillSymbol;
}
}
map.graphics.add(new esri.Graphic(geometry, symbol));
}
//显示坐标
function showPosition(eve)
{
var mapPoint = eve.mapPoint;
var geoPoint = esri.geometry.webMercatorToGeographic(mapPoint);
var scrPoint = eve.screenPoint;
dojo.byId("divInfo").innerHTML =
"莫卡托坐标：" + mapPoint.x + "; " + mapPoint.y +
"屏幕坐标：" + scrPoint.x + "; " + scrPoint.y +
"地理坐标：" + geoPoint.x.toFixed(5) + ";" + geoPoint.y.toFixed(5);
}
//查询操作
function initIdentify(map)
{
identifyTask = new esri.tasks.IdentifyTask("http://localhost:6080/arcgis/rest/services/甘肃农业大学/GanSuNongYeDaXue/MapServer");
identifyParameters = new esri.tasks.IdentifyParameters();
identifyParameters.tolerance = 3;
identifyParameters.returnGeometry = true;
//identifyParameters.layerIds = [1, 0];
identifyParameters.layerOption = identifyParameters.LAYER_OPTION_ALL;
//map.infoWindow.resize(300,150);
//map.infoWindow.setTitle("查询结果：");
symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0]), 1), new dojo.Color([255, 255, 0, 0.5]));
dojo.connect(map, "onClick", doIdentify)
}
function doIdentify(eve)
{
map.infoWindow.show(eve.screenPoint,esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
map.graphics.clear();
identifyParameters.geometry = eve.mapPoint;
identifyParameters.mapExtent = map.extent;
identifyTask.execute(identifyParameters, function (idResults) { addToMap(idResults,eve)});
}
//在infoWindow中显示Identify结果
function addToMap(idResults, evt) {
tabledata = new Array();
//把Identify结果的名称、字段、字段值放入tabledata中
for (var i = 0; i < idResults.length; i++) {
var idResult = idResults[i];
if (tabledata.length > 0) {
var b = false;
for (var j = 0; j < tabledata.length; j++) {
if (tabledata[j].displayFieldName == idResult.layerName) {
var b = true;
break;
}
}
if (b) {
tabledata[j].displayField.push(idResult.attributes);
tabledata[j].feature.push(idResult.feature);
}
else {
var tds = {};
var td = new Array();
//图层名称
tds.displayFieldName = idResult.layerName;
//图层字段
var oo = idResult.attributes;
td.push(oo);
tds.displayField = td;
var td2 = new Array();
td2.push(idResult.feature);
tds.feature = td2;
tabledata.push(tds);
}
}
else {
var tds = {};
var td = new Array();
tds.displayFieldName = idResult.layerName;
var oo = idResult.attributes;
td.push(oo);
tds.displayField = td;
var td2 = new Array();
td2.push(idResult.feature);
tds.feature = td2;
tabledata.push(tds);
}
}
//设置infoWindow显示内容
map.infoWindow.setContent(tableHtml(tabledata, 0));
//设置infoWindow显示
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
//Identify结果的tab切换事件
function tab(index) {
map.infoWindow.setContent(tableHtml(tabledata, index));
}
//infoWindow中内容html
function tableHtml(rs, index) {
var str = "";
var str1 = "";
var str2 = "";
for (var i = 0; i < rs.length; i++) {
if (i == index) {
str1 = str1 + "<span class='a-tab' id='" + i + "' onclick='tab(" + i + ")'>" + rs[i].displayFieldName + "</span>";
}
else {
str1 = str1 + "<span class='tab' id='" + i + "' onclick='tab(" + i + ")'>" + rs[i].displayFieldName + "</span>";
}
}
str2 = trHtml(index);
str = "<div class='tr1'>" + str1 + "</div><div class='tr2'><table border='1'>" + str2 + "</table></div>";
return str;
}
function trHtml(index) {
var str2 = "<tr>";
for (prop in tabledata[index].displayField[0]) {
str2 = str2 + "<td>" + prop + "</td>"
}
str2 = str2 + "</tr>";
for (var i = 0; i < tabledata[index].displayField.length; i++) {
str2 = str2 + "<tr style='cursor: hand' onclick=showFeature(tabledata[" + index + "].feature[" + i + "])>";
for (prop in tabledata[index].displayField[i]) {
if (tabledata[index].displayField[i][prop] == "") {
str2 = str2 + "<td> </td>"
}
else {
str2 = str2 + "<td>" + tabledata[index].displayField[i][prop] + "</td>"
}
}
str2 = str2 + "</tr>";
}
return str2;
}
//高亮显示选中元素
function showFeature(feature) {
map.graphics.clear();
feature.setSymbol(symbol);
map.graphics.add(feature);
}
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<!--<table><tr><td><div id="divMap">
<div id="divOverviewMap" style="border:1px solid #ff6a00;position:absolute;top:0;right:0"></div></div></td></tr>
<tr><td><div id="divInfo"></div></td></tr>
</table>-->
<div id="divMap">
<div id="divOverviewMap" style="border:1px solid #ff6a00;position:absolute;top:0;right:0"></div>
</div>
<div id="divInfo"></div>
<button onclick="tb.activate(esri.toolbars.Draw.POINT);">Point</button>
<button onclick="tb.activate(esri.toolbars.Draw.MULTI_POINT);">Multipoint</button>
<button onclick="tb.activate(esri.toolbars.Draw.EXTENT);">Extent</button>
<button onclick="tb.activate(esri.toolbars.Draw.POLYLINE);">Polyline</button>
<button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);">Freehand Polyline</button>
<button onclick="tb.activate(esri.toolbars.Draw.POLYGON);">Polygon</button>
<button onclick="tb.activate(esri.toolbars.Draw.FREEHAND_POLYGON);">Freehand Polygon</button>
<button onclick="tb.activate(esri.toolbars.Draw.LINE);">Line</button>
<button onclick="tb.deactivate()">Deactivate</button>
<select id="symbol">
<option value="">--- Select Symbol ---</option>
<option value="">--- Simple Marker Symbols ---</option>
<option value="new esri.symbol.SimpleMarkerSymbol();">Default</option>
<option value="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]))">Square</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 50, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([0,0,0]), 2))">Cross, dash outline</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_X, 25, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([0,0,255]), 2))">X, dot outline</option>
<option value="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([255,255,0,0.5]))">Diamond</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15)">Diamond, 15 angle</option>
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 30, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 3), new dojo.Color([255,255,0,0.5])).setAngle(15).setOffset(0,5)">Diamond, 15 angle, 5 offset in Y</option>
<option value="">--- Picture Marker Symbol ---</option>
<option value="">No Default</option>
<option value="new esri.symbol.PictureMarkerSymbol('images/flag.png', 24, 24)">Flag</option>
<option value="">--- Simple Line Symbols ---</option>
<option value="new esri.symbol.SimpleLineSymbol();">Default</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1)">Solid</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2)">Dash Dot</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 3)">Dash</option>
<option value="new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DOT, new dojo.Color([255,0,0]), 5)">Dot</option>
<option value="">--- Cartographic Line Symbols ---</option>
<option value="new esri.symbol.CartographicLineSymbol()">Default</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10)">Solid</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_ROUND)">Solid, round cap, round join</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_SQUARE, esri.symbol.CartographicLineSymbol.JOIN_BEVEL)">Solid, square cap, bevel join</option>
<option value="new esri.symbol.CartographicLineSymbol(esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 10, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_MITER, 5)">Solid, round cap, miter (5) join</option>
<option value="">--- Simple Fill Symbols ---</option>
<option value="new esri.symbol.SimpleFillSymbol()">Default</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2))">None</option>
<option value="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]))">Solid</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_HORIZONTAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Horizontal</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_FORWARDDIAGONAL, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Forward diagonal</option>
<option value="new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_DIAGONALCROSS, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))">Diagonal cross</option>
<option value="">--- Picture Fill Symbols ---</option>
<option value="">No Default</option>
<option value="new esri.symbol.PictureFillSymbol('images/sand.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Sand</option>
<option value="new esri.symbol.PictureFillSymbol('images/mangrove.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Mangrove</option>
<option value="new esri.symbol.PictureFillSymbol('images/swamp.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Swamp</option>
<option value="new esri.symbol.PictureFillSymbol('images/stiple.png', new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color('#000'), 1), 42, 42)">Ordered 10% Stiple</option>
</select>
<br />
Zoom Slider :
<input type="button" value="Hide" onclick="map.hideZoomSlider()" />
<input type="button" value="Show" onclick="map.showZoomSlider()" />
</body>
</html>