agriculture-one-map/src/components/static_map_change/pointLayer.js

import * as KMap from '@/utils/ol-map/KMap';
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import { newPoint } from "@/utils/map.js";
import flyPointIcon from "@/assets/images/warningHome/chat/fly-point.png";

/**
 *
 */
class pointLayer {
  constructor(kmap) {
    this.kmap = kmap
    // 位置图标
    this.pointLayer = new KMap.VectorLayer("pointLayer", 1000, {
        visible: false,
        style: () => {
            return new Style({
            image: new Icon({
                // 使用打包器可识别的静态资源路径
                src: flyPointIcon,
                scale: 0.6,
            }),
            });
        },
        });
    this.kmap.addLayer(this.pointLayer.layer);

    this.setMapPoint()
  }

  setMapPoint() {
    // 图标点位
    let point = [
      {
        id: 1,
        wkt: "POINT(110.937533572 21.9752048347)",
        url: "1",
      },
      {
        id: 2,
        wkt: "POINT(111.006303846 22.0427499)",
        url: "2",
      },
      {
        id: 3,
        wkt: "POINT(110.952463176 22.0266637782)",
        url: "3",
      },
      {
        id: 4,
        wkt: "POINT(110.964404259 21.954198378)",
        url: "4",
      },
      {
        id: 6,
        wkt: "POINT(110.870809782 22.0103192249)",
        url: "5",
      },
      {
        id: 8,
        wkt: "POINT(111.004240017 22.0377065354)",
        url: "6",
      },
      {
        id: 9,
        wkt: "POINT(110.907575135 21.9370288761)",
        url: "7",
      },
      {
        id: 10,
        wkt: "POINT(110.861455112 21.9521709844)",
        url: "8",
      },
      {
        id: 11,
        wkt: "POINT(110.941859265 21.9810418917)",
        url: "9",
      },
      {
        id: 12,
        wkt: "POINT(110.85275219 22.0177644506)",
        url: "10",
      },
      {
        id: 13,
        wkt: "POINT(110.937319394 22.0469353146)",
        url: "11",
      },
      {
        id: 15,
        wkt: "POINT(111.002916366 22.0546410706)",
        url: "12",
      },
    ]
    point.map((item) => {
      let point = newPoint(item, 'wkt');
      this.pointLayer.addFeature(point)
    })
    this.pointLayer.layer.setVisible(false);
  }

  showPoint() {
    // 显示点位图层
    this.pointLayer.layer.setVisible(true);
    // 使用 source 计算范围，VectorLayer 本身没有 getExtent 方法
    const extent = this.pointLayer.source.getExtent();
    if (extent && extent[0] !== Infinity) {
      // 通过 kmap（KMap.Map 实例）来缩放到点位范围
      this.kmap.fit(extent, [100, 100, 100, 100]);
    }
  }

  hidePoint() {
    this.pointLayer.layer.setVisible(false);
  }

}

export default pointLayer;