|
@@ -17,6 +17,8 @@ import { register } from "ol/proj/proj4";
|
|
|
import GeometryCollection from 'ol/geom/GeometryCollection.js';
|
|
|
import { ElMessage } from "element-plus";
|
|
|
import { useStore } from "vuex";
|
|
|
+import {bboxToFeature} from "../../utils/map";
|
|
|
+import * as turf from "@turf/turf";
|
|
|
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 +32,8 @@ export let mapData = reactive({
|
|
|
selectPointArr: [],
|
|
|
isPointHide: null,
|
|
|
disabledForm : false,
|
|
|
- selectPoint:''
|
|
|
+ selectPoint:'',
|
|
|
+ pointIndex:-1
|
|
|
});
|
|
|
|
|
|
function resetMapData(){
|
|
@@ -42,6 +45,7 @@ function resetMapData(){
|
|
|
mapData.isPointHide= null
|
|
|
mapData.disabledForm= false
|
|
|
mapData.selectPoint= ''
|
|
|
+ mapData.pointIndex=-1
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -93,7 +97,7 @@ class AuthenticMap {
|
|
|
},
|
|
|
});
|
|
|
|
|
|
- this.selectPointLayer = new KMap.VectorLayer("selectPointLayer", 9999, {
|
|
|
+ this.selectPointLayer = new KMap.VectorLayer("selectPointLayer", 10000, {
|
|
|
style: () => {
|
|
|
return new Style({
|
|
|
// geometry: new Point(coord[0][i]),
|
|
@@ -222,13 +226,11 @@ class AuthenticMap {
|
|
|
}
|
|
|
|
|
|
// 开始编辑
|
|
|
- startModify(type) {
|
|
|
+ startModify(type, feature) {
|
|
|
this.kmap.startModify();
|
|
|
this.kmap.endDraw();
|
|
|
if(type==='upload'){
|
|
|
- const arr = this.kmap.getLayerFeatures()
|
|
|
- const lastItem = arr[arr.length - 1]
|
|
|
- mapData.point = lastItem
|
|
|
+ mapData.point = feature
|
|
|
mapData.point.set("icon", "point-act");
|
|
|
this.kmap.polygonStyle(mapData.point);
|
|
|
mapData.isPointHide = mapData.point;
|
|
@@ -295,32 +297,60 @@ class AuthenticMap {
|
|
|
selectPonitFun(map,evt){
|
|
|
let that = this
|
|
|
map.forEachFeatureAtPixel(evt.pixel, function (f, layer) {
|
|
|
+ let d = 0.0002
|
|
|
+ let buff = bboxToFeature(evt.pixel[0] - d,evt.pixel[1] - d, evt.pixel[0]+ d, evt.pixel[1] + d)
|
|
|
if (
|
|
|
layer instanceof VectorLayer &&
|
|
|
(
|
|
|
layer.get("name") === "defaultPolygonLayer")
|
|
|
) {
|
|
|
- const features = map.getFeaturesAtPixel(evt.pixel);
|
|
|
- if (features.length > 0) {
|
|
|
- const feature = features[0];
|
|
|
+ const fs = map.getFeaturesAtPixel(evt.pixel);
|
|
|
+ let lonlat = map.getCoordinateFromPixel(evt.pixel);
|
|
|
+ if (fs.length > 0) {
|
|
|
+ const feature = fs[0];
|
|
|
const geometry = feature.getGeometry();
|
|
|
- const coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
|
|
|
- if(Array.isArray(coordinates)){
|
|
|
- ElMessage.warning("编辑中")
|
|
|
- }else{
|
|
|
+ let coordinates = geometry.getCoordinates()[0]; // 获取多边形的顶点坐标
|
|
|
ElMessage.success("已选择该点位")
|
|
|
let list
|
|
|
+ // if(mapData.selectPointArr.length>0){
|
|
|
+ // list = f.getGeometry().getCoordinates();
|
|
|
+ // }else{
|
|
|
+ // list = mapData.point.getGeometry().getCoordinates();
|
|
|
+ // }
|
|
|
+ // const arr = list[0][0].find(subArray => subArray.includes(coordinates))
|
|
|
+ // that.selectPointLayer.source.clear();
|
|
|
+ // let point = new Feature(new Point(arr));
|
|
|
+ // that.selectPointLayer.addFeature(point);
|
|
|
if(mapData.selectPointArr.length>0){
|
|
|
list = f.getGeometry().getCoordinates();
|
|
|
}else{
|
|
|
list = mapData.point.getGeometry().getCoordinates();
|
|
|
}
|
|
|
- const arr = list[0][0].find(subArray => subArray.includes(coordinates))
|
|
|
- that.selectPointLayer.source.clear();
|
|
|
+ coordinates = list[0][0]
|
|
|
+ let arr = []
|
|
|
+ let i = 0;let curDistance = 0
|
|
|
+ for(let subArray of coordinates){
|
|
|
+ let from = turf.point(subArray);
|
|
|
+ let to = turf.point(lonlat);
|
|
|
+ let options = { units: "miles" };
|
|
|
+ let distance = turf.distance(from, to, options);
|
|
|
+ if(distance < 0.1){
|
|
|
+ if(curDistance == 0){
|
|
|
+ arr = subArray
|
|
|
+ curDistance = distance
|
|
|
+ mapData.pointIndex = i
|
|
|
+ }else if(curDistance > distance){
|
|
|
+ arr = subArray
|
|
|
+ curDistance = distance
|
|
|
+ mapData.pointIndex = i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ i++
|
|
|
+ }
|
|
|
+ that.selectPointLayer.refresh();
|
|
|
let point = new Feature(new Point(arr));
|
|
|
that.selectPointLayer.addFeature(point);
|
|
|
mapData.selectPoint = coordinates
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
});
|
|
@@ -384,25 +414,27 @@ class AuthenticMap {
|
|
|
//添加地块
|
|
|
setAreaGeometry(geometryArr) {
|
|
|
let that = this;
|
|
|
+ let res = []
|
|
|
geometryArr.map((item) => {
|
|
|
item.icon = "point";
|
|
|
item.iconHide = "false";
|
|
|
- that.kmap.setLayerWkt(item.featureWkt, item);
|
|
|
+ res.push(that.kmap.setLayerWkt(item.featureWkt, item));
|
|
|
});
|
|
|
+ return res
|
|
|
}
|
|
|
|
|
|
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); // 删除点
|
|
|
+ if (mapData.pointIndex > -1) {
|
|
|
+ array.splice(mapData.pointIndex, 1); // 删除点
|
|
|
// 更新多边形的坐标
|
|
|
point.getGeometry().setCoordinates(coordinates); // 更新几何形状
|
|
|
+ mapData.pointIndex = -1
|
|
|
}
|
|
|
this.clearSelectPoint()
|
|
|
- callback && callback(index)
|
|
|
+ callback && callback(mapData.pointIndex)
|
|
|
}
|
|
|
|
|
|
// 移除点的功能
|