我正在使用ArcGIS JSAPI 4.12,希望使用空间幻象在地图上绘制军事符号。

当我将milsymbol.js添加到脚本中时,控制台返回错误

无法在模块外部使用import语句

所以我添加type="module"到脚本中,然后它返回

Uncaught ReferenceError: ms未定义

这是我的代码:

<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>

所以,无论我是否添加type="module",总会有错误。但是在Spatial Illusions的官方文档中,脚本中没有type="module"。我现在真的很困惑。他们如何在不添加类型的情况下让它工作呢?

文件milsymbol.js

import { ms } from "./ms.js";

import Symbol from "./ms/symbol.js";
ms.Symbol = Symbol;

export { ms };

当前回答

对我来说,这是由于没有引用一个库(特别是typeORM,使用ormconfig.js文件,在实体键下)到src文件夹,而不是dist文件夹…

   "entities": [
      "src/db/entity/**/*.ts", // Pay attention to "src" and "ts" (this is wrong)
   ],

而不是

   "entities": [
      "dist/db/entity/**/*.js", // Pay attention to "dist" and "js" (this is the correct way)
   ],

其他回答

如果你想从模块中导入函数。 比方说,main。js定义了func1和func2,你想把它们导入到一个新的模块test.js中

下面将解决这个问题。

main.js:

const func1 = () => {console.log('do sth in func1')};
const func2 = () => {console.log('do sth in func2')};

//at the end of module
//export specific functions here
module.exports = { func1, func2 };

. js:

// import them here
const{ func1, func2} = require('./main.js');
func1();
func2();

错误的原因如下:

You're currently loading the source file in the src directory instead of the built file in the dist directory (you can see what the intended distributed file is here). This means that you're using the native source code in an unaltered/unbundled state, leading to the following error: Uncaught SyntaxError: Cannot use import statement outside a module. This should be fixed by using the bundled version since the package is using rollup to create a bundle. The reason you're getting the Uncaught ReferenceError: ms is not defined error is because modules are scoped, and since you're loading the library using native modules, ms is not in the global scope and is therefore not accessible in the following script tag.

看起来你应该能够加载这个文件的dist版本,在窗口上定义ms。请查看库作者提供的这个示例,以了解如何做到这一点。

Use

<script type="module" src="/src/moduleA.js"></script>

而不是

<script>System.import("/src/moduleA.js")</script>

我把“import”替换为“require”,解决了这个问题。

// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');

我不得不从一个外部文件(JavaScript文件)导入一些数据,到我的script.js文件中呈现在我的HTML文件中。

文件data.js

const data = {a: 1, b: 2}

通过添加type=module,我得到了CORS错误。

我发现我可以导入文件data.js到我的script.js文件,只需包括文件data.js在我的HTML文件。

例如,以前我的HTML文件由

<script src="assets/script.js"></script>

因为我需要一些数据从文件data.js,我只是把我的HTML文件更改为:

<script src="assets/data.js"></script>
<script src="assets/script.js"></script>

也就是说,在script.js文件之前包含data.js文件,允许访问script.js文件中的数据变量。