<!--
 * @Author: jiangbotao
 * @Date: 2019-12-17 19:48:20
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-18 00:18:57
 * @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 WKT from 'ol/format/WKT';
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();
                var wktformat= new WKT();
                console.log('Draw: ' + wktformat.writeGeometry(p));
                var coord = p.getCoordinates();
                map.getView().animate({center: [coord[0], coord[1]]});
            });
            map.addInteraction(draw);
            snap = new Snap({source: source});
            map.addInteraction(snap);
        }
        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>