feiniao-farm-h5/src/views/old_mini/home/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 { Point } from 'ol/geom';
import Feature from "ol/Feature";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
/**
 * @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);
    let point = new Feature(new Point(coordinate))
    this.clickPointLayer.addFeature(point)

    this.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")
          //   }
          // });
          console.log('evt.coordinate', evt.coordinate);
        });
  }
}

export default IndexMap;