baise-pc-vue/src/views/detailsPage/analysis/analysisMap.js

import config from "@/api/config.js";
import * as KMap from "@/utils/ol-map/KMap";
import * as util from "@/common/ol_common.js";
import {
  newAreaFeature,
  newAreaPoint,
  newPoint,
  newPolymerFeature,
} from "../../zhgl/map";
import { base_img_url2 } from "../../../api/config";
import Stroke from "ol/style/Stroke";
import Style from "ol/style/Style";
import Photo from "ol-ext/style/Photo";

/**
 * @description 农事分析详情地图
 */
class analysisMap {
  getRadius(zoom) {
    if (zoom >= 20) {
      return 70;
    }
    if (zoom >= 19) {
      return 30;
    }
    if (zoom >= 18) {
      return 15;
    }
    if (zoom >= 17) {
      return 10;
    }
    return 5;
  }

  constructor() {
    let that = this;
    let vectorStyle = new KMap.VectorStyle();
    this.areaLayer = new KMap.VectorLayer("areaLayer", 999, {
      style: (f) =>
        vectorStyle.getPolygonStyle(f.get("color") + "10", f.get("color"), 3),
    });
    this.subAreaLayer = new KMap.VectorLayer("subAreaLayer", 999, {
      style: (f) => vectorStyle.getPolygonStyle("#fba50410", "#fba504", 1),
    });
    this.areaPointLayer = new KMap.VectorLayer("areaPointLayer", 1000, {
      style: (f) =>
        vectorStyle.getPointTextStyle(
          f.get("name"),
          "#120046",
          "#FFFFFF",
          2,
          30
        ),
    });
    this.treeLayer = new KMap.VectorLayer("treeLayer", 999);
    this.imgStyleCache = {};
    this.imgTreeLayer = new KMap.VectorLayer("imgTreeLayer", 999, {
      minZoom: 15,
      maxZoom: 22,
      style: (feature) => {
        let zoom = that.kmap.view.getZoom();
        let r = that.getRadius(zoom);
        let img = feature.get("img");
        let k = img + r;
        if (img && img != "") {
          let style = that.imgStyleCache[k];
          if (!style) {
            style = new Style({
              image: new Photo({
                src: base_img_url2 + img,
                radius: r,
                shadow: 0,
                crop: true,
                kind: "circle",
                onload: function () {
                  that.imgTreeLayer.layer.changed();
                },
                displacement: [0, 30 + 15],
                stroke: new Stroke({
                  width: 3,
                  color: "#fdfcfc",
                }),
              }),
            });
            that.imgStyleCache[k] = style;
          }
          return style;
        } else {
          return vectorStyle.getPointSimpleStyle(
            10,
            "#00000000",
            "#00000000",
            1
          );
        }
      },
    });
    this.imgTreeLayer.layer.setVisible(false);
    this.subAreaLayer.layer.setVisible(true);
  }

  initMap(location, target) {
    let level = 18;
    let coordinate = util.wktCastGeom(location).getFirstCoordinate();
    this.kmap = new KMap.Map(
      target,
      level,
      coordinate[0],
      coordinate[1],
      null,
      10,
      22
    );
    let xyz = config.base_img_url + "map/lby/{z}/{x}/{y}.png";
    this.kmap.addXYZLayer(xyz, { minZoom: 15, maxZoom: 22 });
    let xyz2 = config.base_img_url3 + "map/lby/{z}/{x}/{y}.png";
    this.kmap.addXYZLayer(xyz2, { minZoom: 12, maxZoom: 22 });
    this.kmap.addLayer(this.areaLayer.layer);
    this.kmap.addLayer(this.subAreaLayer.layer);
    this.kmap.addLayer(this.treeLayer.layer);
    this.kmap.addLayer(this.areaPointLayer.layer);
    this.kmap.addLayer(this.imgTreeLayer.layer);
  }

  initArea(organId) {
    let that = this;
    this.areaLayer.refresh();
    VE_API.area.list({ organId }).then(({ data, code }) => {
      for (let item of data) {
        that.areaLayer.addFeature(newAreaFeature(item));
        that.areaPointLayer.addFeature(newAreaPoint(item));
      }
    });
  }

  initSubArea(organId) {
    let that = this;
    this.subAreaLayer.refresh();
    VE_API.sub_area.list({ organId }).then(({ data, code }) => {
      for (let item of data) {
        that.subAreaLayer.addFeature(newPolymerFeature(item));
      }
    });
  }

  initTree(organId) {
    let that = this;
    this.treeLayer.refresh();
    this.imgTreeLayer.refresh();
    VE_API.tree
      .treeListAndGrowData({ organId, areaId: -1 })
      .then(({ data, code }) => {
        for (let item of data) {
          let point = newPoint(item);
          that.treeLayer.addFeature(point);
          that.imgTreeLayer.addFeature(point);
        }
      });
  }
  addSingleSelect(listener) {
    this.treeLayer.addSingleSelect(function (e) {
      if (e.selected.length > 0) {
        listener(e.selected[0]);
      }
    }, this.kmap.map);
  }

  setTreeStyle(style) {
    this.treeLayer.layer.setStyle(style);
    this.treeLayer.layer.changed();
  }
  fit(geomOrExtent) {
    this.kmap.fit(geomOrExtent);
  }
  openCloseImg() {
    this.imgTreeLayer.layer.setVisible(!this.imgTreeLayer.layer.getVisible());
  }
  openClosePolymer() {
    this.subAreaLayer.layer.setVisible(!this.subAreaLayer.layer.getVisible());
  }
}

export default analysisMap;