LWC Javascript ライブラリ スコープ エラー

May 02 2020

connectedCallback にサードパーティの Javascript ライブラリを正常にロードしています。

connectedCallback() {

    Promise.all([
        loadStyle(this, PCMilerCSS), 
        loadScript(this, PCMilerJavascript)
    ])
        .then(() => {
            debugger;
            this.initializeMap();
        })
        .catch(error => {
            debugger;
            LightningUtil.logError(this, error);
        });
}

しかし、それを参照しようとすると:

initializeMap() {        

    ALKMaps.APIKey = this.credentials;
    alkmap = new ALKMaps.Map('map1', { displayProjection: new ALKMaps.Projection("EPSG:4326") });

    // map layers        

    _alkBasemap = new ALKMaps.Layer.BaseMap("ALK Maps", {style: ALKMaps.STYLE[this._baseLayerStyle]}, {displayInLayerSwitcher: false});                                                                                    
    let markerLayer = new ALKMaps.Layer.Markers("Marker Layer", {}, {displayInLayerSwitcher: true});                    
    let routingLayer = new ALKMaps.Layer.Routing("Routing Layer", {}, {displayInLayerSwitcher: true});                                                                                   
    let trafficLayer = new ALKMaps.Layer.Traffic("ALK LiveTraffic™", {}, {minScale: 500000, opacity: 0.5, displayInLayerSwitcher: true});        
    let weatherLayer = new ALKMaps.Layer.WeatherRadar("Radar Weather Layer",   {display: "radar"}, {opacity: 1, visibility: this._showWeatherOnOpen, displayInLayerSwitcher: true});

    alkmap.addLayers([alkBasemap, trafficLayer, weatherLayer, routingLayer, markerLayer]);
    let switcherControl = new ALKMaps.Control.LayerSwitcher();
    alkmap.addControl(switcherControl);

....

ALKMaps が見つからないため、1 行目で爆発します。

ReferenceError: ALKMaps が AlkMap.initializeMap で定義されていません

これは、ALKMaps を前面と中央に配置した Javascript ライブラリの最初の部分です。私の JS チョップは弱いので、何が欠けていますか? ALKMaps にアクセスできないのはなぜですか? ご協力いただきありがとうございます....

var ALKMaps=function(){var a=function(){for(var a=/(^|(.?/))(ALKMaps.js)(\?|$)/i,b=document.getElementsByTagName(" script"),e,f="",g="",h="",i=0,j=b.length;ia.right;)b.lon-=a.getWidth()}return b} ,CLASS_NAME:"ALKMaps.LonLat"}); ALKMaps.LonLat.fromString=function(a){a=a.split(",");新しいALKMaps.LonLat(a[0],a[1])を返す;ALKMaps.LonLat.fromArray=function(a) {var b=ALKMaps.Util.isArray(a);新しいALKMaps.LonLat(b&&a[0],b&&a[1])を返す};ALKMaps.LonLat.transformArray=関数(a,b,c){var d=[ ];if(null!=a&&a 配列のインスタンス&&0g,f*g)}this.drawText(a.id,b,d)}else this.removeText(a.id);return c}}},calculateFeatureDx:function(a ,b){this.featureDx=0;if(b){var c=b.getWidth();this.featureDx=Math.round(((a.left+a.right)/2-(this.extent. left+this.extent.right)/ 2)/c)*c}},drawGeometry:

回答

1 sfdcfox May 04 2020 at 07:18

JavaScript では、グローバル スコープに配置されていないものは、ファイルの外部では見えません。つまり、次のことを意味します。

var ALKMaps = ...

インクルードされたファイルで使用される変数のみを定義しますが、その外部では使用されません。

変数が使用可能になるのは、変数がエクスポートされたときです (すべての最新ブラウザー)。

export { ALKMaps }

または、グローバルに利用可能になった場合 (IE 互換):

window.ALKMaps = ALKMaps;

スクリプトのコンテンツにアクセスできるようにするには、これらのいずれかが発生する必要があります。