ARCGIS前端--读取excel数据并在地图上显示
? ? ? ?已知一批有經緯度點信息的數據，臨時想要在前端地圖上展示具體的位置和效果，有三種方法可以實現：
? ? ? ?方法一：
? ? ? ?傳統方法是把數據發布成要素服務，然后在前端調用URL展示，但是當數據變化時，需要重新發布要素服務，占用資源，過程也繁瑣，效率低。
? ? ? ?方法二：
? ? ? ?把經緯度數據寫在代碼里，利用Arcgis API前端繪制。這樣做代碼是寫死的，如果數據有變化，需要修改代碼，效果不好也不方便。
? ? ? ?方法三：
? ? ? ?把數據放到excel里，約定固定格式存放，通過導入excel文件獲取經緯度信息，在前端繪制即可。即使數據變化，也只是修改excel里的數據，無需重發服務或者修改代碼，這種方法比較靈活方便。
? ? ? ?1、以約定格式把數據放到excel里
? ? ? ?
? ? ? ?2、編寫導入excel獲取數據的js代碼，自定義命名為excel.js
? ? ? ?需要引入xlsx.full.min.js模塊
? ? ? ?在線引入地址：http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js
? ? ? ?代碼：
/* FileReader共有4種讀取方法： 1.readAsArrayBuffer(file)：將文件讀取為ArrayBuffer。 2.readAsBinaryString(file)：將文件讀取為二進制字符串 3.readAsDataURL(file)：將文件讀取為Data URL 4.readAsText(file, [encoding])：將文件讀取為文本，encoding缺省值為‘UTF-8‘ */ var wb; //讀取完成的數據 var aa; var text = []; var rABS = false; //是否將文件讀取為二進制字符串 var importExcel; importExcel = function(obj) { //導入if (!obj.files) {return;}//const IMPORTFILE_MAXSIZE = 1 * 2048; //這里可以自定義控制導入文件大小var suffix = obj.files[0].name.split(".")[1]if (suffix != 'xls' && suffix != 'xlsx') {alert('導入的文件格式不正確!')return}/* if (obj.files[0].size / 1024 > IMPORTFILE_MAXSIZE) {alert('導入的表格文件不能大于2M')return}*/var f = obj.files[0];var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;if (rABS) {wb = XLSX.read(btoa(fixdata(data)), { //手動轉化type: 'base64'});} else {wb = XLSX.read(data, {type: 'binary'});}//wb.SheetNames[0]是獲取Sheets中第一個Sheet的名字//wb.Sheets[Sheet名]獲取第一個Sheet的數據aa = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));//轉為JSON對象var obj = JSON.parse(aa)//發布消息dojo.topic.publish("getData", {"objData": obj});var u = eval('(' + aa + ')');//獲取表格中為address的那列存入text中for (var i = 0; i < u.length; i++) {text.push(u[i].address);}};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);} }?
? ? ? ?3、編寫Arcgis API繪制代碼，自定義命名為map.js
? ? ? ?代碼：
dojo.require("dojo.topic");var map;require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/ArcGISTiledMapServiceLayer","esri/layers/FeatureLayer","esri/symbols/PictureMarkerSymbol","esri/graphic","esri/InfoTemplate","esri/SpatialReference",'esri/geometry/Point',"esri/geometry/Extent","dojo/domReady!"], function(Map,ArcGISDynamicMapServiceLayer,ArcGISTiledMapServiceLayer,FeatureLayer,PictureMarkerSymbol,Graphic,InfoTemplate, SpatialReference,Point,Extent,) {//初始顯示范圍var mapExtent = new Extent({xmax: 113.799760210539,xmin: 106.57095767482662,ymax: 20.459116202966324,ymin: 18.27952992162579,spatialReference: {wkid: 4326}})map = new Map("map", {extent: mapExtent,basemap: "gray", //arcgis在線地圖sliderStyle: "small",logo: false,});map.on('load', function () {map.hideZoomSlider()map.hidePanArrows()})//訂閱消息dojo.topic.subscribe("getData", function (Json) {var pointsData = Json.objData//循環獲取每一個點信息for(var i=0; i<pointsData.length; i++) {var lon = pointsData[i].LONvar lat = pointsData[i].LATvar cpoint = new Point(lon, lat, new SpatialReference({ wkid: 4326 }));//點符號var locateSymbol = new PictureMarkerSymbol("green.png", 15, 20)var centerGra = new Graphic(cpoint);centerGra.symbol = locateSymbol;map.graphics.add(centerGra); }})});? ? ? ?重點：導入excel后，怎樣接收數據，我們需要引入dojo發布者訂閱者模式(topic.publish/topic.subscribe)
? ? ? ?topic.publish：用于發布消息，接收任意多個參數，第一參數為要發布的信息名字（唯一標識），其他參數為傳遞給訂閱回調函數的參數。
? ? ? ?topic.subscribe：用于訂閱消息，接收兩個參數，第一參數為要訂閱的消息名字（唯一標識），第二參數為回調函數。
? ? ? ?在excel.js中，在導入excel獲取到數據后，通過? dojo.topic.publish("getData", {"objData": obj})? 發布消息。
? ? ? ?在map.js中，通過 dojo.topic.subscribe("getData", function (Json) {})?訂閱消息。
? ? ? ?3、HTML引入各模塊，自定義命名為excel.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>讀取excel并在地圖上打點</title><link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css"> <style>body,html {margin: 0;padding: 0;width: 100%;height: 100%;font-family: Arial;}#map {width: 100%;height: 100%;margin: 0;padding: 0;border: 0px dashed black;background-color: rgb(0, 38, 48);}</style> </head> <body> <div><input type="file" onchange="importExcel(this)" /> </div> <div id="map"> </div> </body> <script src="https://js.arcgis.com/3.26/"></script> <script src="http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js"></script> <script src="excel.js"></script> <script src="map.js"></script> </html>所需文件放到同一目錄路徑下
效果：導入前
導入后：
? ? ? ?百度網盤代碼下載：
? ? ? ?https://pan.baidu.com/s/1Mi_KhX8fbMeHP5W5Okx5gQ
?
?
?
?
總結
以上是生活随笔為你收集整理的ARCGIS前端--读取excel数据并在地图上显示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软语音技术 Windows 语音编程初
- 下一篇： web从零开始做网站：一.HTML基础与