<!--
 * @Author: Rain
 * @Date: 2024/05/22 14:02:59
 * @LastEditTime: 2024/05/23 15:04:36
 * @Description: Do Something
-->
<template>
    <div id="map" class="map"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import TileLayer from "ol/layer/Tile.js";
import { XYZ } from "ol/source";
import { fromLonLat } from "ol/proj";
import { Vector } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Point } from "ol/geom";
import { Icon, Style } from "ol/style";
import ZoomSlider from 'ol/control/ZoomSlider.js';
import {defaults as defaultControls} from 'ol/control.js';
import icon from "../../assets/location.png";
export default {
    name: "T-map",
    mounted() {
        this.map = new Map({
            target: "map",
            view: new View({
                projection: "EPSG:4326",
                center: fromLonLat([116.389, 39.903]), //地图中心
                zoom: 5, //默认缩放级别  
                minZoom: 5, //最小缩放级别
                maxZoom: 12, //最大缩放级
                extent: [70.3671875, 18.14576369243164, 134.92927612304688, 55.667146064662596]
            }),
            layers: [
                new TileLayer({
                    source: new XYZ({
                        url: "http://127.0.0.1:8010/tiles/{z}/{x}/{y}.png", //根据自己实际的地理位置
                    }),
                }),
                new VectorLayer({
                    id: "marker",
                    source: new Vector(),
                }),
            ],
            controls: defaultControls().extend([new ZoomSlider()]),
        });
        console.log(this.map.getView().calculateExtent())
        this.initEvent();
    },
    methods: {
        /**
         * 地图上打点
         * @param data
         */
        addMarker(data = { point: [120.2, 30.35] }) {
            const layer = this.map
                .getLayers()
                .getArray()
                .find((element) => {
                    return element.get("id") === "marker";
                });
            const source = layer.getSource();
            // const feature = new Feature({
            //     geometry: new Point(fromLonLat(data.point)),
            //     name: "marker",
            //     data,
            // });

            const feature= new Feature ({
                geometry: new Point(fromLonLat(data.point),'EPSG:4326'),
                name:"marker",
                data,
            })
            feature.setStyle(
                new Style({
                    image: new Icon({
                        src: icon,
                        scale: [0.3, 0.3],
                        anchor: [0.5, 1],
                        opacity: 1,
                    }),
                    // text: new Text({
                    //   font: "12px Calibri,sans-serif",
                    //   text: "",
                    //   fill: new Fill({
                    //     color: "red",
                    //   }),
                    // }),
                })
            );
            source.addFeature(feature);
        },
        /**
         * 初始化地图事件
         */
        initEvent() {
            this.map.on("click", (evt) => {
                const features = this.map.getFeaturesAtPixel(evt.pixel, {
                    hitTolerance: 1,
                });
                if (features && features.length > 0) {
                    const feature = features.at(0);
                    this.$emit("feature-click", feature.get("data"));
                }
            });
        },
        /**
         * 平移缩放
         * @param data
         */
        moveAndZoom(data = { point: [120.2, 30.35], zoom: 10 }) {
            this.map.getView().animate({
                center: fromLonLat(data.point),
                zoom: data.zoom,
                duration: 2000,
            });
        },
    },
};
</script>

<style scoped lang="scss">
.map {
    width: 100%;
    height: 100%
}
</style>