<template>
  <div id="content">
    <div id="map" ref="map" style="width: 100vw; height: 100vh"/>
    <div id="overlay-box"/>
    <div class="actionList">
      <van-grid :column-num="3">
        <van-grid-item>
          <van-button size="mini" type="primary" @click="canAddPoints=true">开始新增点位</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button size="mini" type="primary" @click="canAddPoints=false">结束新增点位</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button size="mini" type="primary" @click="clearPointsLayers">清除点位</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button size="mini" type="primary" @click="startAnimation()">开始沿轨迹运动</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button size="mini" type="primary" @click="stopAnimation()">结束沿轨迹运动</van-button>
        </van-grid-item>
        <van-grid-item>
          <van-button size="mini" type="primary" @click="planningPath()">planningPath</van-button>
        </van-grid-item>
      </van-grid>
      <br/>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import {Map, View, Feature} from "ol";
import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
import Overlay from "ol/Overlay";
import {Point, LineString} from "ol/geom.js";
import { getVectorContext } from "ol/render";
import axios from "axios";





import {OL as ol} from "plot-ol/plottingol";
export default {
  data() {
    return {
      map: {},
      pointLayer: {},
      canAddPoints: false,
      coordinate: [],
      route: new LineString([[12496610.1929, 2476571.7426],[12496623.829, 2476586.2505]]),
      route1: new LineString([[113.95113841271974,22.568523240293505],[113.94452944970705,22.563351941312792],[113.95188943124391,22.559317898954394],[113.94467965341188,22.555326771940233]]),
      geometryMove: {},
      featureMove: {},
      styles: {
        route: new Style({
          stroke: new Stroke({
            width: 6,
            color: [237, 212, 0, 0.8],
          }),
        }),
        icon: new Style({
          image: new Icon({
            anchor: [0.5, 1],
            src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
            scale: 1, //设置大小
          }),
        }),
        featureMove: new Style({
          image: new Circle({
            radius: 7,
            fill: new Fill({color: "black"}),
            stroke: new Stroke({
              color: "white",
              width: 2,
            }),
          }),
        }),
      },
      vectorLayer: {},
      distance: 0,
      lastTime: 0,
      speed: 0.1
    };
  },
  mounted() {
    this.initMap();
    this.clickMap();
  },
  methods: {
    showHistory() {
      var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
      console.log(_list)

    },
    clearPointsLayers() {
      this.coordinate = []
      this.map.removeLayer(this.pointLayer);
      this.pointLayer = {};
      if (Object.keys(this.pointLayer).length == 0) {
        // 创建图层
        this.pointLayer = new VectorLayer({
          source: new VectorSource(),
        });
        // 图层添加到地图上
        this.map.addLayer(this.pointLayer);
      }
    },
    initMap() {

      this.geometryMove = new Point(this.route.getFirstCoordinate());

      this.featureMove = new Feature({
        type: "featureMove",
        geometry: this.geometryMove,
      });


      this.vectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [
            new Feature({
              type: "route",
              geometry: this.route,
            }),
            this.featureMove,
            new Feature({
              type: "icon",
              geometry: new Point(this.route.getFirstCoordinate()),
            }),
            new Feature({
              type: "icon",
              geometry: new Point(this.route.getLastCoordinate()),
            }),
          ],
        }),
        style: (feature) => {
          return this.styles[feature.get("type")];
        },
      });



      this.map = new Map({
        target: "map",
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:3857",
          center: [12497018.585823221, 2476783.2447665134],
          zoom: 12,
        }),
      });

      this.map.addLayer(this.vectorLayer);
    },
    /**
     * 点击地图添加摄像头要素
     */
    clickMap() {

      this.map.on("click", (e) => {
        if (this.canAddPoints) {
          this.addPoints(e.coordinate);
        }
      });
    },
    planningPath() {

      axios({
        method: "post",
        url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
        headers: {
          'Content-Type': 'text/xml'
        },
        data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
            outputFormat="application/json"
            viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
            <Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
        </GetFeature>`,
      }).then(res => {
        // console.log(res.data.features)

        let pathList=[];
        res.data.features.map((item,index) => {
          if(index<50){
            pathList.push(item.geometry.coordinates[0])
            pathList.push(item.geometry.coordinates[1])
          }
          // console.log(item.geometry.coordinates[0])
          // console.log(item.geometry.coordinates[0])
        })


        const route=new LineString(pathList)

        const geometryMove = new Point(route.getFirstCoordinate());

        const featureMove = new Feature({
          type: "featureMove",
          geometry: geometryMove,
        });

        const vectorLayer = new VectorLayer({
          source: new VectorSource({
            features: [
              new Feature({
                type: "route",
                geometry: route,
              }),
              featureMove,
              new Feature({
                type: "icon",
                geometry: new Point(route.getFirstCoordinate()),
              }),
              new Feature({
                type: "icon",
                geometry: new Point(route.getLastCoordinate()),
              }),
            ],
          }),
          style: (feature) => {
            return this.styles[feature.get("type")];
          },
        });

        console.log(route.getFirstCoordinate())
        console.log(route.getLastCoordinate())
        this.map.addLayer(vectorLayer)
      })
    },
    /**
     * 根据经纬度坐标添加摄像头要素
     */
    addPoints(coordinate) {
      this.coordinate.push(coordinate)
      console.log(JSON.stringify(this.coordinate))
      if (Object.keys(this.pointLayer).length == 0) {
        // 创建图层
        this.pointLayer = new VectorLayer({
          source: new VectorSource(),
        });
        // 图层添加到地图上
        this.map.addLayer(this.pointLayer);
      }

      // 创建feature要素，一个feature就是一个点坐标信息
      const feature = new Feature({
        geometry: new Point(coordinate),
      });
      // 设置要素的图标
      feature.setStyle(
          new Style({
            // 设置图片效果
            image: new Icon({
              src: "https://smart-garden-manage.oss-cn-chengdu.aliyuncs.com/shexiangtou.png",
              // anchor: [0.5, 0.5],
              scale: 0.3,
            }),
          })
      );
      // 要素添加到地图图层上

      this.pointLayer.getSource().addFeature(feature);

      // 设置文字信息
      // this.addText(coordinate);
    },
    addText(coordinate) {
      const overlayBox = document.getElementById("overlay-box"); //获取一个div
      const oSpan = document.createElement("span"); //创建一个span
      oSpan.contentEditable = true; //设置文字是否可编辑
      oSpan.id = coordinate[0]; //创建一个id
      let pText = document.createTextNode("摄像头" + coordinate[0].toFixed(2)); //创建span的文本信息
      oSpan.appendChild(pText); //将文本信息添加到span
      overlayBox.appendChild(oSpan); //将span添加到div中
      let textInfo = new Overlay({
        position: coordinate, //设置位置
        element: document.getElementById(coordinate[0]),
        offset: [-25, 30], //设置偏移
      });
      this.map.addOverlay(textInfo);
    },

    moveFeature(e) {
      let time = e.frameState.time;
      this.distance =
          (this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止

      this.lastTime = time;

      const currentCoordinate = this.route.getCoordinateAt(
          this.distance > 1 ? 2 - this.distance : this.distance
      );
      this.geometryMove.setCoordinates(currentCoordinate);
      const vectorContext = getVectorContext(e);
      vectorContext.setStyle(this.styles.featureMove);
      vectorContext.drawGeometry(this.geometryMove);
      this.map.render();
    },
    startAnimation() {
      this.lastTime = Date.now();
      this.vectorLayer.on("postrender", this.moveFeature);
      this.featureMove.setGeometry(null); //必须用null，不能用{}
    },

    stopAnimation() {
      this.featureMove.setGeometry(this.geometryMove);
      this.vectorLayer.un("postrender", this.moveFeature);
    }
  },
};
</script>

<style lang="less">
// 非核心已删除
#content {
  width: 100%;
  height: 100vh;

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

.ol-touch .ol-control button {
  font-size: 26px;
}

.actionList {
  position: fixed;
  bottom: 0px;
  left: 0px;
  height: 200px;
  width: 100vw;

  .addAlarmPoint {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 100;

    .addAlarmPointNext {
      width: 80%;
      height: 80px;
      line-height: 80px;
      background-color: #369FFF;
      border-radius: 20px;
      font-size: 26px;
      color: white;
    }
  }
}
</style>
