Question

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

我如何能够修改以下示例，以便它可以使用json读取geojson文件，而在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

要从文件读取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 2

您可以将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 3

我知道可以使用FEMALE_2来完成，但是我更愿意使用$.getJSON。

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

您可能会被其他提供实用程序功能的库迷住了，这些功能可以为您执行这两个步骤。

jQuery的L.geoJson是要从服务器中获取/检索数据。

一旦有了生成的JS对象，就将其馈送到Leaflet的$.getJSON工厂中，以将其转换为Leaflet层。

将javascript转换为json？

3 个答案: