arcgisapi通过绘制矩形查询要素
实现的效果就是在图层上拖动绘制矩形框，框选图层中的要素，然后统计选中的要素个数，并获取到要素中的属性值。
根据arcgis api for js的官⽹改写的，官⽹中⽤到了⼀个table组件，我修改之后是使⽤alert提⽰信息显⽰的查询结果，原⽂地址：代码：
⾸先需要引⼊的⽂件
import Map from "@arcgis/core/Map"
import FeatureLayer from "@arcgis/core/layers/FeatureLayer"
import MapView from "@arcgis/core/views/MapView"
import CSVLayer from "@arcgis/core/layers/CSVLayer"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel"
import Bamap from "@arcgis/core/Bamap"
getudtoimport * as geometryEngineAsync from "@arcgis/core/geometry/geometryEngineAsync";
定义的⽅法：
initmap(){
// U the states featurealayer as a bamap
const states = new FeatureLayer({
url: "/arcgis/rest/rvices/USA/MapServer/2",
renderer: {
type: "simple",
symbol: {
type: "simple-fill",
color: "#f0ebe4",
outline:{
color: "#DCDCDC",
width: "0.5px"
}
}
},
spatialReference: {
wkid: 102003
},
多多包涵effect: "drop-shadow(-10px, 10px, 6px gray)",
});
// national parks csv layer
const csvLayer = new CSVLayer({
url: "ubatsukh.github.io/arcgis-js-api-demos/devsummit2021/csvLayer-nps/data/nps_establishments.csv",
delimiter: ",",
popupTemplate: {
title: "{unit_name}",
content:
"Established on <b>{date_est}</b> <br/><br/> {description}"
},
// renderer: tRenderer()
});
let csvLayerView;
csvLayer.when(() => {
view.whenLayerView(csvLayer).then(function (layerView) {
csvLayerView = layerView;
});
})
.catch(errorCallback);
const map = new Map({
bamap: new Bamap({
baLayers: [states]
}),
layers: [csvLayer]
});
// initialize the view with USA Contiguous Albers Equal Area Conic
// projection and t the extent to the states
const view = new MapView({
container: "viewDiv",
map: map,
extent: {
type: "extent",
spatialReference: {
wkid: 102003
},
xmax: 2275062,
xmin: -2752064,
ymax: 1676207,
ymin: -1348080,
},
constraints: {
snapToZoom: fal,
minScale: 50465153
},
spatialReference: {
wkid: 102003
},
background: {
color: "white"
cat eye
}
});
// polygonGraphicsLayer will be ud by the sketchviewmodel
// show the polygon being drawn on the view
const polygonGraphicsLayer = new GraphicsLayer();
map.add(polygonGraphicsLayer);
/
/ add the lect by rectangle button the view
view.ui.add("lect-by-rectangle", "top-left");
const lectButton = ElementById("lect-by-rectangle");
// click event for the lect by rectangle button
lectButton.addEventListener("click", () => {
view.popup.clo();
});
// add the clear lection button the view
view.ui.add("clear-lection", "top-left");
});
// create a new sketch view model t its layer
const sketchViewModel = new SketchViewModel({
view: view,
layer: polygonGraphicsLayer
});
// Once ur is done drawing a rectangle on the map
// u the rectangle to lect features on the map and table
<("create", async (event) => {
if (event.state === "complete") {
/
/ this polygon will be ud to query features that interct it
const geometries = aphics.map(function(graphic){ ry
});
初始化const queryGeometry = await geometryEngineAsync.Array()); lectFeatures(queryGeometry);
}
});
// This function is called when ur completes drawing a rectangle
// on the map. U the rectangle to lect features in the layer and table
function lectFeatures(geometry) {
if (csvLayerView) {
// create a query and t its geometry parameter to the
// rectangle that was drawn on the view
const query = {
geometry: geometry,
outFields: ["*"]
};
// query graphics from the csv layer view. Geometry t for the query
// can be polygon for point features and only intercting geometries are returned csvLayerView.queryFeatures(query)
weapon是什么意思
.then((results) => {
if (results.features.length === 0) {
clearSelection();
} el {
alert("选中的要素个数为："+results.features.length );
// alert(results.features);
var re = "";
for(var i=0;i<results.features.length;i++){
var feature = results.features[i];
re += feature.attributes["unit_name"]+"|";
}
alert(re);
}
})
.catch(errorCallback);
}
}
function errorCallback(error) {
console.log("error happened:", ssage);
}
}
⽤到的html代码：
<div class="body">
<div id="viewDiv"></div>
<div id="lect-by-rectangle" class="esri-widget esri-widget--button esri-widget esri-interactive" title="Select features by rectangle">
<span class="esri-icon-checkbox-unchecked"></span>
</div>
<div id="clear-lection" class="esri-widget esri-widget--button esri-widget esri-interactive"
title="Clear lection">
<span class="esri-icon-era"></span>
</div>
</div>
完整代码：
<template>
<div class="body">
<div id="viewDiv"></div>
<div id="lect-by-rectangle" class="esri-widget esri-widget--button esri-widget esri-interactive" title="Select features by rectangle">
<span class="esri-icon-checkbox-unchecked"></span>
</div>
<div id="clear-lection" class="esri-widget esri-widget--button esri-widget esri-interactive"
title="Clear lection">
<span class="esri-icon-era"></span>
</div>
</div>
</template>
<script>
import Map from "@arcgis/core/Map"
import FeatureLayer from "@arcgis/core/layers/FeatureLayer"
import MapView from "@arcgis/core/views/MapView"
import CSVLayer from "@arcgis/core/layers/CSVLayer"
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"
import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel"
import Bamap from "@arcgis/core/Bamap"
import * as geometryEngineAsync from "@arcgis/core/geometry/geometryEngineAsync"; export default {
methods:
{
initmap(){
顺其自然英语// U the states featurealayer as a bamap
const states = new FeatureLayer({
url: "/arcgis/rest/rvices/USA/MapServer/2",
renderer: {
type: "simple",
symbol: {
type: "simple-fill",
color: "#f0ebe4",
outline:{
color: "#DCDCDC",
width: "0.5px"
}
}
},
spatialReference: {
wkid: 102003
},
effect: "drop-shadow(-10px, 10px, 6px gray)",
});
// national parks csv layer
const csvLayer = new CSVLayer({
url: "ubatsukh.github.io/arcgis-js-api-demos/devsummit2021/csvLayer-nps/data/nps_establishments.csv", delimiter: ",",
popupTemplate: {
title: "{unit_name}",
content:
"Established on <b>{date_est}</b> <br/><br/> {description}"
},
// renderer: tRenderer()
});
let csvLayerView;
csvLayer.when(() => {
view.whenLayerView(csvLayer).then(function (layerView) {
csvLayerView = layerView;
});
})
.
catch(errorCallback);
const map = new Map({
bamap: new Bamap({
baLayers: [states]
}),
layers: [csvLayer]
});
// initialize the view with USA Contiguous Albers Equal Area Conic
// projection and t the extent to the states
const view = new MapView({
container: "viewDiv",
map: map,
extent: {
可意type: "extent",
spatialReference: {
wkid: 102003
},
xmax: 2275062,
xmin: -2752064,
ymax: 1676207,
ymin: -1348080,
},
constraints: {
snapToZoom: fal,
minScale: 50465153
},
spatialReference: {
wkid: 102003
},
background: {
color: "white"
}
});
/
/ polygonGraphicsLayer will be ud by the sketchviewmodel
// show the polygon being drawn on the view
const polygonGraphicsLayer = new GraphicsLayer();
map.add(polygonGraphicsLayer);
// add the lect by rectangle button the view
view.ui.add("lect-by-rectangle", "top-left");
const lectButton = ElementById("lect-by-rectangle");
// click event for the lect by rectangle button
lectButton.addEventListener("click", () => {
view.popup.clo();
});
// add the clear lection button the view
view.ui.add("clear-lection", "top-left");
});europe乐队
// create a new sketch view model t its layer
const sketchViewModel = new SketchViewModel({
view: view,
layer: polygonGraphicsLayer
});
/
/ Once ur is done drawing a rectangle on the map
// u the rectangle to lect features on the map and table
<("create", async (event) => {
if (event.state === "complete") {
// this polygon will be ud to query features that interct it
const geometries = aphics.map(function(graphic){ ry
});
const queryGeometry = await geometryEngineAsync.Array()); lectFeatures(queryGeometry);
}
});
// This function is called when ur completes drawing a rectangle
// on the map. U the rectangle to lect features in the layer and table
function lectFeatures(geometry) {
if (csvLayerView) {
// create a query and t its geometry parameter to the
// rectangle that was drawn on the view
const query = {
geometry: geometry,
outFields: ["*"]
};
// query graphics from the csv layer view. Geometry t for the query
// can be polygon for point features and only intercting geometries are returned csvLayerView.queryFeatures(query)
.then((results) => {
if (results.features.length === 0) {
clearSelection();
} el {
alert("选中的要素个数为："+results.features.length );
// alert(results.features);
var re = "";
for(var i=0;i<results.features.length;i++){
var feature = results.features[i];
re += feature.attributes["unit_name"]+"|";
}
alert(re);
}
})
.catch(errorCallback);
}
}
阿根廷英文function errorCallback(error) {
console.log("error happened:", ssage);
}
}
},
mounted(){
this.initmap();
},
}
</script>
<style scoped>
.body{
padding: 0;
2014浙江高考成绩查询margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
height: 100%;
width: 100%;
}
</style>
