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>