<template>
  <div class="data-map" ref="datamap" id="mapbox"></div>
</template>

<script>
import { postMethodCommon, getMethodCommon } from "../../../../api/common";
import mapboxgl from "mapbox-gl";
import { waiData } from "../../../../assets/xianjiewai";
mapboxgl.accessToken =
  "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
export default {
  props: ["rowkey", "lnglat", "flyCenter"],
  data() {
    return {
      map: null,
      clockInList: [],
      markerArr:[]
    };
  },
  watch: {
    rowkey: function (e) {
      console.log('123',e)
      this.getClockInList()
    },
    lnglat: function (e) {},
    flyCenter: function (e) {
      console.log("eee123", e);
      this.flyTo(e);
    },
  },
  mounted() {
    this.$nextTick(function () {
      this.initMap();
    });
  },
  methods: {
    flyTo(e) {
      this.map.flyTo({
        center: e, //中心点
        zoom: 14, //缩放比例
        curve: 1,
      });
    },
    getClockInList() {
      getMethodCommon("/FireGrid/GetTotalCheckPoint").then((res) => {
        this.clockInList = res.result;
        for (var i = this.markerArr.length - 1; i >= 0; i--) {
            this.markerArr[i].remove();
        }
        this.addPointLayer();
      });
    },
    addPointLayer() {
      let _this = this
      this.clockInList.forEach((item) => {
        console.log("iii", item);
        let el = document.createElement("img"); //这里可以是任意标签
        el.className = "marker";
        el.src = "/img/dakadian.png"; //图片路径赋值
        el.style.width = "40px";
        // el.onclick = function(){
 
        //   console.log('123item',item)
        //   _this.$emit("editClock",item)
        // }
        
        // 添加自定义标记点
        let marker = new mapboxgl.Marker(el).setLngLat([item.lng, item.lat]).addTo(this.map);
        this.markerArr.push(marker)

      });
    },
    initMap(url, jwd) {
      let _this = this;
      this.map = new mapboxgl.Map({
        container: this.$refs.datamap,
        style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
        center: [117.977325, 35.265961],
        zoom: 10,
        language: "zh-cmn",
        projection: "globe",
      });
      this.map.on("load", () => {
        this.loadGaoQingLayer();
        this.loadMengban();
        this.loadZhenJieLayer();
        this.loadXianJieLayer();
        
        this.getClockInList();
      });
      this.map.on("click", (e) => {
        this.$emit("getLocation", e);
      });
    },
    
    loadMengban() {
      this.map.addLayer({
        //蒙版图层   //通过边界数据反选 达到挖洞效果
        id: "mb-tag",
        type: "fill",
        source: {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: {
              type: "Polygon",
              coordinates: [
                [
                  // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                  [-180, 90],
                  [180, 90],
                  [180, -90],
                  [-180, -90],
                ],
                waiData.DATA,
              ],
            },
          },
        },
        paint: {
          "fill-color": "rgba(0,10,36,1)",
          // 'fill-opacity': 1 /* 透明度 */,
        },
        layout: {
          visibility: "visible",
        },
      });
    },
    loadGaoQingLayer() {
      this.map.addLayer({
        id: "gaoqingyingxiang",
        type: "raster",
        source: {
          type: "raster",
          tiles: [
            "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
          ],
          tileSize: 256,
        },
        layout: {
          visibility: "visible",
        },
        paint: {},
      });
    },
    loadXianJieLayer() {
      this.map.addLayer({
        id: "xianjie",
        type: "line",
        layout: {
          visibility: "visible",
        },
        source: {
          type: "geojson",
          data: "http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson",
        },
        paint: {
          "line-width": 2,
          "line-color": "orange",
        },
      });
    },
    loadZhenJieLayer() {
      this.map.addSource("shp_1691822212", {
        type: "vector",
        scheme: "tms", //new
        tiles: [
          "http://223.99.16.253:9007/geoserver/gwc/service/tms/1.0.0/ksp:shp_1691822212@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
        ],
      });
      this.map.addLayer({
        id: "zhenjieline",
        type: "line",
        source: "shp_1691822212",
        "source-layer": "shp_1691822212",
        paint: {
          "line-color": "#0000ff",
          "line-width": 2,
        },
      });
      this.map.addLayer({
        id: "zhenjiepoint",
        type: "symbol",
        source: "shp_1691822212",
        "source-layer": "shp_1691822212",
        layout: {
          "text-field": "{xzqmc}",
          "text-size": 18,
        },
        paint: {
          "text-color": "#000000", // 文本的颜色（可选，默认值为 #000000）
          "text-halo-color": "#FFFFFF",
          "text-halo-width": 1,
        },
      });
    },
  },
};
</script>

<style scoped>
.data-map {
  width: 100%;
  height: 100%;
}
.data-map .map {
  width: 100%;
  height: 100%;
}
::v-deep.data-map .mapboxgl-ctrl-bottom-left {
  display: none !important;
}
::v-deep.data-map .mapboxgl-ctrl-bottom-right {
  display: none !important;
}
</style>
