ArcGIS for js 4.x FeatureLayer 查询

安装arcgis for js 4.x 依赖：

npm install @arcgis/core

查询代码如下：

<template>
	<view class="map" id="mapView"></view>
</template>

<script setup>
import "@arcgis/core/assets/esri/themes/light/main.css";
import Map from '@arcgis/core/Map.js';
import MapView from "@arcgis/core/views/MapView.js";
import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js'	
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
import Locate from "@arcgis/core/widgets/Locate.js";
import Compass from "@arcgis/core/widgets/Compass.js";
import Query from "@arcgis/core/rest/support/Query.js";
import { onMounted } from "vue";

onMounted(() =>{
	initTDTMap();
});
	
	
	//天地图加载
	const initTDTMap = () =>{
		let webLayer = new WebTileLayer({
			urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={col}&TILEROW={row}&TILEMATRIX={level}&tk=352d4b1313777a8643542046a28d17e5",
			subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7']
		});
		
		
		const map = new Map({
			basemap:{
				baseLayers:[webLayer]
			}
		});
		
		 const mapView = new MapView({
			// 默认中心点位
			center: [125.338, 43.882],
			map: map,
			// 初始层级
			zoom: 10,
			container: "mapView",
			constraints: {
				minZoom: 9,// 最小层级
				maxZoom: 17// 最大层级
			},
		});
		
		let compass = new Compass({
				view: mapView
			});
			
		let locateWidget = new Locate({
				view: mapView
			});
			
			
		// 移动默认的放大缩小按钮
		mapView.ui.move("zoom", "bottom-right");
			
		mapView.ui.add([compass, locateWidget], "bottom-left");
		
		mapView.ui.padding = {top:0,left:0,right:10,bottom:60}	
		// 清除底部powered by ESRI
		mapView.ui.remove("attribution");
		
		
		// 加载FeatureLayer
		const featureLayer = new FeatureLayer({
			url:"http://116.141.0.114:48080/geoscene/rest/services/%E8%80%95%E4%BF%9D/%E5%8F%8C%E9%98%B3%E5%8C%BA%E5%9B%BE%E6%96%91/FeatureServer/0",
			outFields: ["*"], //加载所有要素字段
			opacity:0.5,//透明度
			//popupTemplate: TuCeng03TC, //加载模板,
			//definitionExpression: "",// 筛查
			// 渲染
			renderer: {
				type: "simple",
				symbol: {
					type: "simple-fill",//simple-line(线)、simple-fill（面）
					style: "solid",// solid 全部填充、cross十字交错、diamond菱形、square矩形、triangle三角形
					color: [255,20,60, 0.4],
					outline: {
						color: [255, 0, 0, 1],
						width: 2,
					},
				},
			}
		});
		
		
		
		// 添加featureLayer(两种方法都可以)
		//mapView.map.add(featureLayer);
		map.add(featureLayer);
		
		queryFeature(featureLayer);
		
	}
	
function queryFeature(featureLayer){
	 var query = new Query();
	    //query.where = "ssc = '常明村'"; // 设置查询条件
	    query.where = "1=1";// 查询全部
		query.returnGeometry = true; // 设置是否返回几何信息
	    //query.outFields = ["*"]; // 设置返回的字段
		query.outFields = ["objectid","sjzlrq","tbmj"];
		
		//使用queryFeatures方法执行查询
		featureLayer.queryFeatures(query).then(function(results){
			// 处理查询结果
			console.log(results.features);
		}).catch(function(error){
		    // 错误处理
		    console.error("查询失败: ", error);
		})
		
		
}
		
	
</script>

<style lang="scss" scoped>
    .map ::v-deep .esri-view-surface.esri-view-surface--touch-none:focus::after {
		outline: none !important;
	}
	.map {
		width: 100%;
		/* height: 185vw; */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	#mapView{
		width: 100%;
		height:100%;
	}
	
</style>