1、地理查询主要是查询该图层的每个图斑的属性,分为基本查询和按距离查询,基本查询指的是如果鼠标选择的点在图斑上或内才有效,按距离查询指的是在给定距离内如果查询到了图斑就把该图斑作为查询对象,第一种适合用在面状图层中,第二种方式适合点和线状图层。
2、请仔细阅读下面的代码,带有注释,需要慢慢消化。查询对象可以是服务图层,这里发布了一个服务图层service layer,全是面状图斑,所以用这两种查询方法都比较适合。
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>
Basic Querying in FeatureLayer
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#optionsDiv {
background-color: white;
color: black;
padding: 6px;
max-width: 400px;
}
</style>
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/WebTileLayer",
"esri/widgets/Legend",
"esri/geometry/SpatialReference",
"esri/geometry/Extent",
"esri/layers/support/TileInfo",
"esri/geometry/Point",
], (Map, Graphic, MapView, FeatureLayer, WebTileLayer, Legend, SpatialReference, Extent, TileInfo, Point) => {
var tiandituBaseUrl = "http://{subDomain}.tianditu.com"; //天地图服务地址
var token = ""; //天地图token,在官网申请
var tileInfo = new TileInfo({
"rows": 256,
"cols": 256,
"origin": {
"x": -180,
"y": 90
},
"spatialReference": {
"wkid": 4490
},
"lods": [
{ "level": "1", "scale": 295829355.45, "resolution": 0.703125 },
{ "level": "2", "scale": 147914677.725, "resolution": 0.3515625 },
{ "level": "3", "scale": 73957338.8625, "resolution": 0.17578125 },
{ "level": "4", "scale": 36978669.43125, "resolution": 0.087890625 },
{ "level": "5", "scale": 18489334.715625, "resolution": 0.0439453125 },
{ "level": "6", "scale": 9244667.3578125, "resolution": 0.02197265625 },
{ "level": "7", "scale": 4622333.67890625, "resolution": 0.010986328125 },
{ "level": "8", "scale": 2311166.839453125, "resolution": 0.0054931640625 },
{ "level": "9", "scale": 1155583.4197265625, "resolution": 0.00274658203125 },
{ "level": "10", "scale": 577791.7098632812, "resolution": 0.001373291015625 },
{ "level": "11", "scale": 288895.8549316406, "resolution": 0.0006866455078125 },
{ "level": "12", "scale": 144447.9274658203, "resolution": 0.00034332275390625 },
{ "level": "13", "scale": 72223.96373291015, "resolution": 0.000171661376953125 },
{ "level": "14", "scale": 36111.98186645508, "resolution": 0.0000858306884765625 },
{ "level": "15", "scale": 18055.99093322754, "resolution": 0.00004291534423828125 },
{ "level": "16", "scale": 9027.99546661377, "resolution": 0.000021457672119140625 },
{ "level": "17", "scale": 4513.997733306885, "resolution": 0.000010728836059570312 },
{ "level": "18", "scale": 2256.9988666534423, "resolution": 0.000005364418029785156 },
{ "level": "19", "scale": 1128.4994333267211, "resolution": 0.000002682209014892578 }
]
});
//影像地图
var tdtImageLayer = new WebTileLayer({
urlTemplate: tiandituBaseUrl + "/DataServer?T=img_c&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: { wkid: 4490 },
});
//影像注记
var tdtAnnoImageLayer = new WebTileLayer({
urlTemplate: tiandituBaseUrl + "/DataServer?T=cia_c&x={col}&y={row}&l={level}&tk=" + token,
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: { wkid: 4490 },
});
const layer = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/hb/MapServer",
outFields: ["*"],//即 output fields,要输出的字段,*代表输出所有字段的查询属性,也可以自己指定
opacity: "1"//不透明度
});
const map = new Map({
basemap: {
baseLayers: [tdtImageLayer, tdtAnnoImageLayer]
},
layers: [layer],
});
const view = new MapView({
container: "viewDiv",
map: map,
ui: {
components: ["zoom", "compass"]
},
popup: {
autoOpenEnabled: false,
dockEnabled: true,
dockOptions: {
buttonEnabled: false,
breakpoint: false,
position: "bottom-right"
}
}
});
// 图例
const legend = new Legend({
view: view,
layerInfos: [
{
layer: layer
}
]
});
view.ui.add(legend, "bottom-left");
view.ui.add("optionsDiv", "top-right");
let distance = null;
let units = null;
const pointGraphic = new Graphic({
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [0, 0, 139],
outline: {
color: [255, 255, 255],
width: 1.5
}
}
});
// Create graphic for distance buffer
const bufferGraphic = new Graphic({
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [173, 216, 230, 0.2],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
}
});
// when query type changes, set appropriate values
const queryOpts = document.getElementById("query-type");
queryOpts.addEventListener("change", () => {
switch (queryOpts.value) {
// values set for distance query
case "distance":
distance = 0.5;
units = "miles";
break;
default:
// Default set to basic query
distance = null;
units = null;
}
});
layer.load().then(() => {
// 自动定位到图层所在位置
view.extent = layer.fullExtent;
layer.popupTemplate = layer.createPopupTemplate();
});
view.on("click", (event) => {
view.graphics.remove(pointGraphic);
if (view.graphics.includes(bufferGraphic)) {
view.graphics.remove(bufferGraphic);
}
queryFeatures(event);
});
function queryFeatures(screenPoint) {
const point = view.toMap(screenPoint);
layer
.queryFeatures({
geometry: point,
// distance and units will be null if basic query selected
distance: distance,
units: units,
spatialRelationship: "intersects",
returnGeometry: false,
returnQueryGeometry: true,
outFields: ["*"]
})
.then((featureSet) => {
// set graphic location to mouse pointer and add to mapview
pointGraphic.geometry = point;
view.graphics.add(pointGraphic);
// open popup of query result
view.popup.open({
location: point,
features: featureSet.features,
featureMenuOpen: true
});
if (featureSet.queryGeometry) {
bufferGraphic.geometry = featureSet.queryGeometry;
view.graphics.add(bufferGraphic);
}
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="optionsDiv" class="esri-widget">
<p>
Select a query type and click a point on the map to view the results.
</p>
<select id="query-type" class="esri-widget">
<option value="basic">Basic Query</option>
<option value="distance">Query By Distance</option>
</select>
</div>
</body>
</html>
2、效果