<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.30,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>