foster-pc-vue/src/views/varietyMap/varietyMap.js

import { getCenter } from 'ol/extent';
import config from "@/api/config.js";
import * as KMap from "@/utils/ol-map/KMap";
import Stroke from "ol/style/Stroke";
import * as util from "@/common/ol_common.js";
import VectorSource from 'ol/source/Vector';
import {newPoint} from "@/utils/map";
import Feature from "ol/Feature";
import Draw from 'ol/interaction/Draw';
import { Style, Fill, Circle as CircleStyle } from 'ol/style';
import { Polygon } from 'ol/geom';
import Icon from "ol/style/Icon";
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
import {Cluster} from "ol/source";

/**
 * @description
 */
class VarietyMap {
  constructor() {
    let that = this;
    let vectorStyle = new KMap.VectorStyle();
    this.vectorStyle = vectorStyle;
    this.drawInteraction = null;
    this.vectorSource = new VectorSource();
    this.clusterSource = new Cluster({
      distance: 15,
      minDistance: 60,
    });

    this.centerPointLayer = new KMap.VectorLayer("centerPointLayer", 1000, {
      source:this.clusterSource,
      style: (f) => {
        return new Style({
          image: new Icon({
            src: require('@/assets/images/map/active-icon.png'),
            scale: 0.4,
          }),
        });
      },
    });
  }

  initMap(location, target) {
    let level = 16;
    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
    this.kmap = new KMap.Map( target, level, coordinate[0], coordinate[1], null, 1, 22 ,"vec", true, true);
    // 添加矢量图层用于显示框选结果
    const vectorLayer = new VectorLayer({
      source: this.vectorSource,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)',
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2,
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33',
          }),
        }),
      }),
    });
    this.kmap.addLayer(this.centerPointLayer.layer);

    this.kmap.addLayer(vectorLayer);
    // this.startDrawing(this.kmap.map)
    

    // // 初始化框选交互
    this.draw = new Draw({
      source: this.vectorSource,
      type: 'Circle', // 框选类型
      // geometryFunction: (coordinates, geometry) => {
      //   if (coordinates.length < 2) {
      //     return null;
      //   }
      //   return this.drawSquare(coordinates); // 绘制矩形
      // },
    });

    // 添加框选交互到地图
    this.kmap.map.addInteraction(this.draw);

    this.initData()

    // 监听drawend事件，获取框选范围
    let that = this
    this.draw.on('drawend', (event) => {
      // const feature = event.feature;
      let pixel=that.kmap.map.getEventPixel(event.originalEvent)
      const geometry = feature.getGeometry();
      const extent = geometry.getExtent();
      let feature=that.kmap.map.forEachFeatureAtPixel(pixel,function (feature) {
        console.log('feature',feature);
        return feature
      })
      // if(feature != null && feature == vm.polyline){
      //     that.pointmoveFeature = feature
      //     callback(vm.polyline)
      // }
      // if(feature==undefined){
      //     if(that.pointmoveFeature){
      //         that.pointmoveFeature = null
      //         callback(null)
      //     }
      // }
      console.log('Selected extent:', extent);
      console.log('Center of selected area:', getCenter(extent));
    });
  }

  initData(farmId, regionId){
    let that = this
    VE_API.sample.list({farmId:766,regionId:2}).then(({data})=>{
      // data[0].status = 9
      let features = []
      for(let item of data){
        let point = newPoint(item);
        features.push(point)
      }
      const source = new VectorSource({
        features: features,
      });
      that.clusterSource.setSource(source)
    })
  }

  // 绘制矩形
   drawRectangle = (coordinates) => {
    const start = coordinates[0];
    const end = coordinates[1];
    const minX = Math.min(start[0], end[0]);
    const maxX = Math.max(start[0], end[0]);
    const minY = Math.min(start[1], end[1]);
    const maxY = Math.max(start[1], end[1]);

    // 定义矩形的四个顶点
    const rectangleCoordinates = [
      [minX, minY],
      [maxX, minY],
      [maxX, maxY],
      [minX, maxY],
      [minX, minY], // 闭合矩形
    ];

    return new Polygon([rectangleCoordinates]);
  };

    drawSquare = (coordinates) => {
      const start = coordinates[0];
      const end = coordinates[1];
      const dx = end[0] - start[0];
      const dy = end[1] - start[1];
      const size = Math.max(Math.abs(dx), Math.abs(dy));
    
      const minX = start[0];
      const minY = start[1];
      const maxX = minX + size * Math.sign(dx);
      const maxY = minY + size * Math.sign(dy);
    
      // 定义正方形的四个顶点
      const squareCoordinates = [
        [minX, minY],
        [maxX, minY],
        [maxX, maxY],
        [minX, maxY],
        [minX, minY], // 闭合正方形
      ];
    
      return new Polygon([squareCoordinates]);
    };


  startDrawing = (map) => {
    if (this.drawInteraction) {
      map.removeInteraction(this.drawInteraction);
    }

    // 自定义绘制逻辑
    this.drawInteraction = new Draw({
      source: this.vectorSource,
      type: 'Circle', // 使用 Circle 作为基础
      geometryFunction: (coordinates, geometry) => {
        if (coordinates.length < 2) {
          return null;
        }
        return this.drawRectangle(coordinates); // 绘制矩形
      },
    });

    map.addInteraction(this.drawInteraction);

    // 监听绘制完成事件
    this.drawInteraction.on('drawend', (event) => {
      const feature = event.feature;
      const geometry = feature.getGeometry();

      console.log('正多边形坐标:', geometry.getCoordinates());
    });
  };

  // 清除绘制
  clearDrawing = () => {
    this.vectorSource.clear();
  };

  // 重新渲染地图
  updateMap() {
    setTimeout(() => {
      this.kmap.map.updateSize()
    }, 1000);
  }

  fit(geomOrExtent, padding) {
    this.kmap.fit(geomOrExtent, padding);
  }
}

export default VarietyMap;