需求：
使用ArcGIS API for JavaScript实现要素服务query接口的功能，以get请求和post请求两种方式进行实现。
动态地图服务也可以参考类似的思路进行查询
效果图：
要素服务地址：
https://ncportal.geoscene.cn/server/rest/services/Hosted/station1/FeatureServer/0
查询区域：
使用geometry（polygon）作为查询的范围，如下图：rings的值
{
"displayFieldName" : "",
"fieldAliases" : {
"FID" : "FID",
"Id" : "Id"
},
"geometryType" : "esriGeometryPolygon",
"spatialReference" : {
"wkid" : 4326,
"latestWkid" : 4326
},
"fields" : [
{
"name" : "FID",
"type" : "esriFieldTypeOID",
"alias" : "FID"
},
{
"name" : "Id",
"type" : "esriFieldTypeInteger",
"alias" : "Id"
}
],
"features" : [
{
"attributes" : {
"FID" : 0,
"Id" : 0
},
"geometry" : {
"rings" : [
[
[
107.11666700000018,
29.166667000000132
],
[
114.50000000000011,
29.60000000000008
],
[
114.35000000000014,
25.400000000000148
],
[
107.18333300000006,
24.966667000000143
],
[
107.11666700000018,
29.166667000000132
]
]
]
}
}
]
}
1、要素服务rest界面实现
可以以get请求来进行查询，也可以post请求进行查询，查询出有158条要素记录符号要求
2、get请求实现
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
查询要素数据
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView",
"esri/rest/query",
"esri/layers/TileLayer",
"esri/rest/support/Query",
"esri/Graphic",], (
Map,
MapView,
query,
TileLayer,
Query,
Graphic
) => {
// url to the layer of interest to query
let queryUrl = "https://ncportal.geoscene.cn/server/rest/services/Hosted/station1/FeatureServer/0";
//设置查询参数
let queryObject = new Query();
queryObject.where = "1=1";
queryObject.outSpatialReference = { wkid: 4326 };
queryObject.outFields = '*';
queryObject.spatialRel = 'esriSpatialRelIntersects';
queryObject.geometryType = 'esriGeometryPolygon';
queryObject.inSR = 4326;
queryObject.outSR = 4326;
queryObject.returnGeometry = true;
queryObject.geometry = {
type: "polygon",
rings: [
[
[
107.11666700000018,
29.166667000000132
],
[
114.50000000000011,
29.60000000000008
],
[
114.35000000000014,
25.400000000000148
],
[
107.18333300000006,
24.966667000000143
],
[
107.11666700000018,
29.166667000000132
]
]
]
};
const layer = new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
format: "jpgpng" // server exports in either jpg or png format
});
/**************************
* Add image layer to map
*************************/
const map = new Map({
basemap: {
baseLayers: [layer],
}
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [110.884, 27.285],
zoom: 4
});
query.executeQueryPBF(queryUrl, queryObject).then(function (results) {
// results.graphics contains the graphics returned from query
console.log(results)
results.features.forEach(function (item) {
//实例化Graphic
var feature = new Graphic({
geometry: item.geometry,
attributes: item.attributes,
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "blue",
size: "8px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 3 // points
}
},
popupTemplate: {
title: "{name}",
content: "具体信息:{type} {stationid}"
}
});
view.graphics.add(feature);
});
view.goTo({
target: view.graphics
});
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>3、post请求实现
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Intro to ImageryLayer | Sample | ArcGIS API for JavaScript 4.23
</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.23/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require(["esri/Map", "esri/views/MapView",
"esri/layers/TileLayer",
"esri/Graphic",], (
Map,
MapView,
TileLayer,
Graphic
) => {
const layer = new TileLayer({
url: "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer",
format: "jpgpng" // server exports in either jpg or png format
});
/**************************
* Add image layer to map
*************************/
const map = new Map({
basemap: {
baseLayers: [layer],
}
// basemap:"streets-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [110.884, 27.285],
zoom: 4
});
let url = 'https://ncportal.geoscene.cn/server/rest/services/Hosted/station1/FeatureServer/0/query'
let data = {};
data.where = "1=1";
data.geometry = "{'rings': [[[107.11666700000018,29.166667000000132],[114.50000000000011,29.60000000000008],[114.35000000000014,25.400000000000148],[107.18333300000006,24.966667000000143],[107.11666700000018,29.166667000000132]]]}";
data.geometryType = "esriGeometryPolygon";
data.spatialRel = "esriSpatialRelIntersects";
data.units = "esriSRUnit_Meter";
data.returnGeometry = true;
data.f = "pjson";
data.outFields = "*";
console.log(data);
$(document).ready(function () {
$.ajax({
type: 'post',
url: url,
async: false,
dataType: 'jsonp',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
data: data,
success: function (resData) {
//alert("请求数据成功");
resData.features.forEach(function (item) {
let point = {
type: "point", // autocasts as new Point()
longitude: item.geometry.x,
latitude: item.geometry.y
};
//实例化Graphic
var feature = new Graphic({
geometry: point,
attributes: item.attributes,
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "blue",
size: "8px", // pixels
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 3 // points
}
},
popupTemplate: {
title: "{name}",
content: "具体信息:{type} {stationid}"
}
});
view.graphics.add(feature);
});
view.goTo({
target: view.graphics
});
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("连接数据的时候出现了：" + textStatus);
}
})
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>参考资料：
ArcGIS Server 动态地图服务Query 请求问题小结_孙同学的一个笔记本的博客-CSDN博客_arcgis query
2889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
