admin管理员组文章数量:1650782
我们在做系统开发时,经常会遇到,要查询指定范围内包含的要素。原理很简单就是面内包含的要素。
arcgis featurelayer 可以实现这个功能。使用到的接口 是featurelayer .queryFeatures(options),返回结果是FeatureSet。
我实现了一个 以鼠标点击点为中心,指定为半径范围内包含的要素。
layer.queryFeatures({
geometry: geo, // 查询中心点
distance: distance,//半径
units: units, //半径的距离单位 英里
spatialRelationship: "intersects", // 地理关系 相交,
returnGeometry: false, // 是否范围序号要素的地理信息
returnQueryGeometry: true,
outFields: ["*"],//查询属性表中哪个字段 “*”的意思是全部字段
})
全部代码如下:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Basic Querying in FeatureLayer | Sample | ArcGIS API for JavaScript 4.23</title>
<link rel="stylesheet" href="https://js.arcgis/4.23/esri/themes/light/main.css" />
<script src="https://js.arcgis/4.23/"></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/widgets/Legend",
"esri/geometry/Circle"
], (Map, Graphic, MapView, FeatureLayer, Legend,Circle) => {
// Crime in SF
const layer = new FeatureLayer({
// autocasts as new PortalItem()
url: "https://192.168.1.30:6443/arcgis/rest/services/test/population/FeatureServer/0",
});
const map = new Map({
basemap: "gray-vector",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
popup: {
autoOpenEnabled: false,
dockEnabled: true,
dockOptions: {
// dock popup at bottom-right side of view
buttonEnabled: false,
breakpoint: false,
position: "bottom-right"
}
}
});
view.ui.add("optionsDiv", "top-right");
// additional query fields initially set to null for basic query
let distance = 1000;
let units = "miles";
//create graphic for mouse point click
const pointGraphic = new Graphic({
symbol: {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [173, 216, 230, 0.2],
outline: {
// autocasts as new SimpleLineSymbol()
color: [0, 0, 255],
width: 1
}
}
});
// 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", () => {
console.log(queryOpts.value)
switch (queryOpts.value) {
// values set for distance query
case "1英里":
distance = 1;
break;
case "10英里":
distance = 10;
break;
case "100英里":
distance = 100;
break;
case "1000英里":
distance = 1000;
break;
default:
// Default set to basic query
distance = 1;
}
})
layer.load()
.then(() => {
// Set the view extent to the data extent
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);
var circleGeometry = new Circle({
center: point, // 圆心
// numberOfPoints: 60, // 圆返回点个数
radius: distance, // 半径大小
radiusUnit: 'miles' // 半径单位
})
layer.queryFeatures({
geometry: point, // 查询中心点
distance: distance,//半径
units: units, //半径的距离单位 英里
spatialRelationship: "intersects", // 地理关系 相交,
returnGeometry: false, // 是否范围序号要素的地理信息
returnQueryGeometry: true,
outFields: ["*"],//查询属性表中哪个字段 “*”的意思是全部字段
})
.then((featureSet) => {
console.log(featureSet.queryGeometry)
// set graphic location to mouse pointer and add to mapview
pointGraphic.geometry = circleGeometry;
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="1英里">1英里</option>
<option value="10英里">10英里</option>
<option value="100英里">100英里</option>
<option value="1000英里">1000英里</option>
</select>
</div>
</body>
</html>
实例中我使用了自己发布的featurelayer地图,featurelayer地图发布教程地址:CSDN
也可以使用arcgis官网的一个url :
const layer = new FeatureLayer({
// autocasts as new PortalItem()
portalItem: {
id: "234d2e3f6f554e0e84757662469c26d3"
},
outFields: ["*"]
});
注意:queryFeatures方法是个异步操作,使用then 或者 await 接受 featureset 结果,异步相关只是可以参考:CSDN
效果展示:
本文标签: 要素范围内APIJavaScriptArcGIS
版权声明:本文标题:ArcGIS JavaScript for API(007)featurelayer 要素查询,查询指定范围内包含要素featurelayer .queryFeatures。 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729531336a1204844.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论