<!--
 * @Author: jiangbotao
 * @Date: 2019-12-17 19:48:20
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-17 20:36:29
 * @FilePath: \supermapvue\src\components\ol\OL.vue
 -->
<template>
  <div >
    <div id="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { XYZ } from 'ol/source';
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import {Draw, Modify, Snap} from 'ol/interaction';
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';

export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    var tdt_vec = new TileLayer({
      source: new XYZ({
        url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
      })
    });
    var tdt_cva = new TileLayer({
      source: new XYZ({
        url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
      })
    });
    // 矢量绘制图层
    var source = new VectorSource();
    var vectorLayer = new VectorLayer({
        source: source,
        style: new Style({
            fill: new Fill({
                color: 'rgba(255, 0, 0, 0.2)'
            }),
            stroke: new Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new CircleStyle({
                radius: 7,
                fill: new Fill({
                    color: '#ffcc33'
                })
            })
        })
    });
    this.map = new Map({
        target: "map",
        layers: [
            tdt_vec, tdt_cva, vectorLayer
        ],
        view: new View({
            projection: "EPSG:4326",
            center: [120.79, 27.99],
            zoom: 12,
            minZoom: 10,
            maxZoom: 18
        })
    });

    var modify = new Modify({source: source});
    this.map.addInteraction(modify);
    modify.on('modifyend',function(e){
        var features = e.features.getArray();
        console.log(features);
    });

    var draw, snap; // global so we can remove them later
    function addInteractions(map) {
        draw = new Draw({
            source: source,
            type: 'Point'
        });
        draw.on('drawstart', function (e) {
            source.clear();  // implicit remove of last feature.
        });
        draw.on('drawend', function(evt){
            var feature = evt.feature;
            var p = feature.getGeometry();
            console.log(p.getCoordinates());
            var coord = p.getCoordinates();
            map.getView().animate({center: [coord[0], coord[1]]});
        });
        map.addInteraction(draw);
        snap = new Snap({source: source});
        map.addInteraction(snap);
    }
    
    /**
     * Handle change event.
     */
    // typeSelect.onchange = function(map) {
    //     map.removeInteraction(draw);
    //     map.removeInteraction(snap);
    //     addInteractions();
    // };

    addInteractions(this.map);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: white
}
</style>