Question

我使用leafletjs创建了世界地图，现在尝试显示来自https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json的数据圈我的数据分布输出看起来像

截至目前考虑半径为常数

但它应该看起来像

数据在地图上分布

我的代码

＆＃13;

// load and display the World
    d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json", function(error, data) {
        var map = L.map('map', {
            center: [20.0, 5.0],
            minZoom: 2,
            zoom: 2
        });
        L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
            subdomains: ['otile1', 'otile2', 'otile3', 'otile4']
        }).addTo(map);
        data.features.forEach(function (data2) {
            var coordinates = ([+data2.properties.reclong, +data2.properties.reclat]);
            var circle = L.circle([coordinates[0],coordinates[1]], 10, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5
            }).addTo(map);
        });
    });

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Forced Layout</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <script src="../Scripts/d3/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <link href="demo.css" rel="stylesheet" />
</head>
<body>
    <!--
       <div class="mainContainer text-center">
        <div id="chart"></div>
    </div>  
    
        -->
   
    <div id="map" style="height: 440px; border: 1px solid #AAA;"></div>
    <script src="../Scripts/jquery-2.2.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>
    <script src="demo.js"></script>
</body>
</html>

＆＃13;

Fiddle Link

Answer 1

而不是这个

应该是这个

var coordinates = ([+data2.properties.reclong, +data2.properties.reclat]);

当你在传单中创建一个圆时，第一个数组元素是lat第二个是lon。 refer

var coordinates = ([+data2.properties.reclat, +data2.properties.reclong]);

对于latlng对象，lat首先出现，然后是refer

工作代码here

尝试使用leafletjs在世界地图上绘制Json数据但显示的数据不准确

1 个答案: