feiniao-farm-h5/src/views/old_mini/create_farm/map/index.js

import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import config from "@/api/config.js";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { Point } from 'ol/geom';
import Feature from "ol/Feature";
import { reactive } from "vue";

export let mapLocation = reactive({
  data: null,
});

/**
 * @description 地图层对象
 */
class IndexMap {
  constructor() {
    let that = this;
    let vectorStyle = new KMap.VectorStyle();
    this.vectorStyle = vectorStyle;

    // 位置图标
    this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
      style: (f) => {
        return new Style({
          image: new Icon({
            src: require("@/assets/img/home/garden-point.png"),
            scale: 0.5,
            anchor: [0.5, 1],
          }),
        });
      },
    });
  }

  initMap(location, target) {
    let level = 16;
    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
    this.kmap = new KMap.Map(target, level, coordinate[0], coordinate[1], null, 8, 22);
    let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
    this.kmap.addXYZLayer(xyz2, { minZoom: 8, maxZoom: 22 }, 2);
    this.kmap.addLayer(this.clickPointLayer.layer);
    this.setMapPoint(coordinate)
    this.addMapSingerClick()
  }

  setMapPosition(center) {
    this.kmap.getView().animate({
      center,
      zoom: 16,
      duration: 500,
    });
    this.setMapPoint(center)
  }

  setMapPoint(coordinate) {
    this.clickPointLayer.source.clear()
    let point = new Feature(new Point(coordinate))
    this.clickPointLayer.addFeature(point)
  }

  // 地图点击事件
  addMapSingerClick() {
    let that = this;
    that.kmap.on("singleclick", (evt) => {
      // that.kmap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
      //   if ( layer instanceof VectorLayer && layer.get("name") === "reportPolygonLayer" ) {
      //     areaId.data = feature.get("id")
      //   }
      // });
      that.setMapPoint(evt.coordinate)
      mapLocation.data = evt.coordinate
    });
  }

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

  setAreaGeometry(geometryArr) {
    this.clearLayer()
    let that = this
    geometryArr.map(item => {
      that.kmap.setLayerWkt(item.featureWkt)
    })
  }
}

export default IndexMap;