ArcGIS for js 4.x FeatureLayer 加载、点选、高亮

安装arcgis for js 4.x 依赖：

npm install @arcgis/core

一、FeatureLayer 加载

代码如下：

<template>

	<view 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 TileLayer from '@arcgis/core/layers/TileLayer.js'
import WebTileLayer from '@arcgis/core/layers/WebTileLayer.js'
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
import Graphic from "@arcgis/core/Graphic.js";
import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol.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// 最大层级
		},
	});


// 清除底部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);


</script>

<style lang="scss" scoped>

	#mapView{
		width: 100%;
		height:100vh;
	}
	
	

</style>

二、点选FeatureLayer

代码如下：

    // featureLayer图斑点击事件
	mapView.on(['click'],function(event){
		mapView.hitTest(event).then(function(response){
				
			 if (response.results.length) {
				let clickLayer = response.results.filter((result) => {
					return result.graphic.layer === featureLayer;
				});
				
				// 获取绘制
				let graphic = clickLayer[0].graphic;
			
				
				// 点击后定位
				mapView.goTo(graphic);
				
				// 如果点选到图层上的要素，则输出要素的ID
				var objId = response.results.map(function(result) {
				   return result.graphic.attributes[result.graphic.layer.objectIdField];
				 });
				console.log("点选到的要素ID: ", objId);
				

                // 如果点选到图层上的要素，则输出全部属性
				 var attributes = response.results.map(function(result) {
				    return result.graphic.attributes;
				  });
				 console.log("点选到的attributes: ", attributes);
					
			 }else{
				console.log("点选无果");
			 }
		})
	});
	

三、高亮

1、默认高亮

	// featureLayer图斑点击事件
	let highlight;// 默认高亮对象
	mapView.on(['click'],function(event){
		mapView.hitTest(event).then(function(response){
				// 清空上一次高亮-默认 
				/* if(highlight)
					highlight.remove(); */
				// 清空上一次高亮-自定义
				mapView.graphics.removeAll();
				
			 if (response.results.length) {
				let clickLayer = response.results.filter((result) => {
					return result.graphic.layer === featureLayer;
				});
				
				// 获取绘制
				let graphic = clickLayer[0].graphic;
			
				
				// 点击后定位
				mapView.goTo(graphic);
				
				/* // 如果点选到图层上的要素，则输出要素的ID
				var objId = response.results.map(function(result) {
				   return result.graphic.attributes[result.graphic.layer.objectIdField];
				 });
				 console.log("点选到的要素ID: ", objId);
				 
				 // 如果点选到图层上的要素，则输出全部属性
				 var attributes = response.results.map(function(result) {
				    return result.graphic.attributes;
				  });
				 console.log("点选到的attributes: ", attributes);
				 */
				// 默认选中高亮
				mapView.whenLayerView(graphic.layer).then((layerView)=>{
					highlight = layerView.highlight(graphic)
				});
				
				// 自定义选中高亮
				/* var symbol = new SimpleFillSymbol({
				    color: [255, 255, 0, 0.5], // 黄色半透明填充
				    outline: {
				        color: [255, 0, 0], // 红色边框
				        width: 2
				    }
				});
				graphic.symbol = symbol;
				mapView.graphics.add(graphic); */
					
			 }else{
				console.log("点选无果");
			 }
		})
	});
	

2、自定义高亮

// featureLayer图斑点击事件
	//let highlight;// 默认高亮对象
	mapView.on(['click'],function(event){
		mapView.hitTest(event).then(function(response){
				// 清空上一次高亮-默认 
				/* if(highlight)
					highlight.remove(); */
				// 清空上一次高亮-自定义
				mapView.graphics.removeAll();
				
			 if (response.results.length) {
				let clickLayer = response.results.filter((result) => {
					return result.graphic.layer === featureLayer;
				});
				
				// 获取绘制
				let graphic = clickLayer[0].graphic;
			
				
				// 点击后定位
				mapView.goTo(graphic);
				
				/* // 如果点选到图层上的要素，则输出要素的ID
				var objId = response.results.map(function(result) {
				   return result.graphic.attributes[result.graphic.layer.objectIdField];
				 });
				 console.log("点选到的要素ID: ", objId);
				 
				 // 如果点选到图层上的要素，则输出全部属性
				 var attributes = response.results.map(function(result) {
				    return result.graphic.attributes;
				  });
				 console.log("点选到的attributes: ", attributes);
				 */
				// 默认选中高亮
				/* mapView.whenLayerView(graphic.layer).then((layerView)=>{
					highlight = layerView.highlight(graphic)
				}); */
				
				// 自定义选中高亮
				var symbol = new SimpleFillSymbol({
				    color: [255, 255, 0, 0.5], // 黄色半透明填充
				    outline: {
				        color: [255, 0, 0], // 红色边框
				        width: 2
				    }
				});
				graphic.symbol = symbol;
				
				mapView.graphics.add(graphic);
					
			 }else{
				console.log("点选无果");
			 }
		})
	});