(c)にリリースされた地図情報を呼び出し、Excelにマップ属性テーブルを出力する学習javascriptのためのArcGIS API

推奨される血液、長い時間のためのオンライン検索は、関連する情報を見つけることができませんでした神は素晴らしいですが、白い表面の前で、これは山のああであるため、非常に簡単かもしれません!またはオンラインで直接ページにフロントエンド印刷を得意とする方法について、および、半ダイムではないのWebGIS

直接のjavascriptのヘルプドキュメントのArcGIS APIでテーブルの属性情報を、同時表示、出力は表をエクセルことができます表示され、私は、何の道を見つけることはなかったのどちらか。唯一のあなたは両方の機能を同時に実現することができる場所、弾丸をかむと、コードを見て、改善を行うことができる場所を確認することができ、

最後に、額の蘇生は、アウト実現、それらの間のリンクを発見しました!

1、まず第一に、私はマップを掲載してURLを見つけ、あなたはマップが直接テーブルの属性情報を公開したい理解してきました

2、Iはコード機能領域における緯度および経度値を検索し、出力に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>
View Code

 

おすすめ

転載: www.cnblogs.com/yxd000/p/11248247.html