吐血推荐：网上搜了很久关于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. Ligg.EasyWinApp-000: 一款Windows应用编程框架介绍

        本框架(解决方案)是一个Windows应用编程框架和UI库,通过该框架,不需任何代码,通过XML配置文件,搭建任意复杂的Windows应用界面,以类似Execel公式的方式实现基本的过程控制( ...

  2. Java 密码加盐

    只对密码进行md5加密很容易反推出来,另外两个用户的密码相同时,数据库保存相同的密码,知道一个用户的密码就知道另一个.解决方法是在用户的短密码后面加上一段长字符,再计算 md5,这样反推出原始密码就变 ...

  3. day03运算符、表达式、自增自减、三目运算符、程序结构、用户输入

    复习 1.java的输出语句 1)System.out.println(); 2)System.out.print(); 2.注释 1)单行注释 // 2)多行注释 /* .... */ 3.变量 1 ...

  4. 【Linux 命令】cp 命令详解

    Linux 命令之 cp 命令详解 一.cp 命令简介 cp 命令主要用于复制文件或目录.即用来将一个或多个源文件或者目录复制到指定的目的文件或目录. cp 命令可以将单个源文件复制成一个指定文件名的 ...

  5. Password Management:Password in Configuration File 密码管理：配置文件中的密码

  6. 使用 ASP.NET Core MVC 创建 Web API——响应数据的内容协商（七）

    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二) 使 ...

  7. C# transfer local file to remote server based on File.Copy

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...

  8. ES6-Proxy，代理

    proxy 代理 Es6 增强 对象和函数(方法)   Proxy用于修改某些操作的默认行为,即对编程语言层面进行修改,属于“元编程”, Proxy意思为“代理”,即在访问对象之前建立一道“拦截”,任 ...

  9. C语言编程的一些小总结

    1. static:可用于定义静态局部变量 在局部变量前,加上关键字static,该变量就被定义成为一个静态局部变量. 举一个静态局部变量的例子: void fn() { static int n=1 ...

  10. 数据治理的王者——Apache Atlas

    一.Atlas是什么? 在当今大数据的应用越来越广泛的情况下,数据治理一直是企业面临的巨大问题. 大部分公司只是单纯的对数据进行了处理,而数据的血缘,分类等等却很难实现,市场上也急需要一个专注于数据治 ...