如何在本地HTML的JavaScript中调用polylabel计算多边形内中心？

错误原因分析 #

你遇到的require is not defined和Queue is not a constructor错误，是因为直接复制的GitHub代码是**Node.js环境（CommonJS模块）**的版本，依赖tinyqueue库且使用了浏览器不支持的require语法，浏览器无法识别这些Node.js特有的模块加载方式。

可行解决方案 #

方案1：使用正确的CDN（推荐） #

选择支持浏览器全局变量的CDN源，比如unpkg或jsDelivr，它们会提供打包好的浏览器兼容版本。

完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Polylabel Test</title>
    <!-- 引入Polylabel的浏览器兼容CDN版本 -->
    <script src="https://unpkg.com/@mapbox/polylabel@1.0.2/dist/polylabel.min.js"></script>
</head>
<body>
    <script>
        // 示例：U型多边形的GeoJSON坐标
        const polygon = [
            [[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]],
            [[2, 2], [8, 2], [8, 8], [2, 8], [2, 2]] // 内部洞
        ];

        // 调用polylabel计算内部质心
        const centroid = polylabel(polygon, 1.0); // 第二个参数是精度，值越小精度越高
        console.log('内部质心坐标:', centroid);
    </script>
</body>
</html>

引入后，polylabel会作为全局变量直接可用，无需额外配置。

方案2：手动处理依赖（适合自定义修改代码） #

如果需要修改原库代码，可按以下步骤操作：

1. 引入tinyqueue的CDN版本（Polylabel依赖的优先级队列库）：

   <script src="https://unpkg.com/tinyqueue@2.0.0/tinyqueue.min.js"></script>
   

2. 修改你复制的polylabel.js代码：
   • 移除第一行的var Queue = require('tinyqueue');
   • 替换为var Queue = TinyQueue;（因为tinyqueue的浏览器版本会暴露全局变量TinyQueue）
3. 在HTML中先引入tinyqueue，再引入修改后的polylabel.js：

   <script src="tinyqueue.min.js"></script>
   <script src="polylabel.js"></script>
   

4. 之后即可像方案1一样调用polylabel函数。

方案3：使用ES模块（现代浏览器支持） #

如果你的浏览器支持ES模块（大部分现代浏览器都支持），可以用import语句加载：

<!DOCTYPE html>
<html>
<head>
    <title>Polylabel ES Module Test</title>
    <script type="module">
        import polylabel from 'https://unpkg.com/@mapbox/polylabel@1.0.2/dist/polylabel.esm.js';

        const polygon = [
            [[0, 0], [10, 0], [10, 10], [0, 10], [0, 0]],
            [[2, 2], [8, 2], [8, 8], [2, 8], [2, 2]]
        ];

        const centroid = polylabel(polygon, 1.0);
        console.log('内部质心坐标:', centroid);
    </script>
</head>
<body>
</body>
</html>

为什么之前的CDN失败？ #

你用的bundle.run链接可能没有正确暴露全局变量，或者打包后的版本存在兼容性问题。改用unpkg/jsDelivr的官方打包版本即可解决。

内容的提问来源于stack exchange，提问作者Stas