foster-pc-vue/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";

/**
 *
 */
class pointLayer {
  constructor(kmap) {
    this.kmap = kmap
    // 位置图标
    this.pointLayer = new KMap.VectorLayer("pointLayer", 1000, {
        visible: false,
        style: () => {
            return new Style({
            image: new Icon({
                src: require("@/assets/images/warningHome/chat/fly-point.png"), 
                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);
    let extent = this.pointLayer.layer.getExtent();
    if(extent && extent[0] != Infinity){
          console.log("show layer",extent)
          this.pointLayer.mapInstance.fit(extent,{padding:[100,100,100,100]})
    }
  }

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

}

export default pointLayer;