ArcGIS Map SDK FeatureLayer点击查询要素与弹框展示
代码如下：
<html lang="en">
<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 Maps SDK for JavaScript
4.27
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.27/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/views/MapView",
"esri/layers/FeatureLayer",
], (Map, Graphic, MapView, FeatureLayer) => {
// 加载ArcGIS官方提供的FeatureLayer
const layer = new FeatureLayer({
// autocasts as new PortalItem()
portalItem: {
id: "234d2e3f6f554e0e84757662469c26d3"
},
outFields: ["*"]
});
// 加载本地发布的FeatureLayer
// const layer = new FeatureLayer({
// url: "http://192.168.1.1:6080/arcgis/rest/services/xian/xian_xzqh/MapServer/0",
// outFields: ["*"]
// });
const map = new Map({
basemap: "gray-vector",
layers: [layer]
});
const view = new MapView({
container: "viewDiv",
map: map,
popupEnabled: false,
popup: {
dockEnabled: true, // 是否可以靠边停靠
dockOptions: {
buttonEnabled: false, // 是否展示靠边停靠按钮
breakpoint: false,
position: "bottom-right"
}
}
});
//create graphic for mouse point click
const pointGraphic = new Graphic({
symbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
color: [0, 0, 139],
outline: {
color: [255, 255, 255],
width: 1.5
}
}
});
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);
queryFeatures(event);
});
function queryFeatures(screenPoint) {
const point = view.toMap(screenPoint);
layer
.queryFeatures({
geometry: point,
// 设置查询距离
// distance: 0.5,
// units: "miles",
// 默认查询方式
distance: null,
units: null,
spatialRelationship: "intersects",
returnGeometry: false,
returnQueryGeometry: true,
outFields: ["*"]
})
.then((featureSet) => {
pointGraphic.geometry = point;
view.graphics.add(pointGraphic);
view.openPopup({
location: point,
features: featureSet.features,
featureMenuOpen: true
});
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>