ArcGis for js 4.x 要素操作

 FeatureLayer 要素增删改代码如下：

<template>
	
		<view class="map" id="mapView">
			<view class="custom_popup">
				<scroll-view class="scrollView" scroll-y="true" >
					<view v-if="featureDatas != null">
						<!--双向绑定-->
						<input v-model="featureDatas.objectid"/>
						<input v-model="featureDatas.ghyt"/>
						<input v-model="featureDatas.tdly"/>
						<input v-model="featureDatas.tdxz"/>
						<input v-model="featureDatas.xzq"/>
					</view>
					
				</scroll-view>
				<button class="submit" @click="submit" :disabled="isButton">提交</button>
			</view>
			
		</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 TitleLayer from "@arcgis/core/layers/TileLayer.js";
import FeatureLayer from "@arcgis/core/layers/FeatureLayer.js"
import PopupTemplate from "@arcgis/core/PopupTemplate.js"
import Popup from "@arcgis/core/widgets/Popup.js";
import Attribution from "@arcgis/core/widgets/Attribution.js";
import Graphic from "@arcgis/core/Graphic.js";
import Point from "@arcgis/core/geometry/Point.js";
import SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol.js";
import { onMounted,ref } from "vue";	

// 点选图层
var clickGraphic = new Graphic();
// 设置数据并初始化
const featureDatas = ref(Attribution);
featureDatas.value = null;
// 布尔类型
const isButton = ref(true);

var newPoint = new Point();

onMounted(()=>{
	init();
});


// 点击提交事件
const submit = function(){
	// 当前按钮状态
	console.log("isButton:"+isButton.value);
	// 双向绑定的数据
	console.log(featureDatas.value);

	// 自定义graphic
	var newGraphic = new Graphic({
		attributes:featureDatas.value,
		geometry:clickGraphic[0].geometry
	});
	
	console.log("clickGraphic",clickGraphic[0]);
	console.log("newGraphic",newGraphic);

	
	// 新增
	featureLayer.applyEdits({
		addFeatures:[newGraphic]
	}).then(function(editResult){
		console.log("新增成功",editResult);
	}).catch(function(error){
		console.log("新增失败",error);
	});

	// 更新
	/* featureLayer.applyEdits({
		updateFeatures:[newGraphic]
	}).then(function(editResult){
		console.log("更新成功",editResult);
	}).catch(function(error){
		console.log("添加失败",error);
	}); */
	
	// 删除
	/* featureLayer.applyEdits({
		deleteFeatures:[newGraphic]
	}).then(function(editResult){
		console.log("删除成功",editResult);
	}).catch(function(error){
		console.log("删除失败",error);
	}); */
	
	featureLayer.refresh();
	
}

// map初始化
const map = new Map({
	basemap:{
		baseLayers:[
			new TitleLayer({
				url:"http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity_Mobile/MapServer"
			})
		]
	}
});



// 加载FeatureLayer
const featureLayer = new FeatureLayer({
	url:"http://116.141.0.114:48080/geoscene/rest/services/%E5%BE%81%E8%80%8C%E6%9C%AA%E4%BE%9B/FeatureServer/0",
	outFields: ["*"], //加载所有要素字段
	opacity:0.5,//透明度
	//popupTemplate: TuCeng03TC, //加载模板,
	//definitionExpression: "",// 筛查
	labelsVisible:false,//禁用显示标注
	// 渲染
	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,
			},
		},
	},
	
});


// 地图初始化
const init = function(){
	// mapView容器
	const mapView = new MapView({
		// 长春坐标系
		center:[125.331345,43.8328],
		// 初始层级
		zoom:10,
		container:"mapView",
		map:map,
		constraints: {
			minZoom: 10,// 最小层级
			maxZoom: 19 // 最大层级
		}
	});
	
	// 清除底部powered by ESRI
	mapView.ui.remove("attribution");
	
	// 添加featureLayer(两种方法都可以)
	//mapView.map.add(featureLayer);
	map.add(featureLayer);
	
	// mapView点击事件
	// 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({
					target:graphic,
					zoom:15
				});
				
				 // 如果点选到图层上的要素，则输出要素的ID
				var objId = response.results.map(function(result) {
				   return result.graphic.attributes[result.graphic.layer.objectIdField];
				 });
				 console.log("点选到的要素ID: ", objId[0]);
				 
				 clickGraphic = response.results.map(function(result) {
						return result.graphic;
				 });
				
				  
				var attributes = clickGraphic[0].attributes;
				featureDatas.value = attributes;
				// 判断是否有数据
				if(attributes.length > 0){
					isButton.value = !isButton.value;
				}else{
					isButton.value = !isButton.value;
				}
				// 如果点选到图层上的要素，则输出全部属性
				console.log("点选的图层数据：",featureDatas.value);
				
				 
				// 默认选中高亮
				mapView.whenLayerView(graphic.layer).then((layerView)=>{
					highlight = layerView.highlight(graphic)
				});
				
					
			 }else{
				 // 清空数据
				 featureDatas.value = null;
				 // 按钮状态
				 isButton.value = true;
				 console.log("点选无果");
				 
				  // 创建点
				  newPoint = {
					  type:'point',
					  x:event.mapPoint.x,
					  y:event.mapPoint.y,
					  spatialReference:mapView.spatialReference
				  };
				  
				  // 自定义点
				  console.log(newPoint);
				 
				  
				  
			 }
		})
	});
		 
	

};

	
</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%;
		padding: 0;
		margin: 0;
		
		.custom_popup{
			width: 50%;
			height: 30%;
			border: 1px solid red;
			background-color: #fff;
			position: absolute;
			z-index: 2;
			top: 0;
			right: 0;
			
			input{
				border: 1px solid yellow;
			}
			
			.scrollView{
				width: 100%;
				height:80%;
				border: 1px solid green;
			}
				
			.submit{
				background-color: blue;
			}
			
		}
	
	}
	
</style>