<template>
    <div style="width: 100vh;height: 20px;background-color: red;"></div>
    <h1>hello</h1>

</template>

<script setup>
import { onMounted } from 'vue'
import { getGridInfoList } from '@/api/Zodiac';
const ret = await getGridInfoList()
console.log('显示显示ret', ret)


onMounted(() => {
    initCanvas()
})

const initCanvas = () => {
    const canvas = document.getElementById("map")
    const ctx = canvas.getContext("2d")
    console.log('ctx', ctx)

    const width = canvas.width
    const height = canvas.height

}



// 示例经纬度数据
const points = [
    { name: "北京", lng: 116.4, lat: 39.9 },
    { name: "上海", lng: 121.47, lat: 31.23 },
    { name: "东京", lng: 139.69, lat: 35.68 },
    { name: "纽约", lng: -74.00, lat: 40.71 },
    { name: "伦敦", lng: -0.12, lat: 51.50 }
]


// Mercator 投影
function project(lng, lat) {

    const x = (lng + 180) * (width / 360)

    const latRad = lat * Math.PI / 180
    const mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2)))

    const y = (height / 2) - (width * mercN / (2 * Math.PI))

    return [x, y]
}

</script>

<style scoped>
</style>