在javascript中从csv文件中读取数据

时间:2017-07-10 18:19:19

标签: javascript csv d3.js

我试图通过csv数据在地图上添加点。 在csv中我有纬度和经度字段... 我怎样才能做到这一点? 也许从csv获取一个数组并使用它? 我尝试了很多东西,什么都没有用。

这是我的代码:



const functions = require('firebase-functions');
const admin = require('firebase-admin');

module.exports = functions.https.onRequest((req, res) => {

    const conversationID = req.query.conversationID;
    const currentUserID = req.query.currentUserID;

    console.log("conversationID", conversationID, "currentUserID", currentUserID);

    return console.log("getChatGroupConversationAvatars");
});




1 个答案:

答案 0 :(得分:0)

这对你有用吗? 使用按钮选择csv文件,脚本将在页面上显示它。

的index.html:

<!DOCTYPE HTML>
<html>
<head>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            background-color: black;
        }

        #earth_div {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            position: absolute !important;
        }
        #files {
            top: 0;
            left: 0;
            position: absolute;
            z-index: 999;
        }
    </style>
    <title>WebGL Earth API: Markers</title>
</head>
<body>
    <input type="file" id="files" name="file" />
    <div id="earth_div"></div>
    <script>
        var earth = new WE.map('earth_div');
        WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(earth);
        var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);
        earth.setView([0, 0], 3);
        document.getElementById('files').onchange = function() {
            readFile();
        };
        function readFile() {
            var files = document.getElementById('files').files;
            if (!files.length) {
              alert('Please select a file!');
              return;
            }
            var file = files[0];
            var start = 0;
            var stop = file.size - 1;
            var reader = new FileReader();
            reader.onloadend = function(evt) {
                if (evt.target.readyState == FileReader.DONE) {
                    var text = evt.target.result;
                    var lines = text.split('\n');
                    for (var i = 0; i < lines.length; i++) {
                        lines[i] = lines[i].split(',');
                        lines[i].map(function(val) {
                            return Number(val);
                        });
                    }
                    for (var i = 0; i < lines.length; i++) {
                        var marker = WE.marker([lines[i][0], lines[i][1]]).addTo(earth);
                        marker.bindPopup("<b>The data </b><br><a target=_blank href='http://www.google.com'>link</a>.<br />"
                            , { maxWidth: 150, closeButton: true }).closePopup();
                    }
                }
            }
            var blob = file.slice(start, stop + 1);
            reader.readAsBinaryString(blob);
        }
    </script>
</body>
</html>

points.csv:

1,1
2,2
3,3
4,4