OpenLayers 教程

在地图开发过程中，尤其是涉及手持设备，有时会遇到GPS原始坐标数据（116°23’28.44",39°54’25.77"），为了方便使用，需要转换为经纬度（116.39123,39.9071583）。

这里介绍一下GPS坐标和经纬度坐标互转。

Openlayers GPS（度分秒）和经纬度坐标相互互转换

<html lang="en">
<head>
    <meta charset="utf-8">
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css">
    <style>
        /* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */
        .map {
            height: 400px;
            width: 100%;
            float: left;
        }
    </style>
    <!--注意：openlayers 原版的比较慢，这里引起自己服务器版-->
    <script src="http://openlayers.vip/examples/resources/ol.js"></script>
    <script src="./tiandituLayers.js"></script>
    <title>OpenLayers example</title>
</head>
<body>
<h2>Feature transfer</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div>
<!--注意：本示例将 高德腾讯坐标设置为黑色；将百度坐标设置为黄色 -->
<!--注意：本示例将 高德腾讯坐标转为WGS84颜色设置为粉色；将百度坐标转为WS84颜色设置为绿色 -->
<script type="text/javascript">
    var map = new ol.Map({
        // 地图容器
        target: 'map',
        // 地图图层，比如底图、矢量图等
        layers: [
            getIMG_CLayer(),
            getIBO_CLayer(),
            getCIA_CLayer(),
        ],
        // 地图视野
        view: new ol.View({
            projection: "EPSG:4326",
            // 定位
            center: [116, 39],
            // 缩放
            zoom: 4,
            maxZoom: 18,
            minZoom: 1,
        })
    });


    var xy = [116.391232637988, 39.907157016256974];
    // 初始点
    var originPoint = new ol.Feature({
        geometry: new ol.geom.Point(xy),
        name: 'My Point'
    });

    // 矢量图层
    var layer = initVectorLayer();

    /**
     * @todo 矢量图层
     * @returns {VectorLayer}
     * @constructor
     */
    function initVectorLayer() {
        //实例化一个矢量图层Vector作为绘制层
        let source = new ol.source.Vector();
        //创建一个图层
        let customVectorLayer = new ol.layer.Vector({
            source: source,
            zIndex: 2,
            //设置样式
            style: new ol.style.Style({
                //边框样式
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 5,
                    lineDash: [3, 5]
                }),
                //填充样式
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.3)',
                }),
                image: new ol.style.Circle({
                    radius: 9,
                    fill: new ol.style.Fill({
                        color: 'red',
                    })
                })
            }),
        });
        //将绘制层添加到地图容器中
        map.addLayer(customVectorLayer);

        customVectorLayer.getSource().addFeatures([originPoint]);

        var extent = customVectorLayer.getSource().getExtent();

        map.getView().fit(extent, {
            duration: 1,//动画的持续时间,
            callback: null,
        });
        return customVectorLayer;
    }

    /**
     * 添加点到地图
     * @param geom
     * @param color 颜色
     * @returns {Feature|Feature|null}
     */
    function addFeature(geom, color) {
        let temp = new ol.Feature({
            geometry: new ol.geom.Point(geom),
            name: 'My Point'
        });
        let style = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 9,
                fill: new ol.style.Fill({
                    color: color || 'blue',
                })
            })
        });
        temp.setStyle(style);
        layer.getSource().addFeatures([temp]);
        move();
        return temp;
    }

    //============转换方法 start ===================================================================================

    /**
     * 度分秒转经纬度
     * @param dfm
     * @returns {number}
     */
    function convertGPSToXY(dfm) {
        const arr1 = dfm.split('°');
        const d = arr1[0];
        const arr2 = arr1[1].split("'")
        let f = arr2[0] || 0;
        const m = arr2[1].replace('"', '') || 0;
        f = parseFloat(f) + parseFloat(m / 60);
        var du = parseFloat(f / 60) + parseFloat(d);
        return du;
    }

    /**
     * 经纬度转度分秒
     * @param point
     * @returns {*}
     */
    function convertXYToGPS(point) {

        let xy;
        if (point instanceof Array) {
            xy = point;
        } else {
            point = point + "";
            xy = point.split(',');
        }

        let dPoint = [];
        let dPointStr = "";
        for (let i = 0; i < xy.length; i++) {
            const mElement = xy[i] + "";
            const arr1 = mElement.split(".");
            const d = arr1[0];
            let tp = "0." + arr1[1]
            tp = String(tp * 60); //这里进行了强制类型转换
            const arr2 = tp.split(".");
            const f = arr2[0];
            tp = "0." + arr2[1];
            tp = tp * 60;
            const m = tp.toFixed(2);
            const dfm = d + "°" + f + "'" + m + "\"";
            dPointStr += "," + dfm;
            dPoint.push(dfm);
        }

        dPointStr = dPointStr.replace(',', '');

        return point instanceof Array ? dPoint : dPointStr;
    }

    var gps;

    /**
     * @todo gps坐标转为WKT格式
     */
    function GPSToXY() {
        if (!gps) {
            alert("请先点击 XY坐标转为GPS坐标！");
            return;
        }
        // 参数包含x和y，并且以 , 拼接
        if (gps instanceof Array) {
            alert("XY数组：" + [convertGPSToXY(gps[0]), convertGPSToXY(gps[1])]);
            // 参数只有x或者y
        } else {
            alert("X或Y：" + convertGPSToXY(gps));
        }

    }

    /**
     * @todo WKT坐标转为gps格式
     */
    function XYToGPS() {
        // 获取坐标
        // var point = xy;
        var point = originPoint.getGeometry().getCoordinates();
        gps = convertXYToGPS(point);
        alert("gps数组：" + gps);
    }

    //===========转换方法 end ====================================================================================

</script>
<button id="WKTToGPS" onclick="XYToGPS()">XY坐标转为GPS坐标</button>
<button id="GPSToWKT" onclick="GPSToXY()">GPS坐标转为XY坐标</button>
</body>
</html>