Question

我有一个链接到GeoJSON FeatureCollection对象的JSON文件的URL。

{"type": "FeatureCollection", "features": [{...}, {...}, ...]}

我插入属性＆＃34;属性＆＃34;进入这个FeatureCollection对象并分配一个值＆＃34; myFeatureCollection＆＃34;关键＆＃34;名称＆＃34;。

{"type": "FeatureCollection", "features": [{...}, {...}, ...], "properties": {"name": "myFeatureCollection"}}

我可以访问价值＆＃34; myFeatureCollection＆＃34;来自JavaScript的外部？

总之，我正在寻找一种方法来实现以下目标（伪代码）：

var fc = jsonRead("myJsonUrl");

var fcName = fc.properties.name;

Answer 1

仅当您的数据存储在外部JavaScript文件中时：

您需要考虑文件是异步加载的，因此必须实现一个返回回调函数的函数。

function jsonRead(String url, Function callback){}

其中：

url =文件所在的位置路径   （文件：/// d：/UserName/GeoJSON/data/geo.js）。

回调 =上次操作结束时执行的回调函数。

在回调函数的上下文中，您可以使用文件内容来执行其他函数。

我做了一个小小的演示，你可以看到它是如何工作的。

在本地计算机中，您需要这些文件。

<强>的index.html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="lib/js/reader.js"></script>
</head>
<body>
    <ul id="list"></ul>
</body>
</html>

<强> reader.js：

(function ()
{
    window.onload = function ()
    {
        // Calls the jsonRead function. The first parameter is the URL, the second one is a callback function.
        jsonRead("file:///D:/YourDirectory/GeoJSON/data/geo.js", function (fc)
        {
            buildList(fc); // Demo function to build a list with the current data in «fc» parameter.
        });
    };
    function jsonRead(url, callback)
    {
        var head, script
        head = document.getElementsByTagName("head")[0];
        script = document.createElement("script");
        script.src = url;
        script.type = "text/javascript";
        head.appendChild(script);
        script.onload = function ()
        {
            callback(freeBus);
        };
    }
    /* Demo */
    // Demo function. It uses the external javascript file content. 
    function buildList(data)
    {
        var fc = data;

        var list, li, i, j, cant, coordinatesCant, ulCoordinates, liCoordinates;
        list = document.getElementById("list");
        cant = fc.features.length;

        for (i = 0; i < cant; i++)
        {
            li = document.createElement("li");
            li.innerHTML = fc.features[i].id;
            coordinatesCant = fc.features[i].geometry.coordinates.length;

            if (coordinatesCant > 0)
            {
                ulCoordinates = document.createElement("ul");

                for (j = 0; j < coordinatesCant; j++)
                {
                    liCoordinates = document.createElement("li");
                    liCoordinates.innerHTML = JSON.stringify(fc.features[i].geometry.coordinates[j]);
                    ulCoordinates.appendChild(liCoordinates);
                }
                li.appendChild(ulCoordinates);
            }
            list.appendChild(li);
        }
        document.body.appendChild(list);
    }
})();

<强> geo.js：

var freeBus = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-105.00341892242432, 39.75383843460583],
                    [-105.0008225440979, 39.751891803969535]
                ]
            },
            "properties": {
                "popupContent": "This is free bus that will take you across downtown.",
                "underConstruction": false
            },
            "id": 1
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-105.0008225440979, 39.751891803969535],
                    [-104.99820470809937, 39.74979664004068]
                ]
            },
            "properties": {
                "popupContent": "This is free bus that will take you across downtown.",
                "underConstruction": true
            },
            "id": 2
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [-104.99820470809937, 39.74979664004068],
                    [-104.98689651489258, 39.741052354709055]
                ]
            },
            "properties": {
                "popupContent": "This is free bus that will take you across downtown.",
                "underConstruction": false
            },
            "id": 3
        }
    ]
};

var lightRailStop = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
                "popupContent": "18th & California Light Rail Stop"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-104.98999178409576, 39.74683938093904]
            }
        }, {
            "type": "Feature",
            "properties": {
                "popupContent": "20th & Welton Light Rail Stop"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-104.98689115047453, 39.747924136466565]
            }
        }
    ]
};

var bicycleRental = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9998241,
                    39.7471494
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 51
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9983545,
                    39.7502833
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 52
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9963919,
                    39.7444271
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 54
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9960754,
                    39.7498956
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 55
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9933717,
                    39.7477264
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 57
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9913392,
                    39.7432392
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 58
        },
        {
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -104.9788452,
                    39.6933755
                ]
            },
            "type": "Feature",
            "properties": {
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
            },
            "id": 74
        }
    ]
};

var campus = {
    "type": "Feature",
    "properties": {
        "popupContent": "This is the Auraria West Campus",
        "style": {
            weight: 2,
            color: "#999",
            opacity: 1,
            fillColor: "#B0DE5C",
            fillOpacity: 0.8
        }
    },
    "geometry": {
        "type": "MultiPolygon",
        "coordinates": [
            [
                [
                    [-105.00432014465332, 39.74732195489861],
                    [-105.00715255737305, 39.74620006835170],
                    [-105.00921249389647, 39.74468219277038],
                    [-105.01067161560059, 39.74362625960105],
                    [-105.01195907592773, 39.74290029616054],
                    [-105.00989913940431, 39.74078835902781],
                    [-105.00758171081543, 39.74059036160317],
                    [-105.00346183776855, 39.74059036160317],
                    [-105.00097274780272, 39.74059036160317],
                    [-105.00062942504881, 39.74072235994946],
                    [-105.00020027160645, 39.74191033368865],
                    [-105.00071525573731, 39.74276830198601],
                    [-105.00097274780272, 39.74369225589818],
                    [-105.00097274780272, 39.74461619742136],
                    [-105.00123023986816, 39.74534214278395],
                    [-105.00183105468751, 39.74613407445653],
                    [-105.00432014465332, 39.74732195489861]
                ], [
                    [-105.00361204147337, 39.74354376414072],
                    [-105.00301122665405, 39.74278480127163],
                    [-105.00221729278564, 39.74316428375108],
                    [-105.00283956527711, 39.74390674342741],
                    [-105.00361204147337, 39.74354376414072]
                ]
            ], [
                [
                    [-105.00942707061768, 39.73989736613708],
                    [-105.00942707061768, 39.73910536278566],
                    [-105.00685214996338, 39.73923736397631],
                    [-105.00384807586671, 39.73910536278566],
                    [-105.00174522399902, 39.73903936209552],
                    [-105.00041484832764, 39.73910536278566],
                    [-105.00041484832764, 39.73979836621592],
                    [-105.00535011291504, 39.73986436617916],
                    [-105.00942707061768, 39.73989736613708]
                ]
            ]
        ]
    }
};

var coorsField = {
    "type": "Feature",
    "properties": {
        "popupContent": "Coors Field"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404191970824, 39.756213909328125]
    }
};

<强>结果：

如何在JavaScript中访问GeoJSON FeatureCollection对象

1 个答案: