baise-pc-vue/src/views/authentic/authenticMap.js

import config from "@/api/config.js";
import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import VectorLayer from "ol/layer/Vector.js";
import WKT from "ol/format/WKT.js";
import { reactive } from "vue";
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature";
import { newPoint } from "@/utils/map.js";
import { Fill, Text,Circle,Stroke } from "ol/style";
import { getArea } from "ol/sphere.js";
import * as proj from "ol/proj";
import proj4 from "proj4";
import { register } from "ol/proj/proj4";
import GeometryCollection from 'ol/geom/GeometryCollection.js';
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
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"
);
register(proj4);
export let mapData = reactive({
  isEdit: false,
  isEditArea: false,
  curPointData: {},
  point: null,
  selectPointArr: [],
  isPointHide: null,
  disabledForm : false,
  selectPoint:''
});

function resetMapData(){
  mapData.isEdit= false
  mapData.isEditArea= false
  mapData.curPointData= {}
  mapData.point= null
  mapData.selectPointArr= []
  mapData.isPointHide= null
  mapData.disabledForm= false
  mapData.selectPoint= ''
}

/**
 * @description 地图层对象
 */
class AuthenticMap {
  constructor() {
    let that = this;
    that.store = useStore();
    let vectorStyle = new KMap.VectorStyle();
    this.vectorStyle = vectorStyle;
    // 位置图标
    this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
      style: (f) => {
        const style1 = new Style({
          image: new Icon({
            src: require(`@/assets/images/map/${f.get("icon")}-icon.png`),
            scale: 0.45,
          }),
        });
        const style2 = new Style({
          text: new Text({
            font: "16px sans-serif",
            text: f.get("masterName"),
            offsetY: -40,
            padding: [4, 3, 2, 106],
            fill: new Fill({ color: "#fff" }), // 字体颜色
          }),
        });
        const style3 = new Style({
          image: new Icon({
            src: require(`@/assets/images/map/${f.get("iconBg")}.png`),
            scale: 0.45,
            displacement: [0, 90],
          }),
        });
        return [style1, style2, style3];
      },
    });

    this.locationLayer = new KMap.VectorLayer("locationLayer", 9999, {
      style: () => {
        return new Style({
          image: new Icon({
            src: require("@/assets/images/map/location.png"),
            scale: 0.45,
          }),
        });
      },
    });

    this.selectPointLayer = new KMap.VectorLayer("selectPointLayer", 9999, {
      style: () => {
        return new Style({
          // geometry: new Point(coord[0][i]),
          image: new Circle({
              radius: 6,
              fill: new Fill({
              color: 'red'
              }),
              stroke: new Stroke({
              color: '#fff',
              width: 1
              }),
            }),
          });
      },
    });

    // 存储绘制的地块特征
    // this.drawnFeatures = [];
  }

  initMap(location, target) {
    let that = this
    let level = 16;
    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
    this.kmap = new KMap.Map(
      target,
      level,
      coordinate[0],
      coordinate[1],
      null,
      6,
      22
    );
    this.kmap.initDraw((e) => {
      if (e.type === "drawend") {
        mapData.isEdit = true;
        mapData.point = e.feature;
      }
    });
    this.kmap.modifyDraw((e) => {
      if(e.type === "modifyend"){
        mapData.isEditArea = false;
        mapData.isEditArea = true;
      }
    }, function(e){
      let f = null
      that.kmap.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
          f= feature
      },{hitTolerance:10});
      if(!f){
        return false
      }
      let res = f.get("id") === mapData.curPointData.id || !f.get("id")
      if(!res){
        ElMessage.warning("编辑中")
      }
      console.log('f.get("height")',f);
      res = f.get("height")?false:res
      return res
    });
    this.kmap.addLayer(this.clickPointLayer.layer);
    this.kmap.addLayer(this.locationLayer.layer);
    this.kmap.addLayer(this.selectPointLayer.layer);
    this.addMapSingerClick();
  }



  fit(geometriesWkt){
    let geometries = []
    let f = new WKT();
    for(let wkt of geometriesWkt){
      geometries.push(f.readGeometry(wkt))
    }
    let extent = new GeometryCollection(geometries).getExtent()
    this.kmap.fit(extent)
  }

  //撤销上一个点
  undoLastDraw() {
    // const coordinates = this.kmap.getLayerFeatures()[0].getGeometry().getCoordinates()
    // coordinates[0][0].pop()
    // this.kmap.getLayerFeatures()[0].getGeometry().getCoordinates(coordinates)
  }

  //      取消地块
  cancelDraw() {
    this.kmap.polygonLayer.source.removeFeature(mapData.point);
  }

  //   添加点位
  addPoint(points) {
    const arrPoints = [];
    if (points && points.length > 0) {
      points.forEach((item) => {
        let f = newPoint({ ...item, icon: "point", iconBg: "name-bg" }, "point");
        arrPoints.push(f);
      });
      this.clickPointLayer.source.addFeatures(arrPoints);
    }
  }

  //  设置地图中心点位
  setMapCenter(v,isPoint = true) {
    let arrayOfNumbers = [];
    const arrayOfStrings = v.split(",");
    arrayOfNumbers = [arrayOfStrings[1], arrayOfStrings[0]];
    this.kmap.map.getView().setCenter(arrayOfNumbers);
    if(!isPoint) return
    this.locationLayer.source.clear();
    let point = new Feature(new Point(arrayOfNumbers));
    this.locationLayer.addFeature(point);
  }

  // 开始勾画
  startDraw() {
    this.kmap.setDefaultCursor("crosshair");
    this.kmap.startDraw();
    this.kmap.endModify();
  }
  //结束勾画
  endDraw() {
    this.kmap.endDraw();
    this.kmap.endModify();
  }

  // 开始编辑
  startModify(type) {
    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.set("icon", "point-act");
      this.kmap.polygonStyle(mapData.point);
      mapData.isPointHide = mapData.point;
    }else{
      mapData.point.set("icon", "point-act");
    }
  }
  //结束编辑
  endModify() {
    this.kmap.endModify();
  }

  // 清空单个数据
  clearMapData(name, val, id) {
    name && (mapData[name] = val);
    this.clickPointLayer.source.forEachFeature((feature) => {
        feature.set("icon", "point");
        feature.set("iconBg", "name-bg");
    });
    const points = this.kmap.getLayerFeatures();
    points.forEach((feature) => {
        feature.set("icon", "point");
    });
    resetMapData()
  }
  //全选
  allSelect(ids){
    let arr = []
    this.clickPointLayer.source.forEachFeature((feature) => {
      if(!ids || ids.findIndex((id)=> id == feature.get('id')) > -1){
        feature.set("icon", "point-act");
        feature.set("iconBg", "name-act-bg");
      }
    });
    const points = this.kmap.getLayerFeatures();
    points.forEach((feature) => {
      if(!ids || ids.findIndex((id)=> id == feature.get('id')) > -1) {
        feature.set("icon", "point-act");
        this.kmap.polygonStyle(feature);
        mapData.isPointHide = feature;
        arr.push(feature)
      }
    });
    mapData.selectPointArr = arr;
  }
  //no全选
  allUnSelect(){
    this.clickPointLayer.source.forEachFeature((feature) => {
        feature.set("icon", "point");
        feature.set("iconBg", "name-bg");
    });
    const points = this.kmap.getLayerFeatures();
    points.forEach((feature) => {
        feature.set("icon", "point");
        this.kmap.polygonStyle(feature);
        mapData.isPointHide = feature;
    });
    mapData.selectPointArr = [];
  }

  //选中点位方法
  selectPonitFun(map,evt){
    let that = this
    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("已选择该点位")
            const features = that.kmap.getLayerFeatures()
            features.forEach(item =>{
              if(item.get("id")===mapData.selectPointArr[0].get("id")){
                  const list = item.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);
                }
            })
            mapData.selectPoint = coordinates
          }
        }
      }
    });
  }

  // 地图点击事件
  addMapSingerClick() {
    let that = this;
    that.kmap.on("singleclick", (evt) => {
      if(mapData.curPointData.id && !mapData.disabledForm && mapData.selectPointArr.length===1){
        that.selectPonitFun(that.kmap.map,evt)
        return;
      }
      if(!mapData.curPointData.id && mapData.isEdit){
        that.selectPonitFun(that.kmap.map,evt)
        return;
      }
      //判断是否是导入的数据
      if(that.store.state.authentic.isEditStatus){
        that.selectPonitFun(that.kmap.map,evt)
        return;
      }
      let num = 0;
      that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        // 点击的图层是否是VectorLayer
        if (
          layer instanceof VectorLayer &&
          (layer.get("name") === "clickPointLayer" ||
            layer.get("name") === "defaultPolygonLayer")
        ) {
          // 每次点击，只走一遍该方法
          num = num + 1;
          if (num === 1) {
            that.getSelectPointArr(feature.get("id"));
            that.kmap.endDraw();
          }
        }
      });
    });
  }

  clearSelectPoint(){
    this.selectPointLayer.source.clear();
  }

  setPoint(name) {
    const arr = mapData.selectPointArr.filter(
      (item) => item.values_.icon === "point-act"
    );
    if (arr.length > 0) {
      mapData.point = arr[0];
      mapData.point.set("icon", name);
      mapData.isPointHide.set("icon", name);
      mapData.point.set("iconBg", "name-bg");
    }
    if (arr.length === 1) {
      mapData.selectPointArr = [];
    }
  }

  //添加地块
  setAreaGeometry(geometryArr) {
    let that = this;
    geometryArr.map((item) => {
      item.icon = "point";
      item.iconHide = "false";
      that.kmap.setLayerWkt(item.featureWkt, item);
    });
  }

  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); // 更新几何形状
    }
    this.clearSelectPoint()
    callback && callback(index)
  }

  // 移除点的功能
  removePoint(callback) {
    // 获取多边形的所有坐标
    const features = this.kmap.getLayerFeatures()
    if(mapData.selectPointArr.length>0){
      features.forEach(item =>{
        if(item.get("id")===mapData.selectPointArr[0].get("id")){
            this.deletePointFun(item,callback)
          }
      })
    }else{
      this.deletePointFun(mapData.point,callback)
    }
  }

  //   获取所有选中点位
  getSelectPointArr(id) {
    const arr = [];
    this.clickPointLayer.source.forEachFeature((feature) => {
      if (feature.get("id") === id) {
        // 修改当前点位高亮
        const icon = feature.get("icon") === "point" ? "point-act" : "point";
        const iconBg =
          feature.get("iconBg") === "name-bg" ? "name-act-bg" : "name-bg";
        feature.set("icon", icon);
        feature.set("iconBg", iconBg);
        mapData.point = feature;
        mapData.curPointData = feature.values_;
      }
      if (feature.get("icon") === "point-act") {
        arr.push(feature);
      }
    });
    const points = this.kmap.getLayerFeatures();
    points.forEach((feature) => {
      if (feature.get("id") === id) {
        const icon = feature.get("icon") === "point" ? "point-act" : "point";
        feature.set("icon", icon);
        this.kmap.polygonStyle(feature);
        mapData.isPointHide = feature;
      }
    });
    mapData.selectPointArr = arr;
  }

  hidePoint() {
    const feature = mapData.isPointHide;
    feature.set("iconHide", "true");
    this.kmap.polygonStyle(feature);
  }

  clearLayer() {
    this.clickPointLayer.source.clear();
    this.kmap.polygonLayer.source.clear();
  }

  addLayer() {
    this.kmap.addLayer(this.kmap.polygonLayer.layer);
    this.kmap.addLayer(this.clickPointLayer.layer);
  }

  //获取地块信息
  getAreaGeometry(type) {
    let features = null
    if(type==='add') {
      features = [mapData.point]
    }else if(type==='upload'){
      features = this.kmap.getLayerFeatures()
    }else{
      if(mapData.curPointData.id){
        features = [this.kmap.getFeatureById(mapData.curPointData.id)];
      }else{
        features = [mapData.point]
      }
    }
    let geometryArr = [];
    let area = 0;
    // 获取图层上的Polygon，转成geoJson用于回显
    features.forEach((item) => {
      geometryArr.push({ featureWkt: new WKT().writeFeature(item) });
      let geom = item.getGeometry().clone();
      geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:38572"));
      let areaItem = getArea(geom);
      area = (areaItem + areaItem / 2) / 1000;
    });
    return { geometryArr, area: area.toFixed(2) };
  }

  /**
   address
   farmName
   masterName
   masterTel
   speciesTypeName
   ""
   * @param form
   */
  search(form){
    const points = this.kmap.getLayerFeatures();
    let arr = []
    let geomWkt = []
    points.forEach((feature) => {
      let condition = []
      if(form.address != ''){
        condition.push(feature.get("address").includes(form.address))
      }
      if(form.farmName != ''){
        const text = feature.get("farmName")
        if(text!==form.farmName) return
        condition.push(feature.get("farmName").includes(form.farmName))
      }
      if(form.masterName != ''){
        const text = feature.get("masterName")
        if(text!==form.masterName) return
        condition.push(feature.get("masterName").includes(form.masterName))
      }
      if(form.masterTel != ''){
        const text = feature.get("masterTel")
        if(text!==form.masterTel) return
        condition.push(feature.get("masterTel").includes(form.masterTel))
      }
      if(form.speciesTypeName != ''){
        const text = feature.get("speciesTypeName")
        if(text!==form.speciesTypeName) return
        condition.push(feature.get("speciesTypeName").includes(form.speciesTypeName))
      }
      let b = false
      for(let item of condition){
        if(item){
          b = true
        }else{
          b = false
          break
        }
      }
      if(b){
        arr.push(feature.get("id"))
        geomWkt.push(new WKT().writeGeometry(feature.getGeometry()))
      }
    });
    this.allUnSelect()
    this.allSelect(arr)
    if(geomWkt.length>0){
      this.fit(geomWkt)
    }
  }
}

export default AuthenticMap;