|
我們在arcgis api for javascript 學習（三）已經(jīng)學習到了關于調用地圖信息進行屬性輸出的問題，不過通過代碼我們實現(xiàn)后會發(fā)現(xiàn)還是有一些小瑕疵的，比如我們只能單個數(shù)據(jù)屬性的輸出，如果想輸出多個數(shù)據(jù)的時候就要一次次的運行代碼，這樣的話每次運行都要導出一個excel文件，不僅占內存還十分的麻煩！本次進階就是通過對前面代碼的改進，可以實現(xiàn)對多個信息進行批量的導出，節(jié)省了不少的時間，快來看看吧！ 第一步和前面的一樣，首先找到我已經(jīng)發(fā)布過地圖并找到URL，了解直接要發(fā)布地圖的屬性表信息，如圖：
字段的信息如圖：
視圖下我發(fā)布的地圖吧！
運行在代碼中的情況，看下?。?！
點擊輸出按鍵看下結果吧！
大功告成，放下代碼咯 <!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./3.29/esri/css/esri.css">
<script src="https://js./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()">導出查詢地區(qū)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); //執(zhí)行查詢
}
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./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('沒有數(shù)據(jù)，導出失敗');
}
}
</script>
</body>
</html>文章版權由作者魚吃魚罐頭和博客園共有，若轉載請于明顯處標明出處：https://www.cnblogs.com/yxd000/ 希望各位大神多交流，提出自己的寶貴意見，共同進步！ |
|
|
