agriculture-one-map/src/views/warningHome/map/gardenPointLayer.js

import eventBus from "@/api/eventBus";
import * as KMap from "@/utils/ol-map/KMap";
import { Vector as VectorSource } from "ol/source.js";
import Style from "ol/style/Style";
import { WKT } from 'ol/format'
import { Fill, Text } from "ol/style";
import Icon from 'ol/style/Icon.js';
import { Feature } from "ol";
import store from '@/store'
import Photo from "ol-ext/style/Photo";
import Stroke from 'ol/style/Stroke.js';
import { newPoint } from "@/utils/map.js";

/**
 *
 */
class gardenPointLayer {
    constructor(kmap) {
        let that = this;
        this.kmap = kmap
        let vectorStyle = new KMap.VectorStyle()
        // this.regionLayer = new KMap.VectorLayer("regionLayer", 3, {
        //     source: new VectorSource({}),
        //     style: function (f) {
        //         let style2 = vectorStyle.getPolygonStyle("#032833" + "30", "#c7cb20", 2)
        //         return [style2]
        //     }
        // });
        // this.kmap.addLayer(this.regionLayer.layer)

        this.gardenPointLayer = new KMap.VectorLayer("gardenUserLayer", 9999, {
            minZoom: 0,
            maxZoom: 22,
            source: new VectorSource({}),
            style: (feature) => {
              const organId = feature.get('organId') === this.organId
              let style1 = new Style({
                image: new Icon({
                  src: require("@/assets/images/map/garden.png"),
                  scale: 1,
                  shadow: 0,
                  // crop: true,
                  onload: function () {
                    that.gardenPointLayer.layer.changed();
                  },
                  displacement: [-1, -1],
                }),
              });
              return [style1];
            },
          });
        this.gardenPointLayer2 = new KMap.VectorLayer("gardenUserLayer2", 9999, {
            minZoom: 0,
            maxZoom: 22,
            source: new VectorSource({}),
            style: (feature) => {
              const organId = feature.get('organId') === this.organId
              let style1 = new Style({
                image: new Icon({
                  src: require("@/assets/images/map/garden2.png"),
                  scale: 1,
                  shadow: 0,
                  // crop: true,
                  onload: function () {
                    that.gardenPointLayer2.layer.changed();
                  },
                  displacement: [-1, -1],
                }),
              });
              return [style1];
            },
          });
          this.kmap.addLayer(this.gardenPointLayer.layer);
          this.kmap.addLayer(this.gardenPointLayer2.layer);
          this.initLayer()
    }

    initLayer(){
      const gardenList = [
        {wkt: "POINT(113.61702297075017 23.584863449735067)"}
      ]
      const gardenList2 = [
        {wkt: "POINT(113.5081595 23.5320866)"}
      ]
        this.gardenPointLayer.refresh()
        this.gardenPointLayer2.refresh()
        if (this.gardenPointLayer.source) {
          this.gardenPointLayer.source.clear()
          this.gardenPointLayer2.source.clear()
          // this.gardenReportPointLayer.source.clear()
        }
        for(let garden of gardenList){
          // this.clearOverLay(garden.organId)
          garden.wktVal = garden.wkt
          this.gardenPointLayer.source.addFeature(newPoint(garden, "wktVal", "myGarden"))
          // this.gardenReportPointLayer.source.addFeature(newPoint(garden, "wkt", "myGardenReport"))
          // this.initGardenWaring(extractCoordinates(garden.wkt), garden)
        }
        for(let garden of gardenList2){
          // this.clearOverLay(garden.organId)
          garden.wktVal = garden.wkt
          this.gardenPointLayer2.source.addFeature(newPoint(garden, "wktVal", "myGarden"))
          // this.gardenReportPointLayer.source.addFeature(newPoint(garden, "wkt", "myGardenReport"))
          // this.initGardenWaring(extractCoordinates(garden.wkt), garden)
        }
      }
}

export default gardenPointLayer;