foster-pc-vue/src/views/authentic/pdfMap.js

import config from "@/api/config.js";
import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import Style from "ol/style/Style";
import Icon from "ol/style/Icon";
import VectorLayer from "ol/layer/Vector.js";
import WKT from "ol/format/WKT.js";
import { reactive } from "vue";
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature";
import { newPoint } from "@/utils/map.js";
import { Fill, Text } from "ol/style";
import { getArea } from "ol/sphere.js";
import * as proj from "ol/proj";
import proj4 from "proj4";
import { register } from "ol/proj/proj4";
import {DragPan, MouseWheelZoom} from "ol/interaction";
let mapData = reactive({
  isEdit: false,
  isEditArea: false,
  curPointData: {},
  point: null,
  selectPointArr: [],
  isPointHide: false,
});
proj4.defs(
  "EPSG:38572",
  "+proj=merc +a=6378137 +b=6378137 +lat_ts=0 +lon_0=0 +x_0=0 +y_0=0 +k=1 +units=m +nadgrids=@null +wktext +no_defs +type=crs"
);
register(proj4);

/**
 * @description 地图层对象
 */
class PdfMap {
  constructor() {
    let that = this;
    let vectorStyle = new KMap.VectorStyle();
    this.vectorStyle = vectorStyle;
    // 位置图标
    this.clickPointLayer = new KMap.VectorLayer("clickPointLayer", 9999, {
      style: (f) => {
        const style1 = new Style({
          image: new Icon({
            src: require(`@/assets/images/map/${f.get("icon")}-icon.png`),
            scale: 0.45,
          }),
        });
        const style2 = new Style({
          text: new Text({
            font: "16px sans-serif",
            text: f.get("masterName"),
            offsetY: -40,
            padding: [4, 3, 2, 106],
            fill: new Fill({ color: "#fff" }), // 字体颜色
          }),
        });
        const style3 = new Style({
          image: new Icon({
            src: require(`@/assets/images/map/${f.get("iconBg")}.png`),
            scale: 0.45,
            displacement: [0, 90],
          }),
        });
        return [style1, style2, style3];
      },
    });

    this.locationLayer = new KMap.VectorLayer("locationLayer", 9999, {
      style: () => {
        return new Style({
          image: new Icon({
            src: require("@/assets/images/map/location.png"),
            scale: 0.45,
          }),
        });
      },
    });
  }

  initMap(data, target) {
    let level = 16;
    let coordinate = util.wktCastGeom(data.point).getFirstCoordinate();
    this.kmap = new KMap.Map(
      target,
      level,
      coordinate[0],
      coordinate[1],
      null,
        6,
        22
    );
    this.lock(false)
    this.kmap.setLayerWkt(data.geom, data, true, [50, 50, 50, 50] )
    this.kmap.addLayer(this.clickPointLayer.layer);
    this.kmap.addLayer(this.locationLayer.layer);
    this.addPoint(data)
    this.getSelectPointArr(data.id)
  }

  getSelectPointArr(id) {
    const arr = [];
    this.clickPointLayer.source.forEachFeature((feature) => {
      if (feature.get("id") === id) {
        // 修改当前点位高亮
        feature.set("icon", "point");
        feature.set("iconBg", "name-act-bg");
        mapData.point = feature;
        mapData.curPointData = feature.values_;
      }
      arr.push(feature);
    });
    const points = this.kmap.getLayerFeatures();
    points.forEach((feature) => {
      if (feature.get("id") === id) {
        feature.set("icon", "point-act");
        this.kmap.polygonStyle(feature);
        mapData.isPointHide = feature;
      }
    });
    mapData.selectPointArr = arr;
  }

  //   添加点位
  addPoint(point) {
    const arrPoints = [];
    arrPoints.push(
        newPoint({ ...point, icon: "point", iconBg: "name-bg" }, "point")
    );
    this.clickPointLayer.source.addFeatures(arrPoints);
  }

  lock(lockval) {
    let pan;
    let mousezoom;
    this.kmap.map.getInteractions().forEach(function (element) {
      if (element instanceof DragPan)//获取 控制能否使用鼠标，手指拖动地图的对象
        pan = element;
      if(element instanceof MouseWheelZoom)//获取 控制能否使用滚轮滚动放大缩小地图的对象
        mousezoom = element;
      if (pan) {
        if (lockval) {
          pan.setActive(true);//此对象的setActive方法用来设置是否可以拖动滚动查看
        }
        else {
          pan.setActive(false);
        }
      }
      if (mousezoom) {
        if (lockval) {
          mousezoom.setActive(true);
        }
        else {
          mousezoom.setActive(false);
        }
      }
    });
  }
}

export default PdfMap;