¿Cómo debo importar la biblioteca de milsímbolos de Spatial Illusions a mi página web?

Question 1

Estoy usando ArcGIS JSAPI 4.12 y deseo usar Ilusiones espaciales dibujar símbolos militares en un mapa.

cuando agrego milsymbol.js al script, la consola devuelve error

Error de sintaxis no capturado: no se puede usar la declaración de importación fuera de un módulo

entonces agrego type="module" al script, y luego regresa

Error de referencia no detectado: ms no está definido

Aquí está mi código:

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

Entonces, si agrego type="module" o no, siempre hay errores. Sin embargo, en el documento oficial de Spatial Illusions, no hay ninguna type="module" en el guión. Ahora estoy realmente confundido. ¿Cómo se las arreglan para que funcione sin agregar el tipo?

Archivo milsymbol.js

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

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

export { ms };

Question 2

Recibí este error porque olvidé el type="module" dentro de la etiqueta del script:

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

Question 3

Resolví mi caso reemplazando “importar” por “requerir”.

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

Question 4

Hay varias formas comunes de resolver el conflicto asociado con el problema anterior

1. Lo primero: En el guión, incluir type=module

    <script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

2. El segundo: en node.js, en su package.json archivo

    {
       
        "type": "module",
       
    }

reiniciar el proyecto npm start

3. El tercero: reemplazar la importación por requerida

Try this

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

Else try this

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

Question 5

También me enfrentaba al mismo problema hasta que agregué type=”module” al script.

Antes era así

<script src="https://stackoverflow.com/questions/58211880/src/main.js"></script>

Y después de cambiarlo a

<script type="module" src="https://stackoverflow.com/questions/58211880/src/main.js"></script>

Funcionó perfectamente.

Archivo milsymbol.js

Hay varias formas comunes de resolver el conflicto asociado con el problema anterior

¿Ha sido útil esta solución?