<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 WKT from "ol/format/WKT";
import { Select, 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
            })
        });

        ////select
        var select = new Select();
        this.map.addInteraction(select);
        ////draw
        var draw = new Draw({
            source: source,
            stopClick: true,
            freehand: false,
            type: "LineString"
        });
        this.map.addInteraction(draw);
        draw.setActive(true);
        draw.on("drawend", function(e) {
            draw.setActive(false);
            var feature = e.feature;
            var wktformat = new WKT();
            console.log("Draw: " + wktformat.writeGeometry(feature.getGeometry()));
        });
        ////modify
        var modify = new Modify({
            features: select.getFeatures()
        });
        this.map.addInteraction(modify);
        modify.on("modifyend", function(e) {
            var features = e.features.array_;
            var wktformat = new WKT();
            console.log("Modify: " + wktformat.writeGeometry(features[0].getGeometry()));
        });
    }
};
</script>

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