Question

我已经开发了一个名为 service.js 的javascript文件，该文件创建了一个mapbox地图，但是我想减少代码从我的文件service.js到其他文件的调用，以获取一个包含一个json。

我在名为var no_base_map = {...};的文件中有no_base_map.js，我想将该属性作为case 'nobase: return no_base_map;'导入函数中

但是我不知道如何在 service.js 中导入该javascript文件，如何引用它？

function getBaseMap(name) {

    switch(name) {
        case 'nobase': return getNoBaseMap();
        default:
            return getNoBaseMap();
    }

};

function getNoBaseMap() {
    var no_base_map =
    {
        "version": 8,
        "name": "NO_BASE_MAP",
        "metadata": { },
        "center": [
            1.537786,
            41.837539
        ],
        "zoom": 12,
        "bearing": 0,
        "pitch": 0,
        "sources": {},
        "layers": [],
        "id": "no-base-map"
    };
    return no_base_map;
};

也许我不能很好地解释...我没有使用react，angular，express来添加具有import o require的其他文件。是从html文件加载的javascript。

如您所见，这是我的html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Map Generator</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='module/service.js'></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        myCustomMap.addMap("5b4f12233cfb101f4c2d0537", "map");
    </script>
</body>
</html>

这是我的Service.js

var myCustomMap = {

    addMap: function(id, target) {
        sendRequest(id)
        .then( (data) => {
            // Create Map
            return createMap(data, target);
        })
        .then( (info) => {
            // Add Controls
            addControls(info.map);
            return info;
        })
        .then( (info) => {
            // Add Layers
            addLayers(info.map, info.layers);
        })
        .catch( (err) => {
            console.log('Error: ', err);
        });
    }
};

function sendRequest(id) {
    return new Promise( (resolve, reject) => {
        var url = 'http://localhost:8080/map/' + id;
        fetch(url)
        .then( (res) => res.json())
        .then( (data) => {
            if (data.ok) {
                resolve(data.map);
            } else {
                reject(data.error);
            }
        })
        .catch( (err) => {
            reject(err);
        });
    });   
};

function createMap(info, target) {
    // var base = String(info.base); // info.base = 'nobase'
    var base = 'nobase'; // info.base = 'nobase'
    var lat = Number(info.lat);
    var lng = Number(info.lng);
    var zoom = Number(info.zoom);
    var layers = info.wmslayers;

    var map = new mapboxgl.Map({
        container: String(target), // container id
        style: getBaseMap(base), // stylesheet location
        center: [lng, lat], // starting position [lng, lat]
        zoom: zoom // starting zoom
    });

    return { map: map, layers: layers };
};

function addControls(map) {
    navigationControl(map);
    addScaleControl(map);
    addLocationControl(map);
};

function navigationControl(map) {
    var nav = new mapboxgl.NavigationControl();
    map.addControl(nav, 'top-right');
};

function addScaleControl(map) {
    var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: 'metric'
    });
    map.addControl(scale);
};

function addLocationControl(map) {
    map.addControl(new mapboxgl.GeolocateControl({
        positionOptions: {
            enableHighAccuracy: true,
            watchPosition: true
        },
        trackUserLocation: true
    }));
};

function addLayers(map, layers) {
    if (layers.length > 0) {
        layers.reverse().forEach(layer => {

            map.on('load', function() {
                map.addLayer({
                'id': String(layer.keyName), 'type': 'raster',
                'source': { 'type': 'raster', 'tiles': [ createUrl(layer) ], 'tileSize': 256 }
                });
            });

        });
    }
};

function createUrl(layer) {
    var fullUrl;
    if (!layer.hasFilter) {
        fullUrl = `${layer.url}bbox={bbox-epsg-3857}&format=${layer.format}&styles=${layer.styles}&transparent=true&service=WMS&version=${layer.version}&request=GetMap&${(layer.version.localeCompare('1.3.0') === 0) ? 'crs' : 'srs' }=EPSG:3857&width=256&height=256&layers=${layer.layers}&map=${layer.aditionals}`;
    } else {
        fullUrl = `${layer.url}bbox={bbox-epsg-3857}&format=${layer.format}&styles=${layer.styles}&transparent=true&service=WMS&version=${layer.version}&request=GetMap&${(layer.version.localeCompare('1.3.0') === 0) ? 'crs' : 'srs' }=EPSG:3857&width=256&height=256&layers=${layer.layers}&map=${layer.aditionals}&CQL_FILTER=${layer.code}='${layer.filter}'`;
    }
    return fullUrl;
};

function getBaseMap(name) {

    switch(name) {
        case 'nobase': return getNoBaseMap();
        default:
            return getNoBaseMap();
    }

};

function getNoBaseMap() {
    var no_base_map =
    {
        "version": 8,
        "name": "NO_BASE_MAP",
        "metadata": { },
        "center": [
            1.537786,
            41.837539
        ],
        "zoom": 12,
        "bearing": 0,
        "pitch": 0,
        "sources": {},
        "layers": [],
        "id": "no-base-map"
    };
    return no_base_map;
};

我想在其他文件中使用getNoBaseMap函数。

export function no_base() {
    return {
        "version": 8,
        "name": "NO_BASE_MAP",
        "metadata": {
        },
        "center": [
        1.537786,
        41.837539
        ],
        "zoom": 12,
        "bearing": 0,
        "pitch": 0,
        "sources": {},
        "layers": [],
        "id": "no-base-map"
    };
};

如何将该功能添加到我的service.js中？如果我尝试使用import，它将显示以下内容：

未捕获的SyntaxError：意外令牌{

Answer 1

您可以从一个JavaScript文件调用该函数到另一个。只需在

中将脚本源包含在html中即可

temp.js

function getBaseMap(name) {

switch(name) {
    case 'nobase': return getNoBaseMap();
    default:
        return getNoBaseMap();
}

};

function getNoBaseMap() {
var no_base_map =
{
    "version": 8,
    "name": "NO_BASE_MAP",
    "metadata": { },
    "center": [
        1.537786,
        41.837539
    ],
    "zoom": 12,
    "bearing": 0,
    "pitch": 0,
    "sources": {},
    "layers": [],
    "id": "no-base-map"
};
return no_base_map;
};

html文件

<!DOCTYPE html>
    <html>
        <head>
            <meta charset='utf-8' />
            <title>Map Generator</title>
            <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />



            <script src="temp.js"></script>
            <script src='module/service.js'></script>

            <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
            <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
            <style>
                body { margin:0; padding:0; }
                #map { position:absolute; top:0; bottom:0; width:100%; }
            </style>
        </head>
    <body>
        <div id="map"></div>
        <script>
            myCustomMap.addMap("5b4f12233cfb101f4c2d0537", "map");
        </script>
    </body>
</html>

您的文件server.js将保持不变。

由于您首先在html文件中包含了temp.js文件，因此，您可以从service.js中的temp.js调用该函数

因此，您可以从service.js中的temp.js调用该函数

请让我知道它是否有效。

如何从其他JavaScript文件加载JavaScript

1 个答案: