将 javascript 转换为 json？

Question

我正在处理传单，我注意到许多示例使用单独的 js 文件，其中变量设置为 JSON 流。

我如何才能修改以下示例，以便它可以读取带有 geojson 的 json 文件，而不是 javascript 中的变量声明？

代码如下所示：

<script type="text/javascript">

    var geoJsonData = {
        "type": "FeatureCollection", 
        "features": [
            { "type": "Feature", "id":"1", "properties": { "address": "2"   }, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
            { "type": "Feature", "id":"2", "properties": { "address": "151" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435   ] } },
            { "type": "Feature", "id":"3", "properties": { "address": "21"  }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193     ] } },
            { "type": "Feature", "id":"4", "properties": { "address": "14"  }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963    ] } },
            { "type": "Feature", "id":"5", "properties": { "address": "38B" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
            { "type": "Feature", "id":"6", "properties": { "address": "38"  }, "geometry": { "type": "Point", "coordinates": [175.2209942   ,-37.8192782833 ] } }
        ]
    };

    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());
</script>

我知道可以使用 $.getJSON 来完成，但如果可能的话，我更愿意使用 L.geoJson。

Answer 1

您可以将 geoJSON 变量存储在单独的 .js 文件中，然后将其导入到主逻辑 .js 文件中。尝试将您的 var geoJsonData 粘贴到名为 geoJsonData.js 的文件中，然后在该文件的底部添加 "module.exports = geoJsonData;"。然后在您的逻辑文件（即 scripts.js）上，您可以通过在顶部添加 "var geoJsonData = require("./geoJsonData.js"); 按原样导入变量。然后您调用将点添加到地图将是

function geoJsonMarkers() {  
$.getJSON(geoJsonData, function (data) {
        // this adds the GeoJSON layer to the map once the file is loaded
        L.geoJson(data).addTo(mymap);
}
}

Answer 2

要从文件中读取 JSON 数据，您可以使用 fetch 函数 (read more)。

这是一个例子：

fetch('http://example.com/movies.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // Do something with the JSON data
        console.table(myJson);
    });

你的情况：

function doSomething(geoJsonData) {
    var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    var map = L.map('map')
            .addLayer(tiles);

    var markers = L.markerClusterGroup();

    var geoJsonLayer = L.geoJson(geoJsonData, {
        onEachFeature: function (feature, layer) {
            layer.bindPopup(feature.properties.address);
        }
    });
    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());
}

fetch('http://myserver.com/myfile.json')
    .then(function(response) {
        return response.json();
    })
    .then(doSomething)
    .catch(function(err) {
        // In case of error, display the error message
        console.error(err);
    });

请注意，我将您的代码放在回调函数中，因为 fetch 函数是异步的。

Answer 3

I know it can be done with $.getJSON, but I would prefer using L.geoJson, if possible.

您似乎没有意识到这 2 个功能提供了您工作流程的不同步骤，如其他 2 个答案所示。

您可能会被提供为您执行这两个步骤的实用函数的其他库所误导。

jQuery 的 $.getJSON 是从您的服务器获取/检索数据。

一旦你得到了生成的 JS 对象，你就可以将它提供给 Leaflet 的 L.geoJSON 工厂，以将其转换为 Leaflet 层。

将 javascript 转换为 json？

Convert javascript to json?

javascript

json

geojson