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

破z晓

已于 2024-06-26 14:20:45 修改

阅读量464

点赞数 3

文章标签： arcgis javascript 开发语言

于 2024-06-07 09:38:08 首次发布

本文链接：https://blog.csdn.net/qq_19688207/article/details/139515177

版权

安装arcgis for js 4.x 依赖：

npm install @arcgis/core

一、FeatureLayer 加载

代码如下：

<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 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");

// 模板
				var TuCeng03TC = {
					"title": "项目名称：{xmmc}",
					"content": `
								<b>序号:</b> {unique_val}<br>
								<b>合同编号:</b> {htbh}<br>
								<b>电子监管号:</b> {dzjgh}<br>
								<b>出让方式:</b> {crfs}<br>
								<b>受让人:</b> {crr}<br>
								<b>批准日期:</b> {pzrq}<br>
								<b>批准文号:</b> {pzwh}<br>
								<b>土地用途:</b> {tdyt}<br>
								<b>宗地编号:</b> {zdbh}<br>
								<b>宗地位置:</b> {zdwz}<br>
								<b>行政区:</b> {xzq}<br>
								<b>出让面积:</b> {crmj}<br>
								<b>出让金交纳:</b> {crjjn}<br>
								<b>项目状态:</b> {xmzt}<br>
								<b>约定交地时间:</b> {ydjdsj}<br>
								<b>约定开工时间:</b> {ydkgsj}<br>
								<b>约定竣工时间:</b> {ydjgsj}<br>
								<b>变更交地时间:</b> {bgjdsj}<br>
								<b>变更开工时间:</b> {bgkgsj}<br>
								<b>变更竣工时间:</b> {bgjgsj}<br>
								<b>实际交地时间:</b> {sjjdsj}<br>
								<b>实际开工时间:</b> {sjkgsj}<br>
								<b>实际竣工时间:</b> {sjjgsj}<br>
								<b>土地来源:</b> {tdly}<br>
								<b>农转征面积:</b> {nzzmj}<br>
								<b>国有未利用地:</b> {gywlyd}<br>
								<b>国有存量建设用地:</b> {gycljsyd}<br>
								<b>划拨补办现状出让:</b> {hbbbxzcr}<br>
								<b>划拨补办改变现状出让:</b> {hbbbgbxzcr}<br>
								<b>其他存量:</b> {qtcl}<br>
								<b>最后巡查时间:</b> {zhxcsj}<br>
								<b>巡查人员:</b> {xcry}<br>
								<b>备注:</b> {bz}<br>
			                    `
				};

// 加载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>
    .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>

二、点选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);
				mapView.goTo({
					target:graphic,
					zoom:13
				});
				
				// 如果点选到图层上的要素，则输出要素的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("点选无果");
			 }
		})
	});