要在 Alibaba Cloud Linux 3 上设置开机启动 ossftp,你可以通过创建一个系统服务来实现。以下是具体步骤:
安装 ossftp:
按照阿里云官方文档安装 ossftp。
创建服务文件:
首先,你需要创建一个服务文件。使用以下命令创建一个新的服务文件:
sudo nano /etc/systemd/system/ossftp.service
编辑服务文件:
在打开的编辑器中,添加以下内容:
[Unit]
Description=OSS FTP Service
After=network.target
[Service]
ExecStart=/bin/bash /root/ossftp-1.2.0-linux-mac/start.sh
Restart=always
User=root
[Install]
WantedBy=multi-user.target
这里的 ExecStart 指向你的 start.sh 脚本的路径。
保存并退出。
重新加载系统服务:
运行以下命令以重新加载系统服务,使新创建的服务生效:
sudo systemctl daemon-reload
启用服务开机启动:
使用以下命令启用服务,使其在系统启动时自动运行:
sudo systemctl enable ossftp.service
启动服务:
你可以立即启动服务以测试其是否正常工作:
sudo systemctl start ossftp.service
检查服务状态:
使用以下命令检查服务的状态,确保它正在运行:
sudo systemctl status ossftp.service
如果一切设置正确,ossftp 应该会在每次系统启动时自动运行。
如果在你的系统上没有安装 nano 编辑器,你可以使用其他文本编辑器,比如 vi 或 vim。
如果你需要安装 nano,可以使用以下命令:
sudo yum install nano
宝塔面板中-安全-系统防火墙 功能非常丰富,特别是“地区规则”用来屏蔽来自国外的请求非常有用,那些通过 URL 来找网站漏洞的恶意请求大多来自国外。但是添加规则经常无反应
于是找到这个功能对应的配置文件:/etc/firewalld/zones/public.xml
<?xml version="1.0" encoding="utf-8"?>
<zone>
<short>Public</short>
<description>For use in public areas. You do not trust the other computers on networks to not harm your computer. Only selected incoming connections are accepted.</description>
<service name="ssh"/>
<service name="dhcpv6-client"/>
<port protocol="tcp" port="80"/>
<port protocol="tcp" port="443"/>
<masquerade/>
<rule family="ipv4">
<source address="43.131.232.135"/>
<drop/>
</rule>
<rule family="ipv4">
<source address="103.150.11.45"/>
<drop/>
</rule>
<rule>
<source ipset="US"/>
<drop/>
</rule>
<rule>
<source ipset="GB"/>
<drop/>
</rule>
</zone>
修改完成后重启防火墙。
但是看到的效果好像并不一致,甚至有时候服务器重启后防火墙是关闭的,但是有时候又是生效的。
关键的问题是CPU占用异常高。
反正宝塔的系统防火墙功能挺好挺强大,但是用起来不稳定不顺手,有些暴殄天物了。
相关阅读:
2024年8月30日补充 :宝塔面板中配置禁用IP等规则时,提示保存成功或未提醒是否成功,但效果是未成功。其实在宝塔自己的配置里已经记录了(包含备注),但在系统防火墙配置文件中未更改成功,手动修改系统防火墙配置文件就能完全修改成功。(系统防火墙配置文件中没有备注信息,根据IP地址等规则与宝塔自己的配置文件里的记录关联后,在宝塔面板安全模块中展示出来就有备注了。)
2024年8月30日下午补充:在宝塔的软件商店找到这个应用,看到红色的说明,啥都明白了:
于是果断关闭了系统防火墙,开始研究其它替代方案。
推荐使用 SignalR 来平替 WebSocket,参考教程。
【服务端(.NET)】
一、创建 WebSocketHandler 类,用于处理客户端发送过来的消息,并分发到其它客户端
public class WebSocketHandler
{
private static List<WebSocket> connectedClients = [];
public static async Task Handle(WebSocket webSocket)
{
connectedClients.Add(webSocket);
byte[] buffer = new byte[1024];
WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
while (!result.CloseStatus.HasValue)
{
string message = Encoding.UTF8.GetString(buffer, 0, result.Count);
Console.WriteLine($"Received message: {message}");
// 处理接收到的消息,例如广播给其他客户端
await BroadcastMessage(message, webSocket);
result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), CancellationToken.None);
}
connectedClients.Remove(webSocket);
await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}
private static async Task BroadcastMessage(string message, WebSocket sender)
{
foreach (var client in connectedClients)
{
if (client != sender && client.State == WebSocketState.Open)
{
await client.SendAsync(Encoding.UTF8.GetBytes(message), WebSocketMessageType.Text, true, CancellationToken.None);
}
}
}
}
二、在 Program.cs 或 Startup.cs 中插入:
// 添加 WebSocket 路由
app.UseWebSockets();
app.Use(async (context, next) =>
{
if (context.Request.Path == "/chat")
{
if (context.WebSockets.IsWebSocketRequest)
{
WebSocket webSocket = await context.WebSockets.AcceptWebSocketAsync();
await WebSocketHandler.Handle(webSocket);
}
else
{
context.Response.StatusCode = 400;
}
}
else
{
await next();
}
});
这里的路由路径可以更改,此处将会创建一个 WebSocket 连接,并将其传递给 WebSocketHandler.Handle 方法进行处理。
也可以用控制器来接收 WebSocket 消息。
【客户端(JS)】
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>WebSocket 示例(JS + ASP.NET)</title>
<style>
#list { width: 100%; max-width: 500px; }
.tip { color: red; }
</style>
</head>
<body>
<h2>WebSocket 示例(JS + ASP.NET)</h2>
<textarea id="list" readonly rows="20"></textarea>
<div>
<input type="text" id="msg" />
<button onclick="fn_send()">发送</button>
<button onclick="fn_disconnect()">断开</button>
</div>
<p id="tip_required">请输入要发送的内容</p>
<p id="tip_closed">WebSocket 连接未建立</p>
<script>
var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port + "/chat";
var webSocket;
var domList = document.getElementById('list');
// 初始化 WebSocket 并连接
function fn_ConnectWebSocket() {
webSocket = new WebSocket(wsUrl);
// 向服务端发送连接请求
webSocket.onopen = function (event) {
var content = domList.value;
content += "[ WebSocket 连接已建立 ]" + '\r\n';
domList.innerHTML = content;
document.getElementById('tip_closed').style.display = 'none';
webSocket.send(JSON.stringify({
msg: 'Hello'
}));
};
// 接收服务端发送的消息
webSocket.onmessage = function (event) {
if (event.data) {
var content = domList.value;
content += event.data + '\r\n';
domList.innerHTML = content;
domList.scrollTop = domList.scrollHeight;
}
};
// 各种情况导致的连接关闭或失败
webSocket.onclose = function (event) {
var content = domList.value;
content += "[ WebSocket 连接已关闭,3 秒后自动重连 ]" + '\r\n';
domList.innerHTML = content;
document.getElementById('tip_closed').style.display = 'block';
setTimeout(function () {
var content = domList.value;
content += "[ 正在重连... ]" + '\r\n';
domList.innerHTML = content;
fn_ConnectWebSocket();
}, 3000); // 3 秒后重连
};
}
// 检查连接状态
function fn_IsWebSocketConnected() {
if (webSocket.readyState === WebSocket.OPEN) {
document.getElementById('tip_closed').style.display = 'none';
return true;
} else {
document.getElementById('tip_closed').style.display = 'block';
return false;
}
}
// 发送内容
function fn_send() {
if (fn_IsWebSocketConnected()) {
var message = document.getElementById('msg').value;
document.getElementById('tip_required').style.display = message ? 'none' : 'block';
if (message) {
webSocket.send(JSON.stringify({
msg: message
}));
}
}
}
// 断开连接
function fn_disconnect() {
if (fn_IsWebSocketConnected()) {
// 部分浏览器调用 close() 方法关闭 WebSocket 时不支持传参
// webSocket.close(001, "Reason");
webSocket.close();
}
}
// 执行连接
fn_ConnectWebSocket();
</script>
</body>
</html>
【在线示例】
https://xoyozo.net/Demo/JsNetWebSocket
【其它】
-
服务端以 IIS 作为 Web 服务器,那么需要安装 WebSocket 协议
-
一个连接对应一个客户端(即 JS 中的 WebSocket 对象),注意与会话 Session 的区别
-
在实际项目中使用应考虑兼容性问题
-
程序设计应避免 XSS、CSRF 等安全隐患
-
参考文档:https://learn.microsoft.com/zh-cn/aspnet/core/fundamentals/websockets
语言集成查询(LINQ)为 C# 和 VB 提供语言级查询功能和高阶函数 API,让你能够编写具有很高表达力度的声明性代码。
LINQ 有两种写法:查询语法和方法语法,查询语法又称查询表达式语法。
查询语法:
from 变量名 in 集合 where 条件 select 结果变量
方法语法:
集合.Where(变量名 => 条件)
LINQ 的标准查询运算符及语法示例
类型 | 操作符 | 功能 | 方法语法 | 查询语法 |
投影操作符 | Select | 用于从集合中选择指定的属性或转换元素 |
|
|
SelectMany | 用于在嵌套集合中选择并平铺元素 |
|
| |
限制操作符 | Where | 根据指定的条件筛选集合中的元素 |
|
|
排序操作符 | OrderBy、OrderByDescending、ThenBy、ThenByDescending | 用于对集合中的元素进行排序 |
|
|
Reverse | 将集合中的元素顺序反转 |
| ||
联接操作符 | Join GroupJoin | 用于在两个集合之间执行内连接(Join)操作,或者对一个集合进行分组连接(GroupJoin)操作 | 内联接
左连接
| 内联接
左连接
|
分组操作符 | GroupBy | 根据指定的键对集合中的元素进行分组 | ||
串联操作符 | Concat | 将两个集合连接成一个新集合 | ||
聚合操作符 | Aggregate、Average、Count、LongCount、Max、Min、Sum | Aggregate 可以用于在集合上执行自定义的累积函数,其他方法用于计算集合中的元素的平均值、总数、最大值、最小值和总和 | ||
集合操作符 | Distinct、Union、Intersect、Except | 用于执行集合间的不同操作,Distinct 移除重复元素,Union 计算两个集合的并集,Intersect 计算两个集合的交集,Except 计算一个集合相对于另一个集合的差集 | ||
生成操作符 | Empty、Range、Repeat | Empty 创建一个空集合,Range 创建一个包含一系列连续数字的集合,Repeat 创建一个重复多次相同元素的集合 | ||
转换操作符 | AsEnumerable、Cast、OfType、ToArray、ToDictionary、ToList、ToLookup | 这些方法用于将集合转换为不同类型的集合或字典 | ||
元素操作符 | DefaultIfEmpty、ElementAt、ElementAtOrDefault、First、Last、FirstOrDefault、LastOrDefault、Single、SingleOrDefault | 这些方法用于获取集合中的元素,处理可能的空集合或超出索引的情况 | ||
相等操作符 | SequenceEqual | 用于比较两个集合是否包含相同的元素,顺序也需要相同 | ||
量词操作符 | All、Any、Contains | 用于检查集合中的元素是否满足特定条件,All 检查是否所有元素都满足条件,Any 检查是否有任何元素满足条件,Contains 检查集合是否包含特定元素 | ||
分割操作符 | Skip、SkipWhile、Take、TakeWhile | 用于从集合中跳过一些元素或只取一部分元素,可以结合特定条件进行操作 |
了解立即执行与延迟执行可以大大改善性能。
错误 TS5055 无法写入文件“***.js”,因为它会覆盖输入文件。
添加 tsconfig.json 文件有助于组织包含 TypeScript 和 JavaScript 文件的项目。有关详细信息,请访问 https://aka.ms/tsconfig。
检查“输出”窗口,找到“error”的行,并修复该错误。
一种可能的情况是,使用了 vue3 的 computed 计算属性。原因未知,尝试又定义了一个变量并使用 watch 侦听原变量来给它赋值,同样报错。
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
namespace xxx.xxx.xxx.Controllers
{
public class DiscuzTinyintViewerController : Controller
{
public IActionResult Index()
{
using var context = new Data.xxx.xxxContext();
var conn = context.Database.GetDbConnection();
conn.Open();
using var cmd = conn.CreateCommand();
cmd.CommandText = "SELECT `TABLE_NAME` FROM information_schema.TABLES WHERE TABLE_SCHEMA = DATABASE();";
Dictionary<string, List<FieldType>?> tables = new();
using var r = cmd.ExecuteReader();
while (r.Read())
{
tables.Add((string)r["TABLE_NAME"], null);
}
conn.Close();
foreach (var table in tables)
{
var conn2 = context.Database.GetDbConnection();
conn2.Open();
using var cmd2 = conn2.CreateCommand();
cmd2.CommandText = "DESCRIBE " + table.Key;
using var r2 = cmd2.ExecuteReader();
List<FieldType> fields = new();
while (r2.Read())
{
if (((string)r2[1]).Contains("tinyint(1)"))
{
fields.Add(new()
{
Field = (string)r2[0],
Type = (string)r2[1],
Null = (string)r2[2],
});
}
}
conn2.Close();
tables[table.Key] = fields;
}
foreach (var table in tables)
{
foreach (var f in table.Value)
{
var conn3 = context.Database.GetDbConnection();
conn3.Open();
using var cmd3 = conn3.CreateCommand();
cmd3.CommandText = $"SELECT {f.Field} as F, COUNT({f.Field}) as C FROM {table.Key} GROUP BY {f.Field}";
using var r3 = cmd3.ExecuteReader();
List<FieldType.ValueCount> vs = new();
while (r3.Read())
{
vs.Add(new() { Value = Convert.ToString(r3["F"]), Count = Convert.ToInt32(r3["C"]) });
}
conn3.Close();
f.groupedValuesCount = vs;
}
}
return Json(tables.Where(c => c.Value != null && c.Value.Count > 0));
}
private class FieldType
{
public string Field { get; set; }
public string Type { get; set; }
public string Null { get; set; }
public List<ValueCount> groupedValuesCount { get; set; }
public class ValueCount
{
public string Value { get; set; }
public int Count { get; set; }
}
public string RecommendedType
{
get
{
if (groupedValuesCount == null || groupedValuesCount.Count < 2)
{
return "无建议";
}
else if (groupedValuesCount.Count == 2 && groupedValuesCount.Any(c => c.Value == "0") && groupedValuesCount.Any(c => c.Value == "1"))
{
return "bool" + (Null == "YES" ? "?" : "");
}
else
{
return "sbyte" + (Null == "YES" ? "?" : "");
}
}
}
}
}
}
[{
"key": "pre_forum_post",
"value": [{
"field": "first",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "0",
"count": 1395501
}, {
"value": "1",
"count": 179216
}],
"recommendedType": "bool"
}, {
"field": "invisible",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "-5",
"count": 9457
}, {
"value": "-3",
"count": 1412
}, {
"value": "-2",
"count": 1122
}, {
"value": "-1",
"count": 402415
}, {
"value": "0",
"count": 1160308
}, {
"value": "1",
"count": 3
}],
"recommendedType": "sbyte"
}, {
"field": "anonymous",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "0",
"count": 1574690
}, {
"value": "1",
"count": 27
}],
"recommendedType": "bool"
}, {
"field": "usesig",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "0",
"count": 162487
}, {
"value": "1",
"count": 1412230
}],
"recommendedType": "bool"
}, {
"field": "htmlon",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "0",
"count": 1574622
}, {
"value": "1",
"count": 95
}],
"recommendedType": "bool"
}, {
"field": "bbcodeoff",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "-1",
"count": 935448
}, {
"value": "0",
"count": 639229
}, {
"value": "1",
"count": 40
}],
"recommendedType": "sbyte"
}, {
"field": "smileyoff",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "-1",
"count": 1359482
}, {
"value": "0",
"count": 215186
}, {
"value": "1",
"count": 49
}],
"recommendedType": "sbyte"
}, {
"field": "parseurloff",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "0",
"count": 1572844
}, {
"value": "1",
"count": 1873
}],
"recommendedType": "bool"
}, {
"field": "attachment",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "0",
"count": 1535635
}, {
"value": "1",
"count": 2485
}, {
"value": "2",
"count": 36597
}],
"recommendedType": "sbyte"
}, {
"field": "comment",
"type": "tinyint(1)",
"null": "NO",
"groupedValuesCount": [{
"value": "0",
"count": 1569146
}, {
"value": "1",
"count": 5571
}],
"recommendedType": "bool"
}]
}]
Regex.Escape(String) 方法:
通过替换为转义码来转义最小的字符集(\、*、+、?、|、{、[、(、)、^、$、.、# 和空白)。 这将指示正则表达式引擎按原义解释这些字符而不是解释为元字符。
示例:
string str = @"123\c\d\e";
string r1 = @"\d";
string r2 = Regex.Escape(r1);
return Json(new
{
m1 = Regex.Matches(str, r1).Select(c => c.Value),
m2 = Regex.Matches(str, r2).Select(c => c.Value)
});
结果:
{
"m1":[
"1",
"2",
"3"
],
"m2":[
"\\d"
]
}
一般地,我们使用通配符 a*c 在字符串 abcd 中查找:
string s = @"abcd";
string w = @"a*c";
string r = Regex.Escape(w).Replace(@"\*", @".*?").Replace(@"\?", @".?");
return Content(Regex.Match(s, r).Value);
结果:
abc
同理,使用通配符 \d*\f 在字符串 \a\b\c\d\e\f 中查找:
string s = @"\a\b\c\d\e\f";
string w = @"\d*\f";
string r = Regex.Escape(w).Replace(@"\*", @".*?").Replace(@"\?", @".?");
return Content(Regex.Match(s, r).Value);
结果:
\d\e\f
Linux 设置服务开机自动启动的方式有好多种,这里介绍一下通过 chkconfig 命令添加脚本为开机自动启动的方法。
编写脚本 ossftp(这里以开机启动 ossftp 服务为例),脚本内容如下:
#!/bin/sh #chkconfig: 2345 80 90 #description: 开机自动启动的脚本程序 # 开启 ossftp 服务 /root/ossftp-1.2.0-linux-mac/start.sh &
脚本第一行 “#!/bin/sh” 告诉系统使用的 shell;
脚本第二行 “#chkconfig: 2345 80 90” 表示在 2/3/4/5 运行级别启动,启动序号(S80),关闭序号(K90);
脚本第三行 表示的是服务的描述信息;
要执行的文件(示例中的 /root/ossftp-1.2.0-linux-mac/start.sh)必须设置“可执行”权限,命令结尾的“&”可使进程持续。
注意: 第二行和第三行必写,否则会出现如“服务 ossftp 不支持 chkconfig”这样的错误。
将写好的 ossftp 脚本移动到 /etc/rc.d/init.d/ 目录下
给脚本赋可执行权限
chmod +x /etc/rc.d/init.d/ossftp
添加脚本到开机自动启动项目中
chkconfig --add ossftp chkconfig ossftp on
执行命令“chkconfig --list”可列出开机启动的服务及当前的状态。
到这里就设置完成了,我们只需要重启一下我们的服务器,就能看到我们配置的 ossftp 服务已经可以开机自动启动了。
前言:本文源于前几天看到的一条微博:
对于这种言论我并不赞同。我大学学的是化学,没有学习过计算机专业的课程,但我认为至少这个问题并不需要多么高端的计算机专业知识,只要中学数学没有全还给老师,就应该能给出至少一种解法。比如说,我就随便涂了一个多边形和一个点,现在我要找出一种通用的方法来判断这个点是不是在多边形内部(别告诉我用肉眼观察……)。
首先想到的一个解法是从这个点做一条射线,计算它跟多边形边界的交点个数,如果交点个数为奇数,那么点在多边形内部,否则点在多边形外。
这个结论很简单,那它是怎么来的?其实,对于平面内任意闭合曲线,我们都可以直观地认为,曲线把平面分割成了内、外两部分,其中“内”就是我们所谓的多边形区域。
基于这一认识,对于平面内任意一条直线,我们可以得出下面这些结论:
直线穿越多边形边界时,有且只有两种情况:进入多边形或穿出多边形。
在不考虑非欧空间的情况下,直线不可能从内部再次进入多边形,或从外部再次穿出多边形,即连续两次穿越边界的情况必然成对。
直线可以无限延伸,而闭合曲线包围的区域是有限的,因此最后一次穿越多边形边界,一定是穿出多边形,到达外部。
现在回到我们最初的题目。假如我们从一个给定的点做射线,还可以得出下面两条结论:
如果点在多边形内部,射线第一次穿越边界一定是穿出多边形。
如果点在多边形外部,射线第一次穿越边界一定是进入多边形。
把上面这些结论综合起来,我们可以归纳出:
当射线穿越多边形边界的次数为偶数时,所有第偶数次(包括最后一次)穿越都是穿出,因此所有第奇数次(包括第一次)穿越为穿入,由此可推断点在多边形外部。
当射线穿越多边形边界的次数为奇数时,所有第奇数次(包括第一次和最后一次)穿越都是穿出,由此可推断点在多边形内部。
到这里,我们已经了解这个解法的思路了,下面接着看算法实现的一些具体问题和边界条件的处理。
点在多边形的边上
上面我们讲到,这个解法的主要思路就是计算射线穿越多边形边界的次数,那么对于点在多边形的边上这种特殊情况,射线出发的这一次,是否应该算作穿越呢?
看了上面的图就会发现,不管算不算穿越,都会陷入两难的境地——同样落在多边形边上的点,可能会得到相反的结果。这显然是不正确的,因此对这种特殊情况需要特殊处理。
点和多边形的顶点重合
这其实是第一种情况的一个特例。
射线经过多边形顶点
射线刚好经过多边形顶点的时候,应该算一次还是两次穿越?这种情况比前两种复杂,也是实现中的难点。
射线刚好经过多边形的一条边
这是上一种情况的特例,也就是说,射线连续经过了多边形的两个相邻顶点。
解决方案:
判断点是否在线上的方法有很多,比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等,中学数学都学过。
点和多边形顶点重合的情况更简单,直接比较点的坐标就行了。
顶点穿越看似棘手,其实我们换一个角度,思路会大不相同。先来回答一个问题,射线穿越一条线段需要什么前提条件?没错,就是线段两个端点分别在射线两侧。只要想通这一点,顶点穿越就迎刃而解了。这样一来,我们只需要规定被射线穿越的点都算作其中一侧。
如上图,假如我们规定射线经过的点都属于射线以上的一侧,显然点 D 和发生顶点穿越的点 C 都位于射线 Y 的同一侧,所以射线 Y 其实并没有穿越 CD 这条边。而点 C 和点 B 则分别位于射线 Y 的两侧,所以射线 Y 和 BC 发生了穿越,由此我们可以断定点 Y 在多边形内。同理,射线 X 分别与 AD 和 CD 都发生了穿越,因此点 X 在多边形外,而射线 Z 没有和多边形发生穿越,点 Z 位于多边形外。
解决了第三点,这一点就毫无难度了。根据上面的假设,射线连续经过的两个顶点显然都位于射线以上的一侧,因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例,因此不需要再做特别的处理。
这种简单直观的算法通常叫做射线法或奇偶法,下面给出 JavaScript 的算法实现。
/**
* @description 射线法判断点是否在多边形内部
* @param {Object} p 待判断的点,格式:{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点,数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function rayCasting(p, poly) {
var px = p.x,
py = p.y,
flag = false
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合
if((sx === px && sy === py) || (tx === px && ty === py)) {
return 'on'
}
// 判断线段两端点是否在射线两侧
if((sy < py && ty >= py) || (sy >= py && ty < py)) {
// 线段上与射线 Y 坐标相同的点的 X 坐标
var x = sx + (py - sy) * (tx - sx) / (ty - sy)
// 点在多边形的边上
if(x === px) {
return 'on'
}
// 射线穿过多边形的边界
if(x > px) {
flag = !flag
}
}
}
// 射线穿过多边形边界的次数为奇数时点在多边形内
return flag ? 'in' : 'out'}
除了射线法还有很多其他的方法,下面再介绍一种回转数法。
平面中的闭合曲线关于一个点的回转数(又叫卷绕数),代表了曲线绕过该点的总次数。下面这张图动态演示了回转数的概念:图中红色曲线关于点(人所在位置)的回转数为 2。
回转数是拓扑学中的一个基本概念,具有很重要的性质和用途。本文并不打算在这一点上展开论述,这需要具备相当的数学知识,否则会非常乏味和难以理解。我们暂时只需要记住回转数的一个特性就行了:当回转数为 0 时,点在闭合曲线外部(回转数大于 0 时所代表的含义,大家可以自己想一想,还是很有趣的)。
对于给定的点和多边形,回转数应该怎么计算呢?
用线段分别连接点和多边形的全部顶点。
计算所有点与相邻顶点连线的夹角。
计算所有夹角和。注意每个夹角都是有方向的,所以有可能是负值。
最后根据角度累加值计算回转数。看过前面的介绍,很容易理解 360°(2π)相当于一次回转。
思路介绍完了,下面两点是实现中需要留意的问题。
JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数,浮点数计算不可避免会造成一些误差,因此在最后计算回转数时需要做取整操作。
通常情况下,平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间,这也是 JavaScript 三角函数
Math.atan2()
返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角,我们只能先计算两条线与 X 正轴夹角,再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间,因此我们还需要处理差值超出取值区间的情况。
这里也给出回转数法的 JavaScript 实现。
/**
* @description 回转数法判断点是否在多边形内部
* @param {Object} p 待判断的点,格式:{ x: X 坐标, y: Y 坐标 }
* @param {Array} poly 多边形顶点,数组成员的格式同 p
* @return {String} 点 p 和多边形 poly 的几何关系
*/function windingNumber(p, poly) {
var px = p.x,
py = p.y,
sum = 0
for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {
var sx = poly[i].x,
sy = poly[i].y,
tx = poly[j].x,
ty = poly[j].y
// 点与多边形顶点重合或在多边形的边上
if((sx - px) * (px - tx) >= 0 && (sy - py) * (py - ty) >= 0 && (px - sx) * (ty - sy) === (py - sy) * (tx - sx)) {
return 'on'
}
// 点与相邻顶点连线的夹角
var angle = Math.atan2(sy - py, sx - px) - Math.atan2(ty - py, tx - px)
// 确保夹角不超出取值范围(-π 到 π)
if(angle >= Math.PI) {
angle = angle - Math.PI * 2
} else if(angle <= -Math.PI) {
angle = angle + Math.PI * 2
}
sum += angle
}
// 计算回转数并判断点和多边形的几何关系
return Math.round(sum / Math.PI) === 0 ? 'out' : 'in'}
也有人问到像下面这种复杂多边形有没有办法?答案是肯定的。至于为什么,就留给大家思考吧。
百度地图称之为地面叠加层(GroundOverlay)
类参考:https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html#a3b18
示例DEMO:http://lbsyun.baidu.com/jsdemo.htm#gImageGround
var map = new BMapGL.Map('container');
map.centerAndZoom(new BMapGL.Point(117.200, 36.2437), 18);
map.enableScrollWheelZoom(true);
map.setTilt(45);
map.setDisplayOptions({
poiText: false, // 隐藏poi标注
poiIcon: false, // 隐藏poi图标
building: false // 隐藏楼块
});
var pStart = new BMapGL.Point(117.19635, 36.24093);
var pEnd = new BMapGL.Point(117.20350, 36.24764);
var bounds = new BMapGL.Bounds(new BMapGL.Point(pStart.lng, pEnd.lat), new BMapGL.Point(pEnd.lng, pStart.lat));
var imgOverlay = new BMapGL.GroundOverlay(bounds, {
type: 'image',
url: '/jsdemo/img/shouhuimap.png',
opacity: 1
});
map.addOverlay(imgOverlay);