如何将经纬度转换为网页X、Y网格坐标并实现2D展示？

我希望将不同用户位置的经纬度值转换为类网格2D展示，其中X轴对应纬度、Y轴对应经度。请问如何使用HTML、CSS、JavaScript实现？我了解到可借助ArcGIS API将经纬度转换为X、Y坐标，但不清楚如何在屏幕上进行正确定位。以下是我获取经纬度的代码：

const getLocation = document.getElementById("btn");

getLocation.addEventListener("click", evt=> {
    if("geolocation" in navigator) {
        navigator.geolocation.getCurrentPosition(position=> {
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;

            console.log(latitude,longitude);
        },error=>{
            console.log(error.code);
        });
    }else {
        console.log("not supported")
    }
});

方案一：基础经纬度到屏幕坐标映射（无需第三方API） #

如果只是做简单的类网格展示，不需要专业GIS投影转换，可直接将经纬度线性映射到画布像素坐标，核心是通过固定的经纬度范围，把每个点的坐标缩放到画布尺寸内。

实现代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        #gridCanvas {
            border: 1px solid #333;
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
    <button id="btn">获取我的位置</button>
    <canvas id="gridCanvas"></canvas>

    <script>
        const canvas = document.getElementById('gridCanvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 600;

        // 定义经纬度范围（可自定义，比如只展示某城市区域）
        const latRange = { min: -90, max: 90 };
        const lngRange = { min: -180, max: 180 };
        const canvasW = canvas.width;
        const canvasH = canvas.height;

        // 初始化绘制网格
        drawGrid();

        const getLocation = document.getElementById("btn");
        getLocation.addEventListener("click", evt=> {
            if("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(position=> {
                    const { latitude, longitude } = position.coords;
                    // 转换经纬度到屏幕坐标：经度映射X轴，纬度映射Y轴（画布Y轴向下，需反转）
                    const screenX = ((longitude - lngRange.min) / (lngRange.max - lngRange.min)) * canvasW;
                    const screenY = canvasH - ((latitude - latRange.min) / (latRange.max - latRange.min)) * canvasH;
                    
                    // 绘制用户位置点
                    drawUserMarker(screenX, screenY, latitude, longitude);
                    console.log(`屏幕坐标：X=${screenX.toFixed(2)}, Y=${screenY.toFixed(2)}`);
                },error=>{
                    console.log(error.code);
                });
            }else {
                console.log("not supported")
            }
        });

        // 绘制网格线
        function drawGrid() {
            ctx.strokeStyle = '#eee';
            // 横向网格（对应纬度线）
            for (let y = 0; y <= canvasH; y += 50) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvasW, y);
                ctx.stroke();
            }
            // 纵向网格（对应经度线）
            for (let x = 0; x <= canvasW; x += 50) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvasH);
                ctx.stroke();
            }
            // 坐标轴标签
            ctx.fillStyle = '#333';
            ctx.font = '12px Arial';
            ctx.fillText('经度（Y轴对应）', canvasW - 100, 20);
            ctx.fillText('纬度（X轴对应）', 10, canvasH - 10);
        }

        // 绘制用户标记点及经纬度标注
        function drawUserMarker(x, y, lat, lng) {
            ctx.fillStyle = '#ff4444';
            ctx.beginPath();
            ctx.arc(x, y, 6, 0, Math.PI * 2);
            ctx.fill();
            // 标注经纬度
            ctx.fillStyle = '#333';
            ctx.fillText(`(${lat.toFixed(2)}, ${lng.toFixed(2)})`, x + 10, y - 10);
        }
    </script>
</body>
</html>

方案二：使用ArcGIS API进行专业坐标转换 #

如果需要精准的投影转换（比如Web墨卡托投影），可借助ArcGIS API将WGS84经纬度（GPS获取的格式）直接转为屏幕坐标，API会自动处理投影逻辑。

实现代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ArcGIS 经纬度转屏幕坐标</title>
    <!-- 引入ArcGIS API资源 -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.28/"></script>
    <style>
        #mapView {
            height: 600px;
            width: 800px;
            border: 1px solid #333;
        }
        #coordInfo {
            margin-top: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <button id="btn">获取我的位置</button>
    <div id="mapView"></div>
    <div id="coordInfo"></div>

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/SpatialReference"
        ], function(Map, MapView, Graphic, Point, SpatialReference) {
            // 创建基础地图
            const map = new Map({ basemap: "streets" });
            // 创建地图视图
            const view = new MapView({
                container: "mapView",
                map: map,
                center: [0, 0],
                zoom: 2
            });

            const getLocation = document.getElementById("btn");
            getLocation.addEventListener("click", evt=> {
                if("geolocation" in navigator) {
                    navigator.geolocation.getCurrentPosition(position=> {
                        const { latitude, longitude } = position.coords;
                        
                        // 创建WGS84标准经纬度点
                        const geoPoint = new Point({
                            x: longitude,
                            y: latitude,
                            spatialReference: SpatialReference.WGS84
                        });

                        // 转换为屏幕坐标
                        const screenPoint = view.toScreen(geoPoint);
                        document.getElementById('coordInfo').textContent = 
                            `经纬度：(${latitude.toFixed(2)}, ${longitude.toFixed(2)}) | 屏幕坐标：X=${screenPoint.x.toFixed(2)}, Y=${screenPoint.y.toFixed(2)}`;

                        // 在地图上添加用户位置标记
                        view.graphics.add(new Graphic({
                            geometry: geoPoint,
                            symbol: {
                                type: "simple-marker",
                                color: [255, 0, 0],
                                size: 12
                            }
                        }));
                    },error=>{
                        console.log(error.code);
                    });
                }else {
                    console.log("not supported")
                }
            });
        });
    </script>
</body>
</html>

关键说明 #

• view.toScreen()方法会自动处理地理坐标到屏幕坐标的投影转换，无需手动计算范围；
• 如果不需要底图，可将basemap设为"blank"，仅用API做坐标转换。

内容的提问来源于stack exchange，提问作者Jess