吐血推荐：网上搜了很久关于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表中的更多相关文章

  1. arcgis api for javascript 学习（七） 调用发布地图信息，并将地图属性信息输出到Excel表格---进阶版

    我们在arcgis api for javascript 学习(三)已经学习到了关于调用地图信息进行属性输出的问题,不过通过代码我们实现后会发现还是有一些小瑕疵的,比如我们只能单个数据属性的输出,如果 ...

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

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

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

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

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

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

  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. FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed

    The tweet embed header and footer used the flex-direction property earlier with a row value. Similar ...

  2. LAMP环境搭建与配置（1）

    安装和配置MySQL.Apache.PHP 概念 LAMP是Linux Apache MySQL PHP 的简写,把Apache.MySQL以及PHP安装在Linux系统上,组成一个环境来运行PHP的 ...

  3. .NET机器学习 ML.NET 1.4预览版和模型生成器更新

    ML.NET 是面向.NET开发人员的开源和跨平台机器学习框架. ML.NET  还包括Model Builder  (一个简单的UI工具)和  CLI  ,使用自动机器学习(AutoML)构建自定义 ...

  4. Redis学习二（数据操作）.

    key 操作 删除 key:del key 批量删除key:redis-cli -a(密码)keys "QXJ_*"| xargs redis-cli -a(密码)del 查看所有 ...

  5. Android Studio中的AndroidManifest.xml文件分析

    一.关于AndroidManifest.xml AndroidManifest.xml清单文件是每个Android程序中必须的文件,它是整个Android程序的全局描述文件,除了能声明程序中的Acti ...

  6. jQuery实现回车触发登录按钮的功能

    jQuery实现回车触发登录按钮的功能,代码如下: $('body').keyup(function(e){ if(e.keyCode===13){ $('.login').click() } }) ...

  7. SpringAOP中切入点的高级使用

    上一篇 SpringAOP之使用切入点创建通知 SpringAOP中切点的高级使用 一.使用控制流切入点(ControlFlowPointcut) 什么是控制流切入点呢?看下面的代码(为了方便,就写进 ...

  8. WPF数据可视化-瀑布图

    实现方式一: 将数据(Point[])根据索引沿X轴使用虚拟画布进行绘制,每个数据绘制大小为1px * 1px:最终绘制出的宽度等于数据的总长度.标记并存储当前绘制的图为PreviousBitmap; ...

  9. JavaWeb入门——在Windows环境下安装Tomcat服务器

    JavaWeb入门——在Windows环境下安装Tomcat服务器 摘要:本文主要学习如何在Windows环境中下载并安装Tomcat服务器. 下载 获取安装包 推荐去官网上下载Tomcat: htt ...

  10. springcloud~配置中心~对敏感信息加密

    简介 RSA非对称加密有着非常强大的安全性,HTTPS的SSL加密就是使用这种方法进行HTTPS请求加密传输的.因为RSA算法会涉及Private Key和Public Key分别用来加密和解密,所以 ...