如何修复传单 Pixi 叠加层 javascript 文件的加载顺序？

Question

我以前从未使用过传单插件，但我有很多要点我想在没有性能问题的情况下绘制。在做了一些研究之后，我发现 PixiOverlay 插件是解决方案。但是，在按照 github 页面上的自述文件进行操作后，我收到了以下错误。

从网络控制台：

Error: Pixi.js must be loaded first
Loading failed for the <script> with source “...Plugins/pixi.min.js”
Error: Pixi.js must be loaded first
ReferenceError: PIXI is not defined

索引 html 文件，脚本位于 <body> 标签内：

<!--PIXI OVERLAY FOR LOTS OF POINTS-->
<script src="https://cdn.jsdelivr.net/npm/leaflet-pixi-overlay@1.8.1/L.PixiOverlay.min.js"></script>
<script src="Plugins/pixi.min.js"></script>
<script src="Plugins/L.PixiOverlay.min.js"></script>

Javascript 传单文件（geojsonData 是我的 long/lat 点）：

// sets map starting location
var map = L.map('map',{
    center: [39.20, -105.78],
    zoom: 8,
    minZoom: 2,
    maxZoom: 18,
    attributionControl: false,
});

var pixiOverlay = L.pixiOverlay(function(geojsonData) {
}, new PIXI.Container());

pixiOverlay.addTo(map);

此插件是否需要 Node.js？我在安装说明中注意到它有一个 NPM。任何帮助将不胜感激，谢谢！

Answer 1

如果您看到类似

的错误消息

Error: Pixi.js must be loaded first

那么你的加载顺序应该是Pixi.js在前，即：

<script src="Plugins/pixi.min.js"></script>          <!-- this shall load 1st --> 
<script src="Plugins/L.PixiOverlay.min.js"></script> <!-- this shall load 2nd -->

如果您看到类似

的错误消息

Loading failed for the <script> with source “...Plugins/pixi.min.js”

然后您应该检查您的网络服务器是否正确提供该文件。 "network" section of your browser's developer tools 是你的朋友。

如何修复传单 Pixi 叠加层 javascript 文件的加载顺序？

How to fix loading order of javascript files for Pixi overlay for leaflet?

javascript

leaflet

pixi.js