摘要:上傳文件上傳文件的后端服務使用實現。表格使用實現動態列名數組操作資料創建排序刪除追加轉字符串拼接數組循環字符串操作拆分等類型轉換事件表格點擊行事件組件騰訊地圖繪制數據繪制選中點組件熱力圖與百度地圖擴展
上傳文件 上傳文件的后端服務
使用Python Flask實現。
import os from flask import Flask, request, redirect, url_for, send_from_directory from werkzeug import secure_filename from flask_cors import CORS UPLOAD_FOLDER = "/path/to/the/uploads" ALLOWED_EXTENSIONS = set(["txt", "pdf", "png", "jpg", "jpeg", "gif"]) app = Flask(__name__) CORS(app) app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER def allowed_file(filename): return "." in filename and filename.rsplit(".", 1)[1] in ALLOWED_EXTENSIONS @app.route("/", methods=["GET", "POST"]) def upload_file(): if request.method == "POST": file = request.files["file"] if file and allowed_file(file.filename): filename = secure_filename(file.filename) file.save(os.path.join(app.config["UPLOAD_FOLDER"], filename)) return redirect(url_for("uploaded_file", filename=filename)) return """""" @app.route("/uploads/Upload new File Upload new File
解決跨域訪問,需安裝flask-cors
上傳組件使用Element UI實現
// action指定上傳文件后臺服務, on-success指定上傳成功后執行的方法TSV解析// 在Vue中指定數據fileName、計算屬性fileContent、以及上傳成功后的方法handleSuccess new Vue({ el: "#app", data: { fileName: null }, computed: { fileContent: function() { if(this.fileName != null) { return this.fileName.response; } } }, methods: { handleSuccess: function(response, file, fileList) { this.fileName = file; return this.$confirm(`上傳 ${ file.name }成功!`); } } }); 點擊上傳 只能上傳txt文件,分隔符為
使用d3-dsv庫。
d3.tsvParse("foo bar 1 2"); // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]]表格
使用v-for實現動態列名
JS數組操作
資料
創建、排序、刪除、追加、reverse、slice、join轉字符串、concat拼接數組、forEach循環
split拆分、parseInt等類型轉換
事件表格點擊行事件
Leaflet組件
Vue.component("leaflet", { props: ["table_data", "selected_row"], data() { return { map: null, layer: null, point: null }; }, template: "", mounted: function() { this.init(); this.update(); this.highlight(); }, watch: { table_data: function () { this.update(); }, selected_row: function() { this.highlight(); } }, methods: { init: function() { this.map = L.map(this.$el.id).setView([29.802946,106.396835], zoom = 10); L.tileLayer( "https://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0", { maxZoom: 18, subdomains: "0123", tms: true, attribution: "© { var date = new Date(pnt["collecttime"]*1000); markerArray.push(L.circle([pnt["bmuserlat"], pnt["bmuserlng"]]).bindTooltip(date+"")); // L.circle([pnt["bmuserlat"], pnt["bmuserlng"]], {radius:15}).addTo(this.map); }); this.layer = L.featureGroup(markerArray).addTo(this.map); this.map.fitBounds(this.layer.getBounds()); }, highlight: function() { if(this.point != null) this.point.removeFrom(this.map); // 繪制選中點 if(this.selected_row != null) { this.point = L.circleMarker([this.selected_row["bmuserlat"], this.selected_row["bmuserlng"]], {color: "red"}).addTo(this.map).bindPopup(this.selected_row["collecttime"] + ""); } } } });ECharts組件
Vue.component("echarts-heatmap", { props: ["table_data"], data: function() { return { map: null } }, computed: { plot_data: function() { //GCJ-02 to BD-09 function bd_encrypt(gcjLat, gcjLon) { x_pi = 3.14159265358979324 * 3000.0 / 180.0; var x = gcjLon, y = gcjLat; var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi); var bdLon = z * Math.cos(theta) + 0.0065; var bdLat = z * Math.sin(theta) + 0.006; return { "lat": bdLat, "lon": bdLon }; } var heatArray = Array(); this.table_data.forEach(function(item) { var x = Math.round(item["bmuserlng"] * 1000) / 1000; var y = Math.round(item["bmuserlat"] * 1000) / 1000; var res = bd_encrypt(y, x); var x = res.lon; var y = res.lat; var idx = item["color_idx"] heatArray.push([x, y, idx]); }); var heatMap = []; heatArray.reduce(function(res, value){ if(!res[value]) { res[value] = value; heatMap.push(value); } return res; }, {}); var result = []; heatMap.reduce(function(res, value) { k = [value[0], value[1]] if(!res[k]) { res[k] = [value[0], value[1], 0]; result.push(res[k]); } res[k][2] += 1; return res; }, {}); var max = 0; result.reduce(function(res, value){ if(res < value[2]) { res = value[2]; max = res; } return res; }, 0); //result = result.filter(word => word[2] == max); console.log(result); return(result); }, option: function() { var points = this.plot_data; center = points.reduce(function(res, value){ return [res[0] + value[0], res[1] + value[1]]; }, [0,0]); let center_x = center[0] / points.length; let center_y = center[1] / points.length; return { animation: false, bmap: { center: [center_x, center_y], zoom: 14, roam: true }, visualMap: { show: false, top: "top", min: 0, max: 5, seriesIndex: 0, calculable: true, inRange: { color: ["blue", "blue", "green", "yellow", "red"] } }, series: [{ type: "heatmap", coordinateSystem: "bmap", data: points, pointSize: 5, blurSize: 6 }]} } }, template: "", mounted: function() { this.initMap(); this.updateMap(); }, watch: { table_data: function() { this.updateMap(); } }, methods: { initMap: function() { this.map = echarts.init(this.$el); } , updateMap: function() { var app = {}; app.title = "熱力圖與百度地圖擴展"; this.map.setOption(option = this.option); var bmap = this.map.getModel().getComponent("bmap").getBMap(); bmap.addControl(new BMap.MapTypeControl()); this.map.setOption(option, true); } } });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104858.html
摘要:第二部分學習前端開發第二部分指出了學習成為一個前端開發者所需的自學資源和教學資源譯者注教學資源包括有講師指導的付費課程計劃學院和訓練營。第三部分前端開發工具第三部分簡要地介紹和指出了一些前端圈內的工具。 參與者(排名不分先后):blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...
摘要:第二部分學習前端開發第二部分指出了學習成為一個前端開發者所需的自學資源和教學資源譯者注教學資源包括有講師指導的付費課程計劃學院和訓練營。第三部分前端開發工具第三部分簡要地介紹和指出了一些前端圈內的工具。 參與者(排名不分先后):blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...
摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...
閱讀 291·2024-11-07 18:25
閱讀 130367·2024-02-01 10:43
閱讀 868·2024-01-31 14:58
閱讀 828·2024-01-31 14:54
閱讀 82768·2024-01-29 17:11
閱讀 3052·2024-01-25 14:55
閱讀 1985·2023-06-02 13:36
閱讀 3033·2023-05-23 10:26