|
|
@@ -17,7 +17,6 @@ import { register } from "ol/proj/proj4";
|
|
|
import GeometryCollection from 'ol/geom/GeometryCollection.js';
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import { useStore } from "vuex";
|
|
|
-import Polygon from 'ol/geom/Polygon.js';
|
|
|
proj4.defs(
|
|
|
"EPSG:38572",
|
|
|
"+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"
|
|
|
@@ -30,7 +29,8 @@ export let mapData = reactive({
|
|
|
point: null,
|
|
|
selectPointArr: [],
|
|
|
isPointHide: null,
|
|
|
- disabledForm : false
|
|
|
+ disabledForm : false,
|
|
|
+ selectPoint:''
|
|
|
});
|
|
|
|
|
|
function resetMapData(){
|
|
|
@@ -41,6 +41,7 @@ function resetMapData(){
|
|
|
mapData.selectPointArr= []
|
|
|
mapData.isPointHide= null
|
|
|
mapData.disabledForm= false
|
|
|
+ mapData.selectPoint= ''
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
@@ -119,14 +120,6 @@ class AuthenticMap {
|
|
|
if(e.type === "modifyend"){
|
|
|
mapData.isEditArea = false;
|
|
|
mapData.isEditArea = true;
|
|
|
- const features = e.mapBrowserEvent.map.getFeaturesAtPixel(e.mapBrowserEvent.pixel);
|
|
|
- console.log('features',features);
|
|
|
- if (features.length > 0) {
|
|
|
- const feature = features[0];
|
|
|
- const geometry = feature.getGeometry();
|
|
|
- const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
|
|
|
- console.log('Modified polygon coordinates:', coordinates);
|
|
|
- }
|
|
|
}
|
|
|
}, function(e){
|
|
|
let f = null
|
|
|
@@ -160,20 +153,11 @@ class AuthenticMap {
|
|
|
this.kmap.fit(extent)
|
|
|
}
|
|
|
|
|
|
+ //撤销上一个点
|
|
|
undoLastDraw() {
|
|
|
- const features = this.kmap.getLayerFeatures();
|
|
|
- features.forEach((feature) => {
|
|
|
- // console.log("feature", feature, mapData.point);
|
|
|
- const coord = feature.getGeometry().getCoordinates()[0];
|
|
|
- });
|
|
|
- // this.kmap.setFeatureCursor("move")
|
|
|
- // const lastFeature = this.drawnFeatures.pop();
|
|
|
- // if (lastFeature) {
|
|
|
- // // const features = this.kmap.getLayerFeatures();
|
|
|
- // console.log("this", this.kmap.polygonLayer.source);
|
|
|
- // this.kmap.polygonLayer.source.removeFeature(lastFeature);
|
|
|
- // // this.kmap.getLayers().getArray()[1].getSource().removeFeature(lastFeature);
|
|
|
- // }
|
|
|
+ // const coordinates = this.kmap.getLayerFeatures()[0].getGeometry().getCoordinates()
|
|
|
+ // coordinates[0][0].pop()
|
|
|
+ // this.kmap.getLayerFeatures()[0].getGeometry().getCoordinates(coordinates)
|
|
|
}
|
|
|
|
|
|
// 取消地块
|
|
|
@@ -284,38 +268,47 @@ class AuthenticMap {
|
|
|
});
|
|
|
mapData.selectPointArr = [];
|
|
|
}
|
|
|
+
|
|
|
+ //选中点位方法
|
|
|
+ selectPonitFun(map,evt){
|
|
|
+ map.forEachFeatureAtPixel(evt.pixel, function (f, layer) {
|
|
|
+ if (
|
|
|
+ layer instanceof VectorLayer &&
|
|
|
+ (
|
|
|
+ layer.get("name") === "defaultPolygonLayer")
|
|
|
+ ) {
|
|
|
+ const features = map.getFeaturesAtPixel(evt.pixel);
|
|
|
+ if (features.length > 0) {
|
|
|
+ const feature = features[0];
|
|
|
+ const geometry = feature.getGeometry();
|
|
|
+ const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
|
|
|
+ if(Array.isArray(coordinates)){
|
|
|
+ ElMessage.warning("编辑中")
|
|
|
+ }else{
|
|
|
+ ElMessage.success("已选择该点位")
|
|
|
+ mapData.selectPoint = coordinates
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
// 地图点击事件
|
|
|
addMapSingerClick() {
|
|
|
let that = this;
|
|
|
that.kmap.on("singleclick", (evt) => {
|
|
|
if(mapData.curPointData.id && !mapData.disabledForm && mapData.selectPointArr.length===1){
|
|
|
- ElMessage.warning("编辑中")
|
|
|
- that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
|
|
|
- if (
|
|
|
- layer instanceof VectorLayer &&
|
|
|
- (
|
|
|
- layer.get("name") === "defaultPolygonLayer")
|
|
|
- ) {
|
|
|
- console.log('09090909');
|
|
|
- // const features = e.mapBrowserEvent.map.getFeaturesAtPixel(e.mapBrowserEvent.pixel);
|
|
|
- // console.log('features',features);
|
|
|
- // if (features.length > 0) {
|
|
|
- const feature = mapData.selectPointArr[0];
|
|
|
- const geometry = feature.getGeometry();
|
|
|
- console.log('geometry',geometry);
|
|
|
- const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
|
|
|
- console.log('Modified polygon coordinates:', coordinates);
|
|
|
- // }
|
|
|
- }
|
|
|
- });
|
|
|
+ that.selectPonitFun(that.kmap.map,evt)
|
|
|
return;
|
|
|
}
|
|
|
if(!mapData.curPointData.id && mapData.isEdit){
|
|
|
- ElMessage.warning("编辑中")
|
|
|
+ // ElMessage.warning("编辑中")
|
|
|
+ that.selectPonitFun(that.kmap.map,evt)
|
|
|
return;
|
|
|
}
|
|
|
+ //判断是否是导入的数据
|
|
|
if(that.store.state.authentic.isEditStatus){
|
|
|
- ElMessage.warning("编辑中")
|
|
|
+ that.selectPonitFun(that.kmap.map,evt)
|
|
|
return;
|
|
|
}
|
|
|
let num = 0;
|
|
|
@@ -362,40 +355,33 @@ class AuthenticMap {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ deletePointFun(point,callback){
|
|
|
+ const coordinates = point.getGeometry().getCoordinates();
|
|
|
+ let array = coordinates[0][0]
|
|
|
+ const index = array.findIndex(subArray => subArray.includes(mapData.selectPoint))
|
|
|
+ // 如果点存在，则删除它
|
|
|
+ if (index > -1) {
|
|
|
+ coordinates[0][0].splice(index, 1); // 删除点
|
|
|
+ // 更新多边形的坐标
|
|
|
+ point.getGeometry().setCoordinates(coordinates); // 更新几何形状
|
|
|
+ }
|
|
|
+ callback && callback()
|
|
|
+ }
|
|
|
+
|
|
|
// 移除点的功能
|
|
|
- removePoint() {
|
|
|
- // console.log('this.kmap.getLayerFeatures',this.kmap.getLayerFeatures());
|
|
|
- // const polygonFeature = this.kmap.getLayerFeatures()[0]
|
|
|
- // var coordinateToRemove = [113.61271651653868, 23.58619390922549]; // 示例坐标，应替换为实际坐标
|
|
|
- // var geometry = polygonFeature.getGeometry();
|
|
|
- // var coordinates = geometry.getCoordinates();
|
|
|
- // console.log('coordinates',coordinates);
|
|
|
+ removePoint(callback) {
|
|
|
// 获取多边形的所有坐标
|
|
|
- console.log('arr',mapData.selectPointArr);
|
|
|
const features = this.kmap.getLayerFeatures()
|
|
|
- features.forEach(item =>{
|
|
|
- if(item.get("id")===mapData.selectPointArr[0].get("id")){
|
|
|
- let coordinates = item.getGeometry().getCoordinates();
|
|
|
- // 删除多边形最后一个坐标点
|
|
|
- coordinates[0][0].pop();
|
|
|
- // 更新多边形的坐标
|
|
|
- item.getGeometry().setCoordinates(coordinates);
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- // // 查找要删除的点的索引
|
|
|
- // var indexToRemove = coordinates[0].findIndex(function(coordinate) {
|
|
|
- // return coordinate[1][0] === coordinateToRemove[0] && coordinate[1][1] === coordinateToRemove[1];
|
|
|
- // });
|
|
|
- // console.log('indexToRemove',indexToRemove);
|
|
|
-
|
|
|
- // // 如果点存在，则删除它
|
|
|
- // if (indexToRemove > -1) {
|
|
|
- // coordinates[0].splice(indexToRemove, 1); // 删除点
|
|
|
- // geometry.setCoordinates(coordinates); // 更新几何形状
|
|
|
- // }
|
|
|
- // console.log('geometry',geometry);
|
|
|
- // console.log('coordinates',coordinates);
|
|
|
+ if(mapData.point){
|
|
|
+ this.deletePointFun(mapData.point,callback)
|
|
|
+ }else{
|
|
|
+ if(mapData.selectPointArr.length<1) return ElMessage.warning("请选择点位")
|
|
|
+ features.forEach(item =>{
|
|
|
+ if(item.get("id")===mapData.selectPointArr[0].get("id")){
|
|
|
+ this.deletePointFun(item,callback)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 获取所有选中点位
|
wangsisi