如何将geojson文件的内容分配给Javascript中的变量? [英] How can I assign the contents of a geojson file to a variable in Javascript?

问题描述

所示的代码已经可以使用了，但是我想清理一下.它声明了一个名为 placez 的变量，该变量包含geojson格式的信息，以便下一部分代码可以使用过滤器读取和加载到地图上.但是，实际上，要映射的点数超过50,000(此处的示例仅显示2).我想知道的是如何将来自同一个目录中的文件的数据加载到 placesgj.geojson 中，其中将以geojson格式写入50,000个数据条目到变量 placez ，而不是像示例中那样在此处手动编写.其余的代码为了简洁而被忽略，与功能无关.预先感谢！

The code shown already works, but I want to clean it up. It declares a variable called placez which contains information in geojson format for the next part of the code to read and load on a map using filters. However, in reality, the amount of points to be mapped exceeds 50,000 (the example here only shows 2). What I want to know is how I can just load the data coming from a file in the same directory called placesgj.geojson, where the 50,000 data entries will be written in geojson format, to the variable placez instead of writing them manually there like in the example. The rest of the code is ommited for tidyness, and irrelevant for the functionality. Thanks in advance!

var placez = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "icon": "theatre"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.038659, 38.931567]
        }
    }, {
        "type": "Feature",
        "properties": {
            "icon": "music"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-77.007481, 38.876516]
        }
    }]
};
map.on('load', function() {
    // Add a GeoJSON source containing place coordinates and information.
    map.addSource("placer", {
        "type": "geojson",
        "data": placez
    });
    placez.features.forEach(function(feature) {
        var symbol = feature.properties['icon'];
        var layerID = 'poi-' + symbol;

推荐答案

这是将JSON文件加载到javascript对象中的一种情况.可以使用XMLHttpRequest在纯Java脚本中完成.

This is a case of loading JSON file in to a javascript object. It can be done in Pure Java Script using XMLHttpRequest.

 function loadJSONFile(callback) {   

    var xmlobj = new XMLHttpRequest();

    xmlobj.overrideMimeType("application/json");

    xmlobj.open('GET', 'placesgj.geojson', true); // Provide complete path to your json file here. Change true to false for synchronous loading.

    xmlobj.onreadystatechange = function () {
          if (xmlobj.readyState == 4 && xmlobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xmlobj.responseText);
          }
    };

    xmlobj.send(null);  
 }

通过传递如下所示的回调函数来调用loadJSONFile函数:

call the loadJSONFile function by passing a call back function as below:

loadJSONFile(function(response) {
    var placez = JSON.parse(response);
 });

//继续您的map.on('load'，..代码在这里...

// Continue with your map.on('load', .. code here...

这篇关于如何将geojson文件的内容分配给Javascript中的变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！