<template>
  <div id="rootMap">
    <div id="map" ref="map">
      <el-button
        type="primary"
        style=" position: absolute;
    left: 869px;
    bottom: 9px;
    z-index: 99"
        @click="SendLngLat()"
        >确定</el-button
      >
    </div>
  </div>
</template>
<script>
import "ol/ol.css";

import { Map, View, Feature, color } from "ol";
import { DEVICE_PIXEL_RATIO } from "ol/has";
import Circle from "ol/style/Circle";
import * as layer from "ol/layer.js";
import * as source from "ol/source.js";
import * as geom from "ol/geom.js";
import * as style from "ol/style.js";
import Overlay from "ol/Overlay.js";
import TileLayer from "ol/layer/Tile";

import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";

import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";

import Stroke from "ol/style/Stroke";
import Draw from "ol/interaction/Draw";
import Icon from "ol/style/Icon";
import Select from "ol/interaction/Select";
import Modify from "ol/interaction/Modify";
import FormatWKT from "ol/format/WKT";

import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";
import GeoJSON from "ol/format/GeoJSON";
import LineString from "ol/geom/LineString";

import { OSM, TileArcGISRest, XYZ } from "ol/source";
import { defaults } from "ol/control";
import ImageArcGISRest from "ol/source/ImageArcGISRest";
import ImageLayer from "ol/layer/Image";
import tagPng from "./../../../static/img/yjznewpng.png";
import Point from "ol/geom/Point";
export default {
  data() {
    return {
      map: "",
      currentLonLat: []
    };
  },
  mounted() {
    this.initMap();
  },

  methods: {
    //点击确定后关闭此地图面板，然后把经纬度传给父vue
    SendLngLat() {
      //删除entity模型
      this.$emit("SendLngLat", this.currentLonLat);
    },
    //初始化地图
    initMap() {
      this.map = new Map({
        controls: defaults({
          attribution: false,
          zoom: false,
          rotate: false
        }),

        target: this.$refs.map,
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
              //"http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
            })
          })
        ],
        view: new View({
          projection: "EPSG:4326", //使用这个坐标系
          center: [114.217, 30.828], //武汉
          zoom: 9
        })
      });

      this.vectorSource = new SourceVector({});
      this.vector = new LayerVector({
        source: this.vectorSource
      });
      this.map.addLayer(this.vector);

      //初始化一个点
      this.initPoint(114.3, 30.28);

      //鼠标移动事件
      this.map.on("pointermove", function(evt) {
        if (evt.map.hasFeatureAtPixel(evt.pixel)) {
          evt.map.getTargetElement().style.cursor = "pointer";
        } else {
          evt.map.getTargetElement().style.cursor = "";
        }
      });
      //鼠标点击事件
      this.map.on("click", evt => {
        this.currentLonLat = evt.coordinate;
        this.initPoint(evt.coordinate[0], evt.coordinate[1]);
      });
    },
    initPoint(lng, lat) {
      if (lng && lat) {
        //清除所有feature
        if (this.vectorSource) {
          this.vectorSource.clear();
        }
        //添加feature图标
        this.Marker = new Feature({
          geometry: new Point([parseFloat(lng), parseFloat(lat)])
        });

        //设置style
        this.Marker.setStyle(
          new Style({
            image: new Icon({
              src: tagPng
            })
          })
        );

        this.vectorSource.addFeature(this.Marker);
        //重置中心点
        /*   this.map.getView().setCenter([parseFloat(lng), parseFloat(lat)]);
        this.map.getView().setZoom(12); */
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#rootMap {
  width: 100%;
  height: 100%;
}
#map {
  width: 88%;
  height: 99%;
}
</style>