<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-09 13:11:56
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-26 10:07:45
 * @FilePath: \znxjxt-ui\src\views\xj\parameter\index.vue
 * @Description: 系统工具-系统参数
-->

<template>
  <div class="parameter-content">
    <div class="parameter-form">
      <!-- 搜索表单 -->
      <el-form
        :model="parameterForm"
        ref="parameterForm"
        size="small"
        :inline="true"
        :rules="rules"
        label-width="7rem"
      >
        <el-form-item label="地图层级" prop="zoom">
          <el-input
            disabled
            v-model.number="parameterForm.zoom"
            placeholder="请输入地图层级"
            clearable
          />
        </el-form-item>
        <el-form-item label="经度" prop="lon">
          <el-input
            disabled
            v-model.number="parameterForm.lon"
            placeholder="请输入坐标经度"
            clearable
          />
        </el-form-item>
        <el-form-item label="纬度" prop="lat">
          <el-input
            disabled
            v-model.number="parameterForm.lat"
            placeholder="请输入坐标纬度"
            clearable
          />
        </el-form-item>
        <el-form-item label="">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div id="map"></div>
  </div>
</template>

<script>
import { Map, View, Feature } from "ol";
import XYZ from "ol/source/XYZ";
import { Tile as TileLayer } from "ol/layer";
import { defaults as defaultControls } from "ol/control";
import { Vector as VectorSource } from "ol/source";
import logo from "@/assets/xc.png";
import { Point } from "ol/geom";
import { Style, Icon, Stroke } from "ol/style";
import VectorLayer from "ol/layer/Vector";
import { getMapInfo, updateMapInfo } from "@/api/xj/parameter";
import GeoJSON from "ol/format/GeoJSON.js";

export default {
  name: "Parameter",
  data() {
    return {
      // 搜索表单
      parameterForm: {
        // 地图层级
        zoom: "",
        // 经度
        lon: "",
        // 纬度
        lat: "",
      },
      // 表单验证规则
      rules: {
        zoom: [
          {
            required: true,
            message: "地图层级不能为空",
            trigger: "blur",
          },
        ],
        lon: [
          {
            required: true,
            message: "经度不能为空",
            trigger: "blur",
          },
        ],
        lat: [
          {
            required: true,
            message: "纬度不能为空",
            trigger: "blur",
          },
        ],
      },
      // 地图实例
      map: null,
      // 地图中心点
      centePoint: [123.30297096718999, 41.87942945541742],
      // 坐标数组
      coordinateList: [123.30297096718999, 41.87942945541742],
    };
  },
  /* 生命周期函数-created */
  created() {
    this.getMapPoint();
  },
  methods: {
    /* 获取地图点位详情信息 */
    getMapPoint() {
      getMapInfo().then((res) => {
        // 如果有返回
        this.parameterForm = {
          zoom: "11",
          // 经度
          lon: 41.87942945541742,
          // 纬度
          lat: 123.30297096718999,
        };
        this.centePoint = [123.30297096718999, 41.87942945541742];
        this.coordinateList = [];
        this.initMap();
        // 如果没有就用默认
        this.drawPoint([123.30297096718999, 41.87942945541742]);
      });
    },
    /* 地图打点 */
    drawPoint(value) {
      const features = [];
      const point = new Point(value); // 修改坐标格式
      const feature = new Feature({
        geometry: point,
        custom: { data: "123", type: "icon" }, //  可以放一些自己的数据
        type: "icon", //  自己设置一个标识
      });
      feature.setStyle([
        new Style({
          image: new Icon({
            crossOrigin: "anonymous",
            src: logo,
            // size: [40, 40],
            scale: 0.5, // 图标缩放比例
          }),
        }),
      ]);
      features.push(feature);
      //设置地图的数据源
      const pointSource = new VectorSource({
        features,
      });
      let markLayerPoints = new VectorLayer({
        source: pointSource,
        properties: {
          type: "point",
        },
      });
      this.map.addLayer(markLayerPoints);
    },
    /* 点击保存事件 */
    handleQuery() {
      this.$refs["parameterForm"].validate((valid) => {
        if (valid) {
          updateMapInfo(this.parameterForm).then((res) => {});
        }
      });
    },
    /* 初始化地图 */
    initMap() {
      const map = new Map({
        target: "map",
        controls: defaultControls({
          zoom: true,
          attribution: false,
          rotate: false,
        }),
        view: new View({
          center: [this.parameterForm.lat, this.parameterForm.lon], //中心点经纬度
          zoom: this.parameterForm.zoom, //图层缩放大小
          projection: "EPSG:4326",
        }),
        layers: [],
      });
      const tianditu_img_c = new TileLayer({
        title: "影像地图",
        id: "img_c",
        source: new XYZ({
          url: "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
          // projection: "EPSG:4326",
        }),
        visible: false,
      });
      let tianditu_cva_c = null;
      let tianditu_vec_c = null;
      if (
        (window.location.port === "" || window.location.port === 80) &&
        process.env.VUE_APP_BASE_API === "/prod-api"
      ) {
        // 内网
        tianditu_cva_c = new TileLayer({
          title: "矢量地图",
          id: "cva_c",
          source: new XYZ({
            url: "http://10.60.5.242:25003/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            // projection: "EPSG:4326",
          }),
          visible: true,
        });
        tianditu_vec_c = new TileLayer({
          title: "矢量底图",
          id: "vec_c",
          source: new XYZ({
            url: "http://10.60.5.242:25033/v3/tile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            // projection: "EPSG:4326",
          }),
          visible: true,
        });
        map.addLayer(tianditu_cva_c, tianditu_vec_c, tianditu_img_c);
      } else {
        // 外网
        tianditu_cva_c = new TileLayer({
          className: "baseLayerClass",
          title: "矢量地图",
          id: "cva_c",
          source: new XYZ({
            url: "https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            // projection: "EPSG:4326",
          }),
          visible: true,
        });
        map.addLayer(tianditu_cva_c, tianditu_img_c);
      }
      // 添加GeoJSON图层
      // new VectorLayer({
      //   source: new VectorSource({
      //     // url: "http://localhost:8080/defectfile/output.geojson", // GeoJSON文件路径
      //     url: "", // GeoJSON文件路径
      //     format: new GeoJSON(),
      //   }),
      //   style: new Style({
      //     stroke: new Stroke({
      //       color: "#ff0000",
      //       width: 2,
      //     }),
      //   }),
      // }),
      this.map = map;
      map.on("click", (e) => {
        this.mapClick(e);
      });
      // map.on("click", (e) => {
      // 清除point层
      // const pointSource = map
      //   .getAllLayers()
      //   .filter((item) => item.get("type") === "point");
      // pointSource[0].getSource().clear();
      // // 打点新图层
      // const { coordinate } = e;
      // this.drawPoint(coordinate)
      // const featureClick = map.forEachFeatureAtPixel(
      //   map.getEventPixel(e.originalEvent),
      //   (feature) => {
      //     return feature;
      //   }
      // );
      // if (featureClick) {
      //   this.$emit("feature-click", featureClick);
      //   this.$emit("map-click", e, "feature-click");
      // } else {
      //   this.$emit("map-click", e, "map-click");
      //   if (this.clearOverlayer) {
      //     this.clearOverlay();
      //   }
      // }
      //   });
      /* 地图点击事件 */
      //   map.on("click", (evt) => {
      //     // 获取点击的经纬度
      //     const { coordinate } = evt;
      //     const features = [];
      //     const point = new Point(coordinate); // 修改坐标格式
      //     const feature = new Feature({
      //       geometry: point,
      //       custom: { data: "123", type: "icon" }, //  可以放一些自己的数据
      //       type: "icon", //  自己设置一个标识
      //     });
      //     feature.setStyle([
      //       new Style({
      //         image: new Icon({
      //           crossOrigin: "anonymous",
      //           src: logo,
      //           // size: [40, 40],
      //           scale: 0.5, // 图标缩放比例
      //         }),
      //       }),
      //     ]);
      //     features.push(feature);
      //     //设置地图的数据源
      //     const source = new VectorSource({
      //       features,
      //     });
      //     let markLayerPoints = new VectorLayer({
      //       source: source,
      //       properties: { name: "point" },
      //     });
      //     this.map.addLayer(markLayerPoints);
      //   });
    },
    /* 地图点击事件 */
    mapClick(e) {
      // 过滤图层返回数组
      const [pointSource] = this.map
        .getAllLayers()
        .filter((item) => item.get("type") === "point");
      //  获取点击的点位
      const { coordinate } = e;
      // 获取当前图层的source
      const source = pointSource.getSource();
      // 获取图层的features  数组
      const [features] = source.getFeatures();
      // 修改geometry 定位
      features.set("geometry", new Point(coordinate));
      // 获取当前点击的图层zoom
      const zoom = this.map.getView().getZoom();
      this.parameterForm = {
        zoom: zoom.toFixed(0),
        lon: coordinate[1],
        lat: coordinate[0],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.parameter-content {
  width: 100%;
  height: 100%;
  padding: 1rem;
  box-sizing: border-box;

  .parameter-form {
    width: 100%;
    height: 10%;
  }

  #map {
    width: 100%;
    height: 45rem;
  }
}

// ::v-deep .ol-layer:nth-child(1) {
//   filter: invert(100%) hue-rotate(180deg);
// }
</style>
