在 ArcGIS JSAPI 中绘制军事符号：解决 Spatial Illusions 库导入错误

javascript

2024-03-05 06:28:27

在 ArcGIS JSAPI 中整合 Spatial Illusions 绘制军事符号

问题：导入Spatial Illusions 库时的错误

在 ArcGIS JSAPI 中，当你尝试导入 Spatial Illusions 库（milsymbol.js）时，可能会遇到两个错误：

如果不添加 type="module"，会出现语法错误。
如果添加 type="module"，会遇到另一个模块未定义的错误。

原因：模块加载不兼容

Spatial Illusions 库是使用 ES 模块编写的，而 ArcGIS JSAPI 并不是。因此，你需要手动加载 ES 模块才能在 ArcGIS JSAPI 中使用 Spatial Illusions。

解决方案：手动加载 ES 模块

要解决此问题，请按照以下步骤操作：

将 Spatial Illusions 库复制到项目中： 将 milsymbol.js 和 ms.js 文件复制到 ArcGIS 项目的文件夹中。
修改 index.html 文件： 在 <head> 部分添加以下行：
```
<script type="module" src="path/to/milsymbol.js"></script>
```
将 path/to/milsymbol.js 替换为你复制的空间幻觉库的位置。
在 ArcGIS JSAPI 代码中使用 Spatial Illusions：
```
var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
```
使用 ms 名称空间访问 Spatial Illusions 库。

示例代码

以下是修改后的示例代码：

<link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
<script src="https://js.arcgis.com/4.12/"></script>
<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/FeatureLayer"
    ], function (Map, MapView, MapImageLayer, FeatureLayer) {

        var symbol = new ms.Symbol("SFG-UCI----D", { size: 30 }).asCanvas(3);
        var map = new Map({
            basemap: "topo-vector"
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [121, 23],
            zoom: 7
        });
    });
</script>