博客 (34)

今天发现在 .NET Framework 和 .NET 9 中使用 System.Uri.EscapeDataString() 方法对字符串进行编码,会产生不同的结果。

譬如“(”符号,前者视其为非保留字符,不进行转义,后者视为保留字符,转义为“%28”。

原因是 .NET Framework 4.8 主要遵循 RFC 2396,而 .NET 9 遵循 RFC 3986。


在跨平台签名验证场景中,对 URL 编码的一致性要求极高,任何细微差别都会导致签名校验失败。

以下是以 RFC 3986 标准为核心、优先使用各平台内置的高一致性方案。


对于 .NET 9,直接使用 Uri.EscapeDataString()。

string encodedData = System.Uri.EscapeDataString(dataToEncode);


对于 .NET Framework,以下是一个遵循 RFC 3986 严格标准的自定义编码方法示例。

static string Rfc3986EscapeDataString(string input)
{
    // 定义 RFC 3986 中明确的未保留字符集(不编码)
    var unreservedChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_.~";

    var result = new StringBuilder();
    byte[] data = Encoding.UTF8.GetBytes(input); // 统一转换为 UTF-8 字节

    foreach (byte b in data)
    {
        char currentChar = (char)b;
        // 如果是未保留字符,直接输出
        if (unreservedChars.IndexOf(currentChar) != -1)
        {
            result.Append(currentChar);
        }
        else
        {
            // 否则,进行百分号编码(%XX,大写)
            result.Append('%').Append(b.ToString("X2"));
        }
    }
    return result.ToString();
}


对于 PHP,直接使用内置的 rawurlencode() 函数。这个函数的设计初衷就是严格遵循 RFC 3986 标准。

$encoded_data = rawurlencode($data_to_encode);


对于 JavaScript,encodeURIComponent 函数严格遵循 RFC 3986 标准。

let encodedData = encodeURIComponent(dataToEncode);


重要提示:无论使用哪种语言,务必在编码前明确指定字符串使用 UTF-8 编码。编码不一致是导致乱码和签名失败最常见的原因之一 。

xoyozo 11 天前
70

目标: 在运行 HarmonyOS Next 的华为 MateBook Pro 上侧载安装第三方应用程序。

注:本教程同样适用于在运行 HarmonyOS Next 的华为手机上侧载安装第三方应用程序。

所需准备

  1. 一台运行 HarmonyOS Next 的华为 MateBook Pro

  2. 一台 Windows 电脑

  3. 一根数据线

    • USB-A to Type-C

    • 或 Type-C to Type-C (确保能将两台电脑连接)。

  4. 网络连接:两台电脑需在同一局域网下(用于无线调试连接)。

步骤详解

第一步:鸿蒙 PC (MateBook Pro) 端设置 (启用开发者模式与调试)

  1. 连接设备: 使用数据线将鸿蒙 MateBook Pro 连接到 Windows 电脑。

  2. 打开设置: 在鸿蒙 PC 上,进入 设置

  3. 进入关于本机: 在设置中,找到并点击 关于本机 或您的 电脑型号

  4. 启用开发者模式

    • 在“关于本机”界面,找到 软件版本 或 HarmonyOS 版本

    • 连续点击 软件版本/HarmonyOS 版本 文字 5 次以上

    • 系统会提示“您已处于开发者模式”或提示重启进入开发者模式。按提示重启电脑(如果需要)。

  5. 打开开发者选项

    • 重启后,回到 设置 -> 系统 -> 开发者选项 (路径可能略有不同,在“系统和更新”或“隐私与安全”下查找)。

  6. 启用 USB 调试

    • 在开发者选项中,找到 USB 调试,将其开启

    • 首次开启时,可能会弹出提示(连接线后或稍后操作时),点击 允许

    • 注意提示:系统可能提示“Matebook Pro 上的右上角的 Type-C 口可以进行调试”,确保使用正确的接口连接调试线。如果弹出“始终允许本机调试”选项,勾选并允许

  7. 启用并记录无线调试信息

    • 在开发者选项中,找到 无线调试,将其开启

    • 开启后,系统会显示一个 IP 地址和端口号(例如 192.168.x.x:xxxxx)。务必准确记下这个 IP 地址和端口号,后续在 Windows 端连接时必须用到。

    • 至此,鸿蒙 PC 端的准备工作完成。

第二步:Windows 电脑端操作 (使用小白调试助手)

  1. 获取工具和 HAP 包

    • 访问包含 HarmonyOS Next 可用 HAP 包的资源(如 GitHub 上的相关仓库,搜索 “HarmonyOS Next HAP”)。

    • 下载小白调试助手

      • 在工具仓库中找到 小白调试助手 或类似名称。

      • 点击 Latest (最新版本)。

      • 点击 Download 下载其 Windows 版压缩包(.zip 文件)。

    • 下载目标应用的 HAP 包(以 ClashBox 为例,你也可以使用自己已有的 .hap 文件):

      • 在应用仓库中找到 ClashBox

      • 同样点击 Latest -> Download 下载其 HAP 包(.hap 文件)。

  2. 准备小白调试助手

    • 将下载的小白调试助手压缩包解压到一个非中文且无空格路径的文件夹。

    • 进入解压后的文件夹,找到可执行文件。双击运行。根据 Windows SmartScreen 或安全软件提示(若有),选择 更多信息 -> 仍要运行

  3. 登录华为开发者账号 (强烈推荐)

    • 在小白调试助手界面,找到登录入口(通常在界面顶部或设置中),点击 登录

    • 使用您的华为开发者账号登录(登录时,您的华为手机可能会收到验证码,或在鸿蒙PC上验证)。

    • 输入验证码,并在授权请求页面点击 允许。登录成功后,界面通常会显示您的账号昵称或ID。

    • 重要: 开发者账号签发的应用证书有效期通常为 6 个月普通账号14 天。为方便使用,建议申请华为开发者账号。

  4. 连接鸿蒙设备

    • 在小白调试助手主界面,找到 连接设备添加设备 或类似功能的按钮并点击。

    • 在弹出的连接窗口(通常是输入IP和端口的对话框)中:

      • 输入您在鸿蒙 PC 上 无线调试 功能中记录的 IP 地址

      • 输入记录的 端口号

    • 点击 确定连接 或 OK

    • 连接成功:如果地址和端口输入正确,且鸿蒙 PC 的开发者选项已开启无线调试:

      • 鸿蒙 PC 可能弹出调试请求(“允许调试?”),勾选“始终允许”并点击 允许

      • 小白调试助手界面会显示“连接成功”或目标设备信息。

      • (若未弹出提示框但连接成功,也属正常)

第三步:安装第三方 HAP 包

  1. 选择 HAP 包

    • 确保设备已连接成功。

    • 在小白调试助手界面,找到 选择 HAP加载 HAP安装应用 或类似按钮(通常在文件菜单或主功能区)。

    • 点击该按钮,浏览文件系统,找到您下载好的目标 HAP 文件(如 ClashBox-xxx.hap),选中并点击 打开

  2. 开始安装

    • 选择好 HAP 文件后,小白调试助手界面通常会激活 开始调试安装 或 运行 按钮。

    • 点击 开始调试 或 安装

  3. 等待安装完成

    • 小白调试助手会开始处理 HAP 包:进行签名、推送到设备并安装。

    • 观察进度条或日志输出,耐心等待直至提示“安装成功”

第四步:在鸿蒙 PC 上使用安装的应用

  • 安装完成后,返回您的鸿蒙 MateBook Pro。

  • 在桌面或 开始菜单 中,查找您刚刚安装的应用图标(如 ClashBox)。

  • 点击图标即可启动使用该应用。

常见问题处理

  • 签名错误/证书问题:在小白调试助手内寻找 **清理缓存重置证书重新登录** 或类似选项。执行后,重新登录开发者账号,再尝试安装。确保登录的是开发者账号。

  • Java 环境报错:如果小白调试助手提示需要 Java 环境(如 java 命令未找到),按照其提示点击安装,它会引导下载并安装所需的 Java Runtime Environment (JRE)。

  • 连接失败

    • 检查鸿蒙 PC 的 无线调试 IP 和端口号是否变化(息屏、重启、网络切换可能导致变化),在开发者选项里重新确认并输入。

    • 确保两台电脑在同一局域网

    • 检查鸿蒙 PC 的 **USB 调试 和 无线调试 是否已开启**。

    • 尝试在鸿蒙 PC 的开发者选项中关闭再重新开启 无线调试,获取新的端口号。

  • 其他报错:查阅小白调试助手官方的使用说明或 GitHub 仓库的 Issue 区寻求解决方案。


xoyozo 6 个月前
25,160

截止 2024 年 9 月,CZDB 数据已支持 JAVA、PHP、C、Node.js、Python 语言解析,但官方迟迟未推出 C# / ASP.NET 的版本,于是我参照前面几种语言版本写了 C# 版,支持 IPv4 与 IPv6,实测查询速度,CZDB 版的 MEMORY 模式比原来的 DAT 版数据库快数百倍(具体要看磁盘和内存的读写速度)。能够有效降低 CPU 的使用率,特别是在需要频繁查询 IP 属地的应用场景(譬如每个 HTTP 请求都要判断 IP 属地来决定是否允许访问)。

我要试试→

源代码已提交给纯真官方,相信很快就会有官方版本的 SDK。

xoyozo 1 年前
2,408

实例化方法一:DbSearcher(String dbFile, QueryType queryType, String key)

实例化方法二:DbSearcher(InputStream is, QueryType queryType, String key)


  • 方法一通过传入文件路径来实例化,方法二通过传入文件流来实例化;

  • 当 queryType 为 MEMORY 时,方法一和方法二只有在实例化时有性能差别,差别在于将指定路径的文件读到内存中保存;在执行 Search 方法时无性能差别,因为都是在内存中执行查找;

  • queryType 为 MEMORYBTREE 的差别在于前者是在内存中查找,速度快但占内存,后者是在文件中查找,速度慢但省内存


错误:Padding is invalid and cannot be removed.

原因:可能是数据库文件与密钥不一致。

xoyozo 1 年前
1,971

SignalR 是一个开源的实时通信库,用于构建实时 Web 应用程序。它提供了一个简单的 API,可以在客户端和服务器之间建立持久连接,以便实时地推送数据。

与传统的 WebSocket 相比,SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别:

  • 支持多种传输方式:SignalR 可以使用多种传输方式,包括 WebSocket、Server-Sent Events(SSE)、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力,即使某些浏览器不支持 WebSocket,也可以使用其他传输方式。

  • 自动处理连接管理:SignalR 管理连接的生命周期,包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑,简化了开发人员的工作。

  • 服务器端推送:SignalR 允许服务器端主动推送消息给客户端,而不需要客户端发起请求。这使得实时通信变得更加高效和实时,适用于聊天应用、实时监控等场景。

  • 跨平台支持:SignalR 可以在多个平台上使用,包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。


微软官方提供了针对 ASP.NET Core Web 应用(Razor 页面)的详细教程,这里给出 MVC 版本入门教程。


最终将创建一个正常运行的聊天应用:

signalr-get-started-finished.png


创建 Web 应用项目

image.png

image.png


添加 SignalR 客户端库

在“解决方案资源管理器”>中,右键单击项目,然后选择“添加”“客户端库”。

在“添加客户端库”对话框中:

  • “提供程序”选择“unpkg”

  • “库”,请输入 @microsoft/signalr@latest。

  • 选择“选择特定文件”,展开“dist/browser”文件夹,然后选择 signalr.js 和 signalr.min.js。

  • 点击“安装” 。

image.png


创建 SignalR Hubs 类

using Microsoft.AspNetCore.SignalR;

/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
        /// <summary>
        /// 可通过已连接客户端调用 SendMessage,以向所有客户端发送消息
        /// </summary>
    public async Task SendMessage(string user, string message)
    {
        // Clients.All 向所有的客户端发送消息
        // ReceiveMessage 是客户端监听的方法
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。


配置 SignalR

打开 Program.cs,添加注入:

builder.Services.AddSignalR();

添加路由:

app.MapHub<ChatHub>("/chatHub");


添加 SignalR 客户端代码

视图页面:

<div class="container">
    <div class="row p-1">
        <div class="col-1">用户</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">消息</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="发送消息" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>

chat.js 文件:

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // 修改此处时应注意脚本注入问题
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});


完成。在线示例:https://xoyozo.net/Demo/SignalRDemo






xoyozo 2 年前
2,754

LigerShark.WebOptimizer.CoreBuildBundlerMinifier
特点

在运行时捆绑和缩小 CSS 和 JavaScript 文件

具有完整的服务器端和客户端缓存,以确保高性能

可禁用缩小

支持使用通配模式

标记帮助程序与缓存破坏

支持内联

支持 SCSS

将 CSS、JavaScript 或 HTML 文件捆绑到单个输出文件中

保存源文件会自动触发重新捆绑

支持通配模式

支持 CI 方案的 MSBuild 支持

缩小单个或捆绑的 CSS、JavaScript 和 HTML 文件

每种语言的缩小选项是可定制的

打开生成的文件时显示水印

任务运行程序资源管理器集成

命令行支持

快捷更新解决方案中所有捆绑包

禁止生成输出文件

转换为 Gulp

注入(Program.cs)

services.AddWebOptimizer();

app.UseWebOptimizer();


指定捆绑的项目在运行时自动缩小 css 和 js,也可以在 AddWebOptimizer 中自定义。默认情况下,生成的文件不会保存到磁盘,而是保存在缓存中。手动编辑 bundleconfig.json 文件来指定需要合并和缩小的文件
功能配置
{
  "webOptimizer": {
    // 确定是否应设置 HTTP 标头以及是否应支持条件 GET (304) 请求。在开发模式下禁用此功能可能会有所帮助。cache-control
    "enableCaching": true,
    // 确定是否用于缓存。在开发模式下禁用可能会有所帮助。IMemoryCache
    "enableMemoryCache": true,
    // 确定管道资产是否缓存到磁盘。这可以通过从磁盘加载 pipline 资产而不是重新执行管道来加快应用程序重新启动的速度。在开发模式下禁用可能会有所帮助。
    "enableDiskCache": true,
    // 设置资产将存储的目录 ifistrue。必须为读/写。enableDiskCache
    "cacheDirectory": "/var/temp/weboptimizercache",
    // 确定元素是否应指向捆绑路径或应为每个源文件创建引用。这在开发模式下禁用很有帮助。
    "enableTagHelperBundling": true,
    // 是一个绝对 URL,如果存在,它会自动为页面上的任何脚本、样式表或媒体文件添加前缀。注册标记帮助程序后,标记帮助程序会自动添加前缀。在此处查看如何注册标记帮助程序。
    "cdnUrl": "https://my-cdn.com/",
    // 确定捆绑包的源文件中没有内容时的行为,默认情况下,请求捆绑包时将引发 404 异常,设置为 true 以获取包含空内容的捆绑包。
    "allowEmptyBundle": false
  }
}


在 bundleconfig.json 捆绑时设置

[
  {
    "outputFileName": "output/bundle.css",
    "inputFiles": [
      "css/lib/**/*.css", // globbing patterns are supported
      "css/input/site.css"
    ],
    "minify": {
        "enabled": true,
        "commentMode": "all"
    }
  },
  {
    "outputFileName": "output/all.js",
    "inputFiles": [
      "js/*.js",
      "!js/ignore.js" // start with a ! to exclude files
    ]
  },
  {
    "outputFileName": "output/app.js",
    "inputFiles": [
      "input/main.js",
      "input/core/*.js" // all .js files in input/core/
    ]
  }
]


热重载(在开发模式中保存文件自动更新浏览器效果)
VS 安装扩展,方法:菜单 - 扩展 - 管理扩展 - 联机 搜索“Bundler & Minifier
其它资料
ASP.NET 官方文档


xoyozo 3 年前
3,736

错误 TS5055 无法写入文件“***.js”,因为它会覆盖输入文件。

添加 tsconfig.json 文件有助于组织包含 TypeScript 和 JavaScript 文件的项目。有关详细信息,请访问 https://aka.ms/tsconfig。

检查“输出”窗口,找到“error”的行,并修复该错误。

一种可能的情况是,使用了 vue3 的 computed 计算属性。原因未知,尝试又定义了一个变量并使用 watch 侦听原变量来给它赋值,同样报错。

xoyozo 3 年前
5,486

前言:本文源于前几天看到的一条微博:

微博

对于这种言论我并不赞同。我大学学的是化学,没有学习过计算机专业的课程,但我认为至少这个问题并不需要多么高端的计算机专业知识,只要中学数学没有全还给老师,就应该能给出至少一种解法。比如说,我就随便涂了一个多边形和一个点,现在我要找出一种通用的方法来判断这个点是不是在多边形内部(别告诉我用肉眼观察……)。

问题

首先想到的一个解法是从这个点做一条射线,计算它跟多边形边界的交点个数,如果交点个数为奇数,那么点在多边形内部,否则点在多边形外。

思路

这个结论很简单,那它是怎么来的?其实,对于平面内任意闭合曲线,我们都可以直观地认为,曲线把平面分割成了内、外两部分,其中“内”就是我们所谓的多边形区域。

多边形

基于这一认识,对于平面内任意一条直线,我们可以得出下面这些结论:

  1. 直线穿越多边形边界时,有且只有两种情况:进入多边形或穿出多边形。

  2. 在不考虑非欧空间的情况下,直线不可能从内部再次进入多边形,或从外部再次穿出多边形,即连续两次穿越边界的情况必然成对。

  3. 直线可以无限延伸,而闭合曲线包围的区域是有限的,因此最后一次穿越多边形边界,一定是穿出多边形,到达外部。

穿越

现在回到我们最初的题目。假如我们从一个给定的点做射线,还可以得出下面两条结论:

  1. 如果点在多边形内部,射线第一次穿越边界一定是穿出多边形。

  2. 如果点在多边形外部,射线第一次穿越边界一定是进入多边形。

首次穿越

把上面这些结论综合起来,我们可以归纳出:

  1. 当射线穿越多边形边界的次数为偶数时,所有第偶数次(包括最后一次)穿越都是穿出,因此所有第奇数次(包括第一次)穿越为穿入,由此可推断点在多边形外部。

    外部

  2. 当射线穿越多边形边界的次数为奇数时,所有第奇数次(包括第一次和最后一次)穿越都是穿出,由此可推断点在多边形内部。

    内部

到这里,我们已经了解这个解法的思路了,下面接着看算法实现的一些具体问题和边界条件的处理。

  1. 点在多边形的边上

    上面我们讲到,这个解法的主要思路就是计算射线穿越多边形边界的次数,那么对于点在多边形的边上这种特殊情况,射线出发的这一次,是否应该算作穿越呢?

    边

    看了上面的图就会发现,不管算不算穿越,都会陷入两难的境地——同样落在多边形边上的点,可能会得到相反的结果。这显然是不正确的,因此对这种特殊情况需要特殊处理。

  2. 点和多边形的顶点重合

    这其实是第一种情况的一个特例。

    顶点

  3. 射线经过多边形顶点

    射线刚好经过多边形顶点的时候,应该算一次还是两次穿越?这种情况比前两种复杂,也是实现中的难点。

    边

  4. 射线刚好经过多边形的一条边

    这是上一种情况的特例,也就是说,射线连续经过了多边形的两个相邻顶点。

    经过边

解决方案:

  1. 判断点是否在线上的方法有很多,比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等,中学数学都学过。

  2. 点和多边形顶点重合的情况更简单,直接比较点的坐标就行了。

  3. 顶点穿越看似棘手,其实我们换一个角度,思路会大不相同。先来回答一个问题,射线穿越一条线段需要什么前提条件?没错,就是线段两个端点分别在射线两侧。只要想通这一点,顶点穿越就迎刃而解了。这样一来,我们只需要规定被射线穿越的点都算作其中一侧。

    两侧

    如上图,假如我们规定射线经过的点都属于射线以上的一侧,显然点 D 和发生顶点穿越的点 C 都位于射线 Y 的同一侧,所以射线 Y 其实并没有穿越 CD 这条边。而点 C 和点 B 则分别位于射线 Y 的两侧,所以射线 Y 和 BC 发生了穿越,由此我们可以断定点 Y 在多边形内。同理,射线 X 分别与 AD 和 CD 都发生了穿越,因此点 X 在多边形外,而射线 Z 没有和多边形发生穿越,点 Z 位于多边形外。

  4. 解决了第三点,这一点就毫无难度了。根据上面的假设,射线连续经过的两个顶点显然都位于射线以上的一侧,因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例,因此不需要再做特别的处理。

这种简单直观的算法通常叫做射线法奇偶法,下面给出 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 时所代表的含义,大家可以自己想一想,还是很有趣的)。

对于给定的点和多边形,回转数应该怎么计算呢?

  1. 用线段分别连接点和多边形的全部顶点。

    顶点连线

  2. 计算所有点与相邻顶点连线的夹角。

    内部

  3. 计算所有夹角和。注意每个夹角都是有方向的,所以有可能是负值。

    外部

  4. 最后根据角度累加值计算回转数。看过前面的介绍,很容易理解 360°(2π)相当于一次回转。

思路介绍完了,下面两点是实现中需要留意的问题。

  1. JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数,浮点数计算不可避免会造成一些误差,因此在最后计算回转数时需要做取整操作。

  2. 通常情况下,平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间,这也是 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'}

也有人问到像下面这种复杂多边形有没有办法?答案是肯定的。至于为什么,就留给大家思考吧。

Complex Polygon

本文示例:https://xoyozo.net/Demo/IsThePointInsideThePolygon

d
转自 dg 5 年前
13,665

天地图https://map.tianditu.gov.cn/

开放平台:http://lbs.tianditu.gov.cn/

控制台:https://console.tianditu.gov.cn/

版本类参考代码示例
JavaScript API 4.0类参考代码示例
JavaScript API 4.0 开源库资源引用、类参考及示例

若不显示地图,请添加域名白名单。

坐标系:CGCS 2000(国家大地坐标系)


高德地图https://www.amap.com/

开放平台:https://lbs.amap.com/

控制台:https://console.amap.com/

版本参考手册示例中心
JS API v2参考手册示例中心
JS API v1参考手册示例中心

更多:坐标获取

坐标系:GCJ-02(火星坐标、国测局坐标系)


百度地图https://map.baidu.com/

开放平台:http://lbsyun.baidu.com/

控制台:http://lbsyun.baidu.com/apiconsole/center

版本类参考示例DEMO
JavaScript API GL类参考示例DEMO
JavaScript API v3.0类参考示例DEMO

更多:拾取坐标系统

坐标系:BD-09(百度坐标)


腾讯地图https://map.qq.com/

PC端于2022年11月11日停止服务

开放平台(腾讯位置服务):https://lbs.qq.com/

控制台:https://lbs.qq.com/dev/console

版本参考手册示例
JavaScript API GL参考手册示例

更多:位置服务

坐标系:GCJ-02(火星坐标、国测局坐标系)


附:常见地图经纬度坐标系及转换

xoyozo 5 年前
14,101

JavaScript API GL v1.0 是基于 WebGL 全新开发的地图 API 接口。为了方便开发者迁移升级,大部份接口向下兼容。目前 GL v1.0 版本接口包含了 3D 地图的渲染、基本控件、覆盖物。在后面的版本中,将对原 v2.0、v3.0 中的核心功能进行补全。

JavaScript API GL 版本对手机性能要求较高,不建议在移动端调用。若涉及移动端 JS 服务调用,请使用 JavaScript API v3.0 版本。

JavaScript API GL v1.0 基于 WebGL 开发,对于用户的浏览器环境有兼容性要求。需要完整支持 WebGL 的现代浏览器来支持渲染。对于 WebGL 支持欠佳的浏览器会降级为 Canvas 绘制,若仍然存在兼容性问题,则会降级到瓦片图渲染。确保不同浏览器环境的用户都可以完成地图的基本渲染。

参考:http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/usage

xoyozo 5 年前
9,315