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数据并在地图上显示相关推荐

arcgis怎么关联excel表_在arcgis中添加excel表格数据-ArcGIS如何将Excel里的数据关联至地图上...
ArcGIS如何将Excel里的数据关联至地图上 1.打开一个arcgis工程文件. 2.在左侧窗口中右击面要素文件,选择"open attribute table". 3.在出现 ...
纯jquery 前端导入 Excel数据减少服务端压力
纯jquery 前端导入 Excel数据减少服务端压力前提是要导入jq库在这里就不再累述重要的是导入xlsx.core.min.js 我根据xlsx.core.min.js编写自己的工具类这里 ...
纯前端读取excel （SheetJS js-xlsx.js框架）
文章目录介绍兼容性使用方法实现思路文件引用代码示例及详解开发注意介绍应项目需求需要做一个纯前端读取excel文件的功能.各方面评估框架后选择了SheetJS的xlsx.js. She ...
arcgis前端(3)-----＞基础篇--自定义地图优化/隐藏or显示子图层
arcgis前端(3)----->基础篇–自定义地图优化/隐藏or显示子图层文章目录 arcgis前端(3)----->基础篇--自定义地图优化/隐藏or显示子图层前言实现效果展示 ...
前端读取Excel文件（使用js-xls插件）
前言: 由于项目需要,现在要用户在上传文件之后,页面能实时.即不通过服务器就能读取到excel的表头关键字,就像上传图片实时预览一样,将关键字展示到页面上. 官方例子: 使用js-xls插件,亲测IE ...
android读取excel数据库,Android 读取Excel数据并保存在本地数据库
在工作中遇到需要将Excel的数据读取出来并保存在本地数据库中的操作,数据如下: 图片.png 需要做以下准备: 读取Excel的jar包[文章末尾会分享该jar包] 保存数据的数据库框架,在这里我们 ...
python读取excelsheet-一文看懂用Python读取Excel数据
原标题:一文看懂用Python读取Excel数据导读:现有的Excel分为两种格式:xls(Excel 97-2003)和xlsx(Excel 2007及以上). Python处理Excel文件主要 ...
python读取excel某一列内容-Python读取Excel数据并根据列名取值
一直想将自己接触到的东西梳理一遍,可就是迈不出第一步,希望从这篇总结开始不要再做行动的矮人了. 最近测试过程中需要用到python读取excel用例数据,于是去了解和学习了下xlrd库,这里只记录使用 ...
python如何读取excel数据-python怎么读取excel中的数值
最近测试过程中需要用到python读取excel用例数据,于是去了解和学习了下xlrd库,这里只记录使用过程中读取excel数据相关操作. 安装xlrd库(推荐学习:Python视频教程) 可以下载x ...

ARCGIS前端--读取excel数据并在地图上显示

ARCGIS前端--读取excel数据并在地图上显示相关推荐

最新文章

热门文章