Object:Geometry Library/spherical

qq.maps.geometry.spherical 对象

效用函数，计算角度、距离和面积。

静态方法

方法	返回值	说明
`computeArea(path:Array.<LatLng> \| MVCArray.<LatLng>, radius?:Number)`	`Number`	返回闭合路径的面积。返回的面积单位为平方米。
`computeDistanceBetween(from:LatLng, to:LatLng, radius?:Number)`	`Number`	返回两个坐标点间的距离（单位：米）。
`computeHeading(from:LatLng, to:LatLng)`	`Number`	返回从一个坐标到另一个坐标的航向。航向是指从一个坐标指向另一个坐标的向量与正北方向的夹角，范围为[-180,180)。
`computeLength(path:Array.<LatLng> \| MVCArray.<LatLng>)`	`Number`	返回给定路径的长度（单位：米）。
`computeOffset(from:LatLng, distance:Number, heading:Number, radius?:Number)`	`LatLng`	通过起始点坐标、距离以及航向算出终点坐标。
`computeOffsetOrigin(to:LatLng, distance:Number, heading:Number, radius?:Number)`	`LatLng`	通过终点坐标、距离以及航向算出起始点坐标。
`computeSignedArea(loop:Array.<LatLng> \| MVCArray.<LatLng>, radius?:Number)`	`Number`	返回闭合路径的有向面积。有向面积可以用于检测路径的方向。返回的有向面积单位为平方米。
`interpolate(from:LatLng, to:LatLng, fraction:Number)`	`LatLng`	返回在起终点连线上位于给定比例的点坐标。比例值fraction范围为0~1。

实例

本示例介绍,效用函数的方法用法

JavaScript

function init() {
    var a, b, c, d, e, f = [];

    a = new qq.maps.LatLng(39.93, 116.44004334);
    b = new qq.maps.LatLng(39.93, 116.35421264);
    c = new qq.maps.LatLng(39.896775, 116.35421264);
    d = new qq.maps.LatLng(39.89, 116.44004334);


    //初始化地图
    var map = new qq.maps.Map(container, {
        // 地图的中心地理坐标。
        center: new qq.maps.LatLng(39.91, 116.397128),
        zoom: 12
    });

    //给A,B,C,D四点加文字标注
    var label1 = new qq.maps.Label({
        offset: new qq.maps.Size(5, -10),
        content: "A",
        map: map,
        style: {
            color: "#000000",
            width: "20px",
            height: "20px",
            textAlign: "center",
            textIndent: "0px"
        },
        position: a
    });
    var label2 = new qq.maps.Label({
        offset: new qq.maps.Size(-30, -10),
        content: "B",
        map: map,
        style: {
            color: "#000000",
            width: "20px",
            height: "20px",
            textAlign: "center",
            textIndent: "0px"
        },
        position: b
    });
    var label3 = new qq.maps.Label({
        offset: new qq.maps.Size(-30, -10),
        content: "C",
        map: map,
        style: {
            color: "#000000",
            width: "20px",
            height: "20px",
            textAlign: "center",
            textIndent: "0px"
        },
        position: c
    });
    var label4 = new qq.maps.Label({
        offset: new qq.maps.Size(5, -10),
        content: "D",
        map: map,
        style: {
            color: "#000000",
            width: "20px",
            height: "20px",
            textAlign: "center",
            textIndent: "0px"
        },
        position: d
    });


    //ABCD形成闭合路径
    var path = [a, b, c, d];
    //用覆盖物显示闭合路径
    new qq.maps.Polygon({
        path: [a, b, c, d],
        map: map
    });

    //计算闭合路径的面积
    document.getElementById("area").innerHTML = "封闭覆盖物的面积是:" + qq.maps.geometry.spherical.computeArea(path) + "平方米";


    //把线段CD设置为折线覆盖物
    var polyline = new qq.maps.Polyline({
        path: [c, d],
        strokeColor: '#000000',
        strokeWeight: 5,
        editable: false,
        map: map
    });

    //计算两点间的距离
    document.getElementById("res").innerHTML = "CD两点间距离是:" + qq.maps.geometry.spherical.computeDistanceBetween(c, d) + "米";

    //计算航向
    document.getElementById("course").innerHTML = "C到D的航向是:" + qq.maps.geometry.spherical.computeHeading(c, d) + "度";

    //计算路径长度
    document.getElementById("length").innerHTML = "BCD路径长度:" + qq.maps.geometry.spherical.computeLength([b, c, d]) + "米";

    //通过起始点坐标、距离以及航向算出终点坐标。
    e = qq.maps.geometry.spherical.computeOffset(a, 2000, 30);
    //为终点E设置标志
    var markerE = new qq.maps.Marker({
        position: e,
        map: map
    });
    //为终点E设置文字标注
    var label5 = new qq.maps.Label({
        offset: new qq.maps.Size(5, -10),
        content: "E",
        map: map,
        style: {
            color: "#000000",
            width: "20px",
            height: "20px",
            textAlign: "center",
            textIndent: "0px"
        },
        position: e
    });

    document.getElementById("eLatLng").innerHTML = "E是距离A点2000米航向30度的点,E的坐标是:" + e;

    //通过终点坐标、距离以及航向算出起始点坐标。
    document.getElementById("aLatLng").innerHTML = "给出E点坐标,E是距离A点2000米航向30度的点,算出A点坐标:" + qq.maps.geometry.spherical.computeOffsetOrigin(e, 2000, 30);

    //返回闭合路径的有向面积。有向面积可以用于检测路径的方向。返回的有向面积单位为平方米。
    document.getElementById("dba").innerHTML = "由D,B,A组成闭合路径的有向面积:" + qq.maps.geometry.spherical.computeSignedArea([d, b, a]) + "平方米";

    //返回在起终点连线上位于给定比例的点坐标。比例值fraction范围为0~1。
    f = qq.maps.geometry.spherical.interpolate(c, d, 0.4);

    //为F点设置标志
    var markerF = new qq.maps.Marker({
        position: f,
        map: map
    });
    //为F点设置文字标注
    var label6 = new qq.maps.Label({
        offset: new qq.maps.Size(-10, 8),
        content: "F",
        map: map,
        style: {
            color: "#000000",
            width: "20px",
            height: "20px",
            textAlign: "center",
            textIndent: "0px"
        },
        position: f
    });
    document.getElementById("fLatLng").innerHTML = "F点在CD上,比例为0.4,F点坐标为:" + f;

}

JavaScript+HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>腾讯地图-效用函数示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&libraries=drawing,geometry,autocomplete,convertor"></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            height: 100%
        }
        body div {
            text-indent: 20px;
            line-height: 22px;
        }
    </style>
</head>

<body onload="init()">
    <div id="container" style="width:660px;height:400px;"></div>
    <div id="area" style="width:660px;"></div>
    <div id="res" style="width:660px;"></div>
    <div id="course" style="width:660px;"></div>
    <div id="length" style="width:660px;"></div>
    <div id="eLatLng" style="width:660px;"></div>
    <div id="aLatLng" style="width:660px;"></div>
    <div id="dba" style="width:660px;"></div>
    <div id="fLatLng" style="width:660px;"></div>


    <script type="text/javascript">
        function init() {
            var a, b, c, d, e, f = [];

            a = new qq.maps.LatLng(39.93, 116.44004334);
            b = new qq.maps.LatLng(39.93, 116.35421264);
            c = new qq.maps.LatLng(39.896775, 116.35421264);
            d = new qq.maps.LatLng(39.89, 116.44004334);


            //初始化地图
            var map = new qq.maps.Map(container, {
                // 地图的中心地理坐标。
                center: new qq.maps.LatLng(39.91, 116.397128),
                zoom: 12
            });

            //给A,B,C,D四点加文字标注
            var label1 = new qq.maps.Label({
                offset: new qq.maps.Size(5, -10),
                content: "A",
                map: map,
                style: {
                    color: "#000000",
                    width: "20px",
                    height: "20px",
                    textAlign: "center",
                    textIndent: "0px"
                },
                position: a
            });
            var label2 = new qq.maps.Label({
                offset: new qq.maps.Size(-30, -10),
                content: "B",
                map: map,
                style: {
                    color: "#000000",
                    width: "20px",
                    height: "20px",
                    textAlign: "center",
                    textIndent: "0px"
                },
                position: b
            });
            var label3 = new qq.maps.Label({
                offset: new qq.maps.Size(-30, -10),
                content: "C",
                map: map,
                style: {
                    color: "#000000",
                    width: "20px",
                    height: "20px",
                    textAlign: "center",
                    textIndent: "0px"
                },
                position: c
            });
            var label4 = new qq.maps.Label({
                offset: new qq.maps.Size(5, -10),
                content: "D",
                map: map,
                style: {
                    color: "#000000",
                    width: "20px",
                    height: "20px",
                    textAlign: "center",
                    textIndent: "0px"
                },
                position: d
            });


            //ABCD形成闭合路径
            var path = [a, b, c, d];
            //用覆盖物显示闭合路径
            new qq.maps.Polygon({
                path: [a, b, c, d],
                map: map
            });

            //计算闭合路径的面积
            document.getElementById("area").innerHTML = "封闭覆盖物的面积是:" + qq.maps.geometry.spherical.computeArea(path) + "平方米";


            //把线段CD设置为折线覆盖物
            var polyline = new qq.maps.Polyline({
                path: [c, d],
                strokeColor: '#000000',
                strokeWeight: 5,
                editable: false,
                map: map
            });

            //计算两点间的距离
            document.getElementById("res").innerHTML = "CD两点间距离是:" + qq.maps.geometry.spherical.computeDistanceBetween(c, d) + "米";

            //计算航向
            document.getElementById("course").innerHTML = "C到D的航向是:" + qq.maps.geometry.spherical.computeHeading(c, d) + "度";

            //计算路径长度
            document.getElementById("length").innerHTML = "BCD路径长度:" + qq.maps.geometry.spherical.computeLength([b, c, d]) + "米";

            //通过起始点坐标、距离以及航向算出终点坐标。
            e = qq.maps.geometry.spherical.computeOffset(a, 2000, 30);
            //为终点E设置标志
            var markerE = new qq.maps.Marker({
                position: e,
                map: map
            });
            //为终点E设置文字标注
            var label5 = new qq.maps.Label({
                offset: new qq.maps.Size(5, -10),
                content: "E",
                map: map,
                style: {
                    color: "#000000",
                    width: "20px",
                    height: "20px",
                    textAlign: "center",
                    textIndent: "0px"
                },
                position: e
            });

            document.getElementById("eLatLng").innerHTML = "E是距离A点2000米航向30度的点,E的坐标是:" + e;

            //通过终点坐标、距离以及航向算出起始点坐标。
            document.getElementById("aLatLng").innerHTML = "给出E点坐标,E是距离A点2000米航向30度的点,算出A点坐标:" + qq.maps.geometry.spherical.computeOffsetOrigin(e, 2000, 30);

            //返回闭合路径的有向面积。有向面积可以用于检测路径的方向。返回的有向面积单位为平方米。
            document.getElementById("dba").innerHTML = "由D,B,A组成闭合路径的有向面积:" + qq.maps.geometry.spherical.computeSignedArea([d, b, a]) + "平方米";

            //返回在起终点连线上位于给定比例的点坐标。比例值fraction范围为0~1。
            f = qq.maps.geometry.spherical.interpolate(c, d, 0.4);

            //为F点设置标志
            var markerF = new qq.maps.Marker({
                position: f,
                map: map
            });
            //为F点设置文字标注
            var label6 = new qq.maps.Label({
                offset: new qq.maps.Size(-10, 8),
                content: "F",
                map: map,
                style: {
                    color: "#000000",
                    width: "20px",
                    height: "20px",
                    textAlign: "center",
                    textIndent: "0px"
                },
                position: f
            });
            document.getElementById("fLatLng").innerHTML = "F点在CD上,比例为0.4,F点坐标为:" + f;

        }
    </script>
</body>

</html>

新窗口打开在线试一试