测试关于台风点是否在警戒线内

原创已于 2022-04-30 23:02:46 修改 · 671 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#测试台风点是否在警戒线内 #测试台风点的位置 #测试台风警戒线 #测试百度地图api #用百度地图api

于 2022-04-30 18:11:07 首次发布

js 同时被 2 个专栏收录

76 篇文章

订阅专栏

百度地图api

8 篇文章

订阅专栏

这篇博客介绍了如何利用JavaScript来判断点是否在连续折线（如台风警戒线）内，并将结果在地图上进行可视化展示。通过遍历测试数据，调用`judgePointInWarning`方法进行判断，然后使用不同图标表示点在24h、48h警戒线内外。最后，将判断结果在地图上绘制出来，实现了动态的台风预警效果。

其实这文跟上文 js判断点在连续折线哪一侧有关系，主要用来测试台风点是否在警戒线以内

1. 先准备测试数据

let arr1 = [   
    [104, 0], [106, 0], [105, -1], [105, 1], [104, -1], [106, 1],
    [112, 4.5], [114, 4.5], [113, 3.5], [113, 5.5], [114, 3.5], [111, 5.5], 
    [118, 11], [120, 11], [119, 10], [119, 12], [118, 12], [118, 10], 
    [118, 18], [120, 18], [119, 17], [119, 19], [118, 19], [120, 17], 
    [126, 22], [128, 22], [127, 21], [127, 23], [126, 23], [128, 23],
    [126, 34], [128, 34], [127, 33], [127, 35], [126, 35], [128, 33]
]
let arr2 = [
    [119, 0], [121, 0], [120, -1], [120, 1], [119, 1], [121, -1], 
    [131, 15], [133, 15], [132, 14], [132, 16], [131, 16], [133, 14],
    [131, 34], [133, 34], [132, 33], [132, 35], [131, 35], [133, 33]
]
//	用三种图标表示24h以内、48h以内、48h以外
let testColors = ['images/ellipse1.png', 'images/ellipse4.png', 'images/ellipse6.png'];

2. 方法：将判断结果在地图上画出来

function testByDrawPointCheckWarning(arr) {
    arr.forEach(item => {
        let vals = judgePointInWarning(item, earlyWarnLine);
        let images = testColors[vals.length];   
        myIcon = new BMap.Icon(images, new BMap.Size(6, 6));
        var marker2 = new BMap.Marker(new BMap.Point(...item), { 
        	icon: myIcon, 
        	offset: new BMap.Size(0, 0) 
        }); // 创建标注

        marker2.addEventListener("click", function(e) {
            console.log(item);	//	该事件用来参考判断具体是哪个点
        });
        map.addOverlay(marker2);
    })
}

judgePointInWarning 方法在上文【js判断点在连续折线哪一侧】已定义。
earlyWarnLine 在上文【百度地图画24h和48h台风警戒线】已定义。

3. 测试及结果

	testByDrawPointCheckWarning(arr1);
    testByDrawPointCheckWarning(arr2);

结果符合预期
在这里插入图片描述