arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中
吐血推荐：网上搜了很久关于webgis地图属性表输出到Excel表，并没能找到相关有价值的信息，在小白面前，这就是一脸懵x啊！网上要么是关于前端如何在页面上直接导出excel，和webgis半毛钱关系没有，要么查看arcgis api for javascript 的帮助文档，里面有的实例是显示属性表信息，如何同时显示并能输出excel表的文章介绍，没找到。。那只能通过看代码，进行改进来实现上面的两种功能，终于终于。。。。找到了他们之间的联系，实现出来了！！
1、首先我已经发布过地图并找到URL，了解直接要发布地图的属性表信息
2、我实现的代码功能是通过查询一个区域的名称，找到该区域的经纬值，并输出到excel中：
3、将相关信息查询出来，显示页面中，实现的结果如下：
4、最关键一步，将这些信息输出到excel中去！点击按键，如图
5、代码部分：
<!DOCTYPE html>
<html> <head>
<title>图层属性查询</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<script src="https://js.arcgis.com/3.23/"></script>
<style>
#map{
position:relative;
height:500px;
width:100%;
}
</style>
</head> <body>
<div>
输入省份或省会名称:
<input type="text" id="searchText" size="40" value="乌鲁木齐" />
<input type="button" value="查询" id="find"/>
<div style="width:200px;margin:auto;text-align:center;">
<button onclick="ok()">导出查询地区经纬度excel文件</button>
</div>
<div id="tbl"> </div> </div> <div id='map'> </div>
<script>
require([
"esri/map",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"dojo/_base/array",
"esri/layers/ArcGISDynamicMapServiceLayer"],
function (
Map,
FindTask,
FindParameters,
Array,
ArcGISDynamicMapServiceLayer) {
var map = new Map("map", {
center: [116.403119,39.915599],
zoom:3,
basemap: "topo"
}); //调用地图服务
DyLayer=new ArcGISDynamicMapServiceLayer('http://localhost:6080/arcgis/rest/services/dtchina/MapServer');
map.addLayer(DyLayer);
var find = new FindTask("http://localhost:6080/arcgis/rest/services/dtchina/MapServer");
var params = new FindParameters();
// layerIds、seachFields、searchText
params.layerIds = [1]; //对layerid=0和1的图层查询
params.searchFields = ["FID", "name","id","lon","lat"];//查该图层的哪些字段
document.getElementById("find").onclick = doFind; function doFind() {
params.searchText = document.getElementById("searchText").value;
find.execute(params, showResults); //执行查询
} function showResults(results) {
console.log("results", results);
let result, attribs;
let s = ["<table border=\"2\"> " +
"<thead>" +
"<tr style=\" background-color:#98a9cc;\">" +
"<td>Name</td> <td>FID</td> <td>ID</td> <td>lon</td> <td>lat</td> </tr> " +
"</thead> " +
"<tbody id=\"state\">"]; Array.forEach(results, function (result) {
attribs = result.feature.attributes;
s.push("<tr> <td>" + attribs.name + "</td> <td>" + attribs.FID + "</td> <td>" +attribs.id+ "</td> <td>" + attribs.lon + "</td> <td>" + attribs.lat + "</td> </tr>" );
}); s.push("</tbody> </table>");
console.log('arr',s);
document.getElementById("tbl").innerHTML = s.join("");//string.split('');
}
});
var ok = (function () {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" ' +
'xmlns="https://www.w3.org/TR/2018/SPSD-html401-20180327/">' +
'<head><!--[if gte mso 9]><xml><x:ExcelWorkbook>' +
'<x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name>' +
'<x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>' +
'</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name) {
var tables = document.getElementById('state');
var ctx = { worksheet: name || 'Worksheet', table: tables.innerHTML }
window.location.href = uri + base64(format(template, ctx));
}
})();
function ExportSupplierMonthlyData() {
try {
tableToExcel();
} catch (err) {
bootbox.alert('没有数据，导出失败');
}
}
</script>
</body> </html>
arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中的更多相关文章
- arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版
我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...
- arcgis api for javascript 学习（六） 地图打印
1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- ArcGis API for JavaScript学习——离线部署API
ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- arcgis api for javascript 学习（四） 地图的基本操作
1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...
- arcgis api for javascript 学习（二） 发布并调用地图切片
文章将从发布切片地图到调用切片地图整个过程都展示出来. (一).切片地图的发布 1.还是前面的arcgis展示的地图 2.与发布动态地图前面的步骤是一样的 打开分享后,如图 3.一切就绪后,到达缓存的 ...
随机推荐
- 消息队列MQ简介
项目中要用到RabbitMQ,领导让我先了解一下.在之前的公司中,用到过消息队列MQ,阿里的那款RocketMQ,当时公司也做了简单的技术分享,自己也看了一些博客.自己在有道云笔记上,做了一些整理,但 ...
- sql手工注入1
手工注入常规思路 1.判断是否存在注入,注入是字符型还是数字型 2.猜解 SQL 查询语句中的字段数 3.确定显示的字段顺序 4.获取当前数据库 5.获取数据库中的表 6.获取表中的字段名 7.查询到 ...
- Unity-使用UnityRemote调试手机Android Studio打印日志
抛出问题: 1.Unity调试Android的时候默认情况是build打包成apk,安装到手机运行,调试起来很不方便,如何快速在手机上运行呢? 2.如何像unity的console一样在andro ...
- 基于H7的中移动物联例子以及简易操作说明，方便电脑端和手机端远程查看数据
说明: 1.操作前,务必优先看此贴里面的基础例子,先将WIFI连接到路由器上,这样才可以访问外网: https://www.cnblogs.com/armfly/p/11307803.html 2.有 ...
- IT兄弟连 HTML5教程 “无意义”的HTML元素div和span
HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际上, ...
- Spring 关于ResponseBody注解的作用
//responseBody一般是作用在方法上的,加上该注解表示该方法的返回结果直接写到Http response Body中,常用在ajax异步请求中, //在RequestMapping中 ret ...
- WPF 3D球及进阶玩法
在WPF中3D球的构建算法请参考: https://www.cnblogs.com/lonelyxmas/p/9844951.html 好玩以及值得借鉴的Demo: (CSDN下载需要积分,避免你 ...
- CODING 2.0 服务升级：一站式服务体系助力企业研发上云
近日,CODING 在 KubeCon 2019 上海站上正式推出了 DevOps 的一站式解决方案: CODING 2.0,除了进行 产品 及 产品理念 的升级,还对用户服务进行了整体升级,主要涵盖 ...
- 不能绑定到端口号：9194原因：Cannot assign requested address: JVM_Bind
晚上将老服务器程序从win2008部署在新的云服务器win2012上,其实就是复制过去改改配置,启动时突然报不能绑定到端口号:9194原因:Cannot assign requested addres ...
- FS-Cache和CacheFS 有什么不同吗？（转载）
FS-Cache and CacheFS. Are there any differences between these two? Initially, I thought both were sa ...