【js】中map类型的数据用表格的形式展示

一、后端返回的数据:

Map mapInfo = new HashMap();
mapInfo.put("result",strings);
mapInfo.put("data",map);
mapInfo.put("code",0);
return getMapInfo(mapInfo, 0, "", "");

//出参:
strings:[202206]
map: {202206=[{"bzhm":"110102198202081938","dwdm":"11111111","id":"1","name":"杨超"},{"bzhm":"110102198202081938","dwdm":"11111111","id":"1","name":"杨超"}]}

二、前端js代码:

success: function (data) {
    if (data.code == 0 || data.code == "0") {
        var result = data.result;//map中的key数组
        var json = data.data;//map数据

    for (var k = 0; k < result.length; k++) {
        var key = result[k];
        var jsonElement = json[key];
        tr += " <tr><td>" + key + "月</td><td>" + jsonElement[k].dwdm + "</td><td>" + jsonElement[k].name + "</td><td>" + jsonElement[k].bzhm + "</td> <tr>";
    }
}  
好的,下面是一个简单的示例: 1. 在 Vue 项目安装 arcgis for js 和 axios: ``` npm install --save @arcgis/core axios ``` 2. 在需要使用查询功能的组件引入模块: ```javascript import * as esriLoader from "@arcgis/core"; // 引入 arcgis for js import axios from "axios"; // 引入 axios ``` 3. 在组件的 `mounted()` 生命周期初始化地图和查询任务: ```javascript mounted() { // 初始化地图 esriLoader.loadModules(["esri/Map", "esri/views/MapView"]).then(([Map, MapView]) => { const map = new Map({ basemap: "streets-navigation-vector", }); const view = new MapView({ container: "map-container", map: map, center: [-118.80500, 34.02700], zoom: 13, }); }); // 初始化查询任务 esriLoader.loadModules(["esri/tasks/QueryTask", "esri/tasks/support/Query"]).then(([QueryTask, Query]) => { this.queryTask = new QueryTask({ url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", // 查询图层的 URL }); this.query = new Query(); this.query.returnGeometry = false; // 不返回几何对象 this.query.outFields = ["*"]; // 返回所有字段 }); }, ``` 4. 在查询按钮的点击事件执行查询: ```javascript methods: { onQuery() { const whereClause = "STATE_NAME = 'California'"; // 查询条件 this.query.where = whereClause; this.queryTask.execute(this.query).then((result) => { const features = result.features; const data = features.map((feature) => { return feature.attributes; }); this.tableData = data; // 将查询结果赋值给表格数据 }); }, }, ``` 5. 在模板添加查询按钮和表格: ```html <div id="map-container"></div> <button @click="onQuery">查询</button> <table> <thead> <tr> <th v-for="field in fields">{{ field }}</th> </tr> </thead> <tbody> <tr v-for="row in tableData"> <td v-for="field in fields">{{ row[field] }}</td> </tr> </tbody> </table> ``` 6. 在 `data` 定义表格数据和字段列表: ```javascript data() { return { queryTask: null, query: null, tableData: [], fields: ["STATE_NAME", "POP2000", "POP2007"], }; }, ``` 这样就可以在 Vue 使用 arcgis for js 的查询功能,并将查询结果以表格形式返回。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值