Javascript OpenLayers地图部署

我使用aspnet core和openlayers相对较新。
我使用npm运行我的地图。基本地图有5层。使用带有NPM的本地主机看起来都很棒。我使用了“npm run build”，看到了包含数据、索引和js文件的构建目录。当我在chrome中打开index.html时，它不会显示图层。当我更新远程托管网站时，它也不会显示图层。（基本地图显示）。 查看索引页，它有以下内容：

<script type="text/javascript" src="main.js"></script>

遗漏了一些东西。关于我需要做什么来显示图层，有什么建议吗

请记住，我在这方面是新手。因此，详细的答复将不胜感激。 我一直无法获得要显示的图层数据。所以现在希望有人能给我指出正确的方向。 提前谢谢

完整的Main.JS文件如下所示：

import 'ol/ol.css';
//import GeoJSON from 'ol/format/GeoJSON';
//import Feature from 'ol/Feature';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {fromLonLat} from 'ol/proj';
import GPX from 'ol/format/GPX.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
//import Overlay from 'ol/Overlay';


 var style = {
        'Point': new Style({
          image: new CircleStyle({
            fill: new Fill({
              color: 'red'
            }),
            radius: 3,
            stroke: new Stroke({
              color: '#ff0',
              width: 1
            })
          })
        }),
        'LineString': new Style({
          stroke: new Stroke({
            color: '#f00',
            width: 10
          })
        }),
        'MultiLineString': new Style({
          stroke: new Stroke({
            color: '#0f0',
            width: 5
          })
        })
        ,
        'MultiLineString2': new Style({
          stroke: new Stroke({
            color: 'red',
            width: 5
          })
        }),
        'MultiLineString3': new Style({
          stroke: new Stroke({
            color: 'blue',
            width: 5
          })
        }),
        'MultiLineStringMetalDome': new Style({
          stroke: new Stroke({
            color: 'orange',
            width: 5
          })
        }),
        'MultiLineStringBCS': new Style({
          stroke: new Stroke({
            color: 'red',
            width: 5
          })
        })
      };

var mapSelect = document.getElementById('Map-select');
var DisplayBCSTrails = document.getElementById('DisplayBCSTrails');
var DisplayWPTs = document.getElementById('DisplayWPTs');
var DisplayMetalDomeTrail = document.getElementById('DisplayMetalDomeTrail');


var tileLayer = new TileLayer({
        source: new OSM()
      });

var vector = new VectorLayer({
        source: new VectorSource({
          url: './data/brandywine1.gpx',
          format: new GPX()
        }),
         style: function(feature) {
           return style[feature.getGeometry().getType()];
         },
        visible: true        
    });


var vector2 = new VectorLayer({
        source: new VectorSource({
          url: './data/brandywine2.gpx',
          format: new GPX()
        }),
        // style: new Style({
            // color: 'red',
            // width: 5
        // })
        style: function(feature) {
           return style['MultiLineString2'];
         },
        visible: true
      });  
var vector3 = new VectorLayer({
        source: new VectorSource({
          url: './data/brandywine3.gpx',
          format: new GPX()
        }),
        // style: new Style({
            // color: 'red',
            // width: 5
        // })
        style: function(feature) {
           return style['MultiLineString3'];
         },
        visible: true
      });     

var vectorMetalDome = new VectorLayer({
        source: new VectorSource({
          url: './data/MetalDome.gpx',
          format: new GPX()
        }),
        style: function(feature) {
           return style['MultiLineStringMetalDome'];
         },
        visible: true
      });  

var vectorBCS = new VectorLayer({
        source: new VectorSource({
          url: './data/BCSTrails.gpx',
          format: new GPX()
        }),
        style: function(feature) {
           return style['MultiLineStringBCS'];
         },
        visible: true
      });  

var vectorWPTs = new VectorLayer({
        source: new VectorSource({
          url: './data/BrandywineWPTs.gpx',
          format: new GPX()
        }),
        style: function(feature) {
           return style['Point'];
         },
        visible: true
      });         

var map = new Map({
      target: 'map-container',
      layers: [tileLayer, vector, vector2, vector3, vectorMetalDome, vectorBCS, vectorWPTs],
      view: new View({
            center: fromLonLat([-123.191558, 50.090620]),
        zoom: 12
        })
    });

function ToggleBCSTrailsDisplay() {
    if(vectorBCS.visible === false){
        vectorBCS.visible = true;
        vectorBCS.setVisible(true);
        }
    else{
        vectorBCS.visible = false;
        vectorBCS.setVisible(false);
        }
}
function ToggleWPTDisplay() {
    if (vectorWPTs.visible === false) {
        vectorWPTs.visible = true;
        vectorWPTs.setVisible(true);
    } else {
        vectorWPTs.visible = false;
        vectorWPTs.setVisible(false);
    }
}
function ToggleDisplayMetalDomeTrail() {
    if(vectorMetalDome.visible === false) {
        vectorMetalDome.visible = true;
        vectorMetalDome.setVisible(true);}
    else {
            vectorMetalDome.visible = false;
            vectorMetalDome.setVisible(false);
        }
}

DisplayBCSTrails.addEventListener('click', ToggleBCSTrailsDisplay);
DisplayWPTs.addEventListener('click', ToggleWPTDisplay);
DisplayMetalDomeTrail.addEventListener('click', ToggleDisplayMetalDomeTrail);

url: './data/brandywine1.gpx',

import 'ol/ol.css';
//import GeoJSON from 'ol/format/GeoJSON';
//import Feature from 'ol/Feature';
import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {fromLonLat} from 'ol/proj';
import GPX from 'ol/format/GPX.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
//import Overlay from 'ol/Overlay';


 var style = {
        'Point': new Style({
          image: new CircleStyle({
            fill: new Fill({
              color: 'red'
            }),
            radius: 3,
            stroke: new Stroke({
              color: '#ff0',
              width: 1
            })
          })
        }),
        'LineString': new Style({
          stroke: new Stroke({
            color: '#f00',
            width: 10
          })
        }),
        'MultiLineString': new Style({
          stroke: new Stroke({
            color: '#0f0',
            width: 5
          })
        })
        ,
        'MultiLineString2': new Style({
          stroke: new Stroke({
            color: 'red',
            width: 5
          })
        }),
        'MultiLineString3': new Style({
          stroke: new Stroke({
            color: 'blue',
            width: 5
          })
        }),
        'MultiLineStringMetalDome': new Style({
          stroke: new Stroke({
            color: 'orange',
            width: 5
          })
        }),
        'MultiLineStringBCS': new Style({
          stroke: new Stroke({
            color: 'red',
            width: 5
          })
        })
      };

var mapSelect = document.getElementById('Map-select');
var DisplayBCSTrails = document.getElementById('DisplayBCSTrails');
var DisplayWPTs = document.getElementById('DisplayWPTs');
var DisplayMetalDomeTrail = document.getElementById('DisplayMetalDomeTrail');


var tileLayer = new TileLayer({
        source: new OSM()
      });

var vector = new VectorLayer({
        source: new VectorSource({
          url: './data/brandywine1.gpx',
          format: new GPX()
        }),
         style: function(feature) {
           return style[feature.getGeometry().getType()];
         },
        visible: true        
    });


var vector2 = new VectorLayer({
        source: new VectorSource({
          url: './data/brandywine2.gpx',
          format: new GPX()
        }),
        // style: new Style({
            // color: 'red',
            // width: 5
        // })
        style: function(feature) {
           return style['MultiLineString2'];
         },
        visible: true
      });  
var vector3 = new VectorLayer({
        source: new VectorSource({
          url: './data/brandywine3.gpx',
          format: new GPX()
        }),
        // style: new Style({
            // color: 'red',
            // width: 5
        // })
        style: function(feature) {
           return style['MultiLineString3'];
         },
        visible: true
      });     

var vectorMetalDome = new VectorLayer({
        source: new VectorSource({
          url: './data/MetalDome.gpx',
          format: new GPX()
        }),
        style: function(feature) {
           return style['MultiLineStringMetalDome'];
         },
        visible: true
      });  

var vectorBCS = new VectorLayer({
        source: new VectorSource({
          url: './data/BCSTrails.gpx',
          format: new GPX()
        }),
        style: function(feature) {
           return style['MultiLineStringBCS'];
         },
        visible: true
      });  

var vectorWPTs = new VectorLayer({
        source: new VectorSource({
          url: './data/BrandywineWPTs.gpx',
          format: new GPX()
        }),
        style: function(feature) {
           return style['Point'];
         },
        visible: true
      });         

var map = new Map({
      target: 'map-container',
      layers: [tileLayer, vector, vector2, vector3, vectorMetalDome, vectorBCS, vectorWPTs],
      view: new View({
            center: fromLonLat([-123.191558, 50.090620]),
        zoom: 12
        })
    });

function ToggleBCSTrailsDisplay() {
    if(vectorBCS.visible === false){
        vectorBCS.visible = true;
        vectorBCS.setVisible(true);
        }
    else{
        vectorBCS.visible = false;
        vectorBCS.setVisible(false);
        }
}
function ToggleWPTDisplay() {
    if (vectorWPTs.visible === false) {
        vectorWPTs.visible = true;
        vectorWPTs.setVisible(true);
    } else {
        vectorWPTs.visible = false;
        vectorWPTs.setVisible(false);
    }
}
function ToggleDisplayMetalDomeTrail() {
    if(vectorMetalDome.visible === false) {
        vectorMetalDome.visible = true;
        vectorMetalDome.setVisible(true);}
    else {
            vectorMetalDome.visible = false;
            vectorMetalDome.setVisible(false);
        }
}

DisplayBCSTrails.addEventListener('click', ToggleBCSTrailsDisplay);
DisplayWPTs.addEventListener('click', ToggleWPTDisplay);
DisplayMetalDomeTrail.addEventListener('click', ToggleDisplayMetalDomeTrail);