高德地图 JS API示例->几何计算->其他-> 路径是否顺时针

使用 AMap.GeometryUtil.isClockwise ，判断路径是否为顺时针。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>是否顺时针</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }

        .info span {
            color: #0288d1;
        }
        .amap-overlay-text-container{
            border: 1px solid #000;
        }

    </style>
</head>
<body>
<div id="container"></div>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>
    //初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        center: [116.400274, 39.905812],
        zoom: 14
    });

    var path = [
        [116.403322, 39.920255],
        [116.410703, 39.897555],
        [116.402292, 39.892353],
        [116.389846, 39.891365]
    ]
  

    // 路径上点按顺序标明
    var markers = [{
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
        position: path[0]
    }, {
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
        position: path[1]
    }, {
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
        position: path[2]
    }, {
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b4.png',
        position: path[3]
    }];

    // 添加点标记，作为参照
    markers.forEach(function(marker) {
        new AMap.Marker({
            map: map,
            icon: marker.icon,
            position: [marker.position[0], marker.position[1]],
            offset: new AMap.Pixel(-9, -31)
        });
    });

    // 根据路径绘制多边形
    var polygon = new AMap.Polygon({
        map: map,
        path: path
    });

    var clockwise = AMap.GeometryUtil.isClockwise(path);
    var text = '该路径为逆时针方向';
    if(clockwise){
        text = '该路径为顺时针方向';
    }
    var textBox = new AMap.Text({
        position: new AMap.LngLat(116.403322, 39.920255),
        text: text,
        offset: new AMap.Pixel(90, -20)
    })
    map.add(textBox);

</script>
</body>
</html>

0 0 投票数

文章评分