<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>框選查詢</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" target="_blank" rel="external nofollow" />
<link rel="stylesheet" href="http://58.56.168.30:8013/arcgisjsapi/arcgis_js_api/library/3.19/3.19/esri/css/esri.css" target="_blank" rel="external nofollow" >
<style>
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
#panoDiv {
display: none;
position: absolute;
right: 0;
top: 0;
width: 70%;
height: 70%;
}
#tree {
height: 35px;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-treeview.js" type="text/javascript" charset="utf-8"></script>
<script src="js/checkall.js" type="text/javascript"></script>
<script src="http://58.56.168.30:8013/arcgisjsapi/arcgis_js_api/library/3.19/3.19/init.js"></script>
<script>
var map, tb;
var GJurl = "http://58.56.168.30:6080/arcgis/rest/services/齊魯交通/專題服務全/MapServer";
require([
"esri/map",
"esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/PictureMarkerSymbol",
"esri/layers/FeatureLayer",
"esri/tasks/query",
"tdlib/SDTDTLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/PictureFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/graphic",
"esri/Color",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
], function(Map, Draw, SimpleMarkerSymbol, PictureMarkerSymbol, FeatureLayer, Query, SDTDTLayer, ArcGISDynamicMapServiceLayer,
PictureFillSymbol, SimpleLineSymbol, Graphic, Color, on, dom) {
map = new Map("map", {
wkid: 4326,
center: [118.1, 36.1],
zoom: 10,
isDoubleClickZoom: false,
logo: false,
});
map.disableDoubleClickZoom();
map.on("load", initToolbar);
var sdvecLayer = new SDTDTLayer();
map.addLayer(sdvecLayer);
var layer = new ArcGISDynamicMapServiceLayer(GJurl);
map.addLayer(layer);
var fillSymbol = new PictureFillSymbol(
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
),
42,
42
);
//拉框或者是多邊形
function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);
document.getElementById("info").onclick = function(evt) {
if(evt.target.id === "info") {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
};
}
document.getElementById("clear").onclick = function() {
tb.deactivate();
map.graphics.clear();
}
//根據背景資料添加多選框
$.ajax({
url: 'http://58.56.168.30:6080/arcgis/rest/services/%E9%BD%90%E9%B2%81%E4%BA%A4%E9%80%9A/%E4%B8%93%E9%A2%98%E6%9C%8D%E5%8A%A1%E5%85%A8/MapServer?f=pjson',
type: 'GET',
dataType: 'json',
success:function(res){
var data = [
{
text: "選擇查詢圖層",
nodes: [
]
}
];
for (var i = 0; i < res.layers.length; i++) {
data[0].nodes[i]=new Object();
data[0].nodes[i].text=res.layers[i].name;
};
$('#tree').treeview({
data: data,
levels: 5,
showCheckbox: true,
backColor: '#FFFFFF',
color: '#428BCA',
onNodeChecked: nodeChecked,
onNodeUnchecked: nodeUnchecked
});
}
});
//添加圖層
var layerArr=new Array();
function addGraphic(evt) {
tb.deactivate();
map.enableMapNavigation();
var symbol;
if(evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
} else {
symbol = fillSymbol;
}
map.graphics.add(new Graphic(evt.geometry, symbol));
//獲得要查詢圖層ID
var nodeArr = new Array();
var nodeId = $('#tree').treeview('getChecked', nodeId);
for(var i = 1; i < nodeId.length; i++) {
nodeArr.push(nodeId[i].nodeId - 1)
}
//根據查詢圖層ID進行查詢
for(var i = 0; i < layer.layerInfos.length; i++) {
if(nodeArr.length == layer.layerInfos.length){
var layerId = layer.layerInfos[i].id;
if (layerId==19||layerId==20||layerId==21) {return;} //不查詢路線
featureLayer = new FeatureLayer(GJurl + "/" + layerId);
var query = new Query();
query.geometry = evt.geometry;
query.where = "1=1";
query.outFields = ["*"];
featureLayer.queryFeatures(query, addTips);
}
else{
if(nodeArr.indexOf(layer.layerInfos[i].id) > -1) {
var layerId = layer.layerInfos[i].id;
if (layerId==19||layerId==20||layerId==21) {return;} //不查詢路線
featureLayer = new FeatureLayer(GJurl + "/" + layerId);
var query = new Query();
query.geometry = evt.geometry;
query.where = "1=1";
query.outFields = ["*"];
featureLayer.queryFeatures(query, addTips);
}
}
}
}
//添加标注
function addTips(res) {
for(var i = 0; i < res.features.length; i++) {
var long = res.features[i].geometry.x;
var lat = res.features[i].geometry.y;
var labelPoint = new esri.geometry.Point(long, lat);
var labelSymbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE, 7, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 1),
new Color([255, 0, 0]));
//添加展示資訊
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle(" "+res.features[i]._layer.name);
infoTemplate.setContent("<b>編号: </b>" + res.features[i].attributes.ROADID + "<br/>");
labelGraphic = new Graphic(labelPoint, labelSymbol);
labelGraphic.setInfoTemplate(infoTemplate);
map.graphics.add(labelGraphic);
}
}
});
</script>
</head>
<body style="overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%">
<div id="info" style="height: 40px;padding-top: 7px;">
<button id="Extent">Rectangle</button>
<button id="Polygon">Polygon</button>
</div>
<button id="clear" style="position: absolute;left: 153px;top: 7px;">清除查詢</button>
<div class="layerSelection" style="width: 300px;height:800px;overflow-y: scroll;position: absolute;z-index: 100;right: 0;top: 0;">
<div id="tree" ></div>
</div>
<div id="map"></div>
</body>
</html>
ArcGis for js——————拉框和多邊形查詢；
代碼都貼出來了，jQuery之類的檔案引入即可實作；
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)