我们在arcgis api for javascript 学习（三）已经学习到了关于调用地图信息进行属性输出的问题，不过通过代码我们实现后会发现还是有一些小瑕疵的，比如我们只能单个数据属性的输出，如果想输出多个数据的时候就要一次次的运行代码，这样的话每次运行都要导出一个excel文件，不仅占内存还十分的麻烦！本次进阶就是通过对前面代码的改进，可以实现对多个信息进行批量的导出，节省了不少的时间，快来看看吧！

第一步和前面的一样，首先找到我已经发布过地图并找到URL，了解直接要发布地图的属性表信息，如图：

字段的信息如图：

视图下我发布的地图吧！

运行在代码中的情况，看下！！！

点击输出按键看下结果吧！

大功告成，放下代码咯

<!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.29/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.29/"></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/dtmapsever1/MapServer');

                map.addLayer(DyLayer);

                var find = new FindTask("http://localhost:6080/arcgis/rest/services/dtmapsever1/MapServer");

                var params = new FindParameters();

                // layerIds、seachFields、searchText

                params.layerIds = [3];  //对layerid=0和1的图层查询

                params.searchFields = ["FID", "name1","NAME","AREA","DZM","name"];//查该图层的哪些字段

                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:#cc3c46;\">" +

                    "<td>Name1</td> <td>FID</td> <td>NAME</td> <td>area</td> <td>Dzm</td> </tr> " +

                    "</thead> " +

                    "<tbody id=\"state\">"];

                    Array.forEach(results, function (result) {

                        attribs = result.feature.attributes;

                        s.push("<tr>  <td>" + attribs.name1 + "</td>  <td>" + attribs.FID + "</td>  <td>" +attribs.NAME+ "</td>  <td>" + attribs.AREA + "</td>  <td>" + attribs.DZM + "</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>

文章版权由作者鱼吃鱼罐头和博客园共有，若转载请于明显处标明出处：https://www.cnblogs.com/yxd000/　

希望各位大神多交流，提出自己的宝贵意见，共同进步！

arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版的更多相关文章

  1. arcgis api for javascript 学习（三） 调用发布地图信息，并将地图属性信息输出到Excel表中

    吐血推荐:网上搜了很久关于webgis地图属性表输出到Excel表,并没能找到相关有价值的信息,在小白面前,这就是一脸懵x啊!网上要么是关于前端如何在页面上直接导出excel,和webgis半毛钱关系 ...

  2. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  3. arcgis api for javascript 学习（六） 地图打印

    1.本文应用arcgis api for javascript对发布的动态地图进行打印,打印的为PDF格式,打印出来如图: 2.需要特别注意的是:我们在运行代码前,需要打开PrintingTools, ...

  4. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  5. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  6. ArcGis API for JavaScript学习——离线部署API

    ArcGis API for JavaScript开发笔记——离线部署API 以3.18版API为例: 在加载图图前引用GIS服务是必须的.有两种方法,一是在线引用,而是离线部署引用. 在线引用: & ...

  7. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  8. arcgis api for javascript 学习（四） 地图的基本操作

    1.文章讲解的为地图的平移.放大.缩小.前视图.后视图以及全景视图的基本功能操作 2.主要用到的是arcgis api for javascript中Navigation的用法,代码如下: <! ...

  9. arcgis api for javascript 学习（二） 发布并调用地图切片

    文章将从发布切片地图到调用切片地图整个过程都展示出来. (一).切片地图的发布 1.还是前面的arcgis展示的地图 2.与发布动态地图前面的步骤是一样的 打开分享后,如图 3.一切就绪后,到达缓存的 ...

随机推荐

  1. 解密国内BAT等大厂前端技术体系-阿里篇（长文建议收藏）

    进入2019年,大前端技术生态似乎进入到了一个相对稳定的环境,React在2013年发布至今已经6年时间了,Vue 1.0在2015年发布,至今也有4年时间了. 整个业界在前端框架不断迭代中,也寻找到 ...

  2. 记录我的 python 学习历程-Day03 列表/元组/rang

    一.列表初识 列表是 Python 的基础数据类型之一,它是以''[ ]''的形式括起来的,每个元素用","隔开,属于容器型数据类型,他可以存放大量的.各种类型的数据. 基本格式 ...

  3. play-with-docker搭配ffsend完成文件上传及下载(解决从docker hub拉取镜像慢问题)

    由于众所周知的原因,大家有的时候pull docker hub上的镜像是很困难的,下载到99%就这么不动了也是很正常的事情 这个时候以下步骤是100%可以解决问题的: 1.找一台国外的服务器安装doc ...

  4. Prometheus笔记（一）metric type

    欢迎加入go语言学习交流群 636728449 Prometheus笔记(二)监控go项目实时给grafana展示 Prometheus笔记(一)metric type 文章目录 Prometheus ...

  5. CF240E Road Repairs(最小树形图-记录路径)

    A country named Berland has n cities. They are numbered with integers from 1 to n. City with index 1 ...

  6. 纯手工搭建K8s(单节点)

    准备说明: 因为为纯手动搭建,所以针对安装时需要的一些安装包需提前下载好 cfssl_linux-amd64. cfssljson_linux-amd64. cfssl-certinfo_linux- ...

  7. usb fx2 cy68013 Cyapi使用心得

    Cyapi使用心得(1)--USB连接 用Cyapi也有一阵了,这个确实比EZusb的api好用,简单说下Cyapi的使用心得,在编程中应该注意的一些问题,毕竟,说起来,那个CYapi的说明文档讲的实 ...

  8. docker-网络管理-桥接网络

    一.配置桥接网络   需求:为了使本地网络中的机器和Docker容器更方便的通信,我们经常会有将Docker容器配置到和主机同一网段的需求.这个需求其实很容易实现,我们只要将Docker容器和宿主机的 ...

  9. C#通过WMI获取硬件信息

    有时候需要得到硬件信息绑定用户登录 代码如下: private string GetProcessSerialNumber() { try { ManagementObjectCollection P ...

  10. Node6-2单元测试 覆盖率Istanbul

    Step1:安装Istanbul npm install -g istanbul Step2:在package.json里面添加,具体参考Istanbul的API写法 "scripts&qu ...