|
| 1 | +<!DOCTYPE html> |
| 2 | +<html xmlns="http://www.w3.org/1999/xhtml"> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> |
| 6 | + <title>Vue-表格</title> |
| 7 | + <script include="vue,antd" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script> |
| 8 | + <style type="text/css"> |
| 9 | + #map { |
| 10 | + height: 100vh; |
| 11 | + width: 100vw; |
| 12 | + } |
| 13 | + .mapgis-baseTable-toolbar{ |
| 14 | + bottom: 443px!important; |
| 15 | + } |
| 16 | + .ant-table-body{ |
| 17 | + height: 464px; |
| 18 | + } |
| 19 | + #app { |
| 20 | + position: absolute; |
| 21 | + bottom: 0; |
| 22 | + height: 100%; |
| 23 | + width: 100%; |
| 24 | + } |
| 25 | + </style> |
| 26 | + </head> |
| 27 | + |
| 28 | + <body> |
| 29 | + <div id="app"> |
| 30 | + <mapgis-web-scene |
| 31 | + lib-path="./static/libs/cdn/cesium/Cesium.js" |
| 32 | + plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js" |
| 33 | + v-bind:animation="false" |
| 34 | + v-bind:timeline="false" |
| 35 | + > |
| 36 | + <mapgis-3d-igs-m3d :url="url"> </mapgis-3d-igs-m3d> |
| 37 | + <mapgis-3d-table |
| 38 | + v-if="show" |
| 39 | + :data-source="dataSource" |
| 40 | + :pagination="pagination" |
| 41 | + @pagechanged="pageChanged" |
| 42 | + @selectall="selectAll" |
| 43 | + @fullscreen="fullScreen" |
| 44 | + @originscreen="originScreen" |
| 45 | + @edited="edited" |
| 46 | + @click="click" |
| 47 | + @deleted="deleted" |
| 48 | + @sorted="sorted" |
| 49 | + @selected="selected" |
| 50 | + ></mapgis-3d-table> |
| 51 | + </mapgis-web-scene> |
| 52 | + </div> |
| 53 | + <script> |
| 54 | + var draw = new Vue({ |
| 55 | + el: '#app', |
| 56 | + data() { |
| 57 | + return { |
| 58 | + url: 'http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', |
| 59 | + dataSource: undefined, |
| 60 | + pagination:{ |
| 61 | + total:0, |
| 62 | + pageSize:10 |
| 63 | + }, |
| 64 | + show: false |
| 65 | + }; |
| 66 | + }, |
| 67 | + mounted() { |
| 68 | + this.getData(); |
| 69 | + }, |
| 70 | + methods: { |
| 71 | + getData(){ |
| 72 | + let vm = this; |
| 73 | + let inter = setInterval(function () { |
| 74 | + if(Zondy.Catalog){ |
| 75 | + clearInterval(inter); |
| 76 | + vm.query("0",10); |
| 77 | + } |
| 78 | + },20); |
| 79 | + }, |
| 80 | + query(page,pageCount,orderField,isAsc){ |
| 81 | + let vm = this; |
| 82 | + //初始化参数对象 |
| 83 | + let queryParam = new Zondy.Catalog.G3DMapDoc(); |
| 84 | + //查询图层的URL路径 |
| 85 | + queryParam.gdbp = "gdbp://MapGISLocalPlus/示例数据/ds/三维示例/sfcls/景观_建筑模型"; |
| 86 | + //设置查询结果结构 |
| 87 | + queryParam.structs = {'IncludeAttribute':true,'IncludeGeometry':false,'IncludeWebGraphic':false}; |
| 88 | + //属性查询 |
| 89 | + queryParam.where = ""; |
| 90 | + //分页信息 |
| 91 | + queryParam.page = page; |
| 92 | + queryParam.pageCount = pageCount; |
| 93 | + //服务器的ip |
| 94 | + queryParam.serverIp = "localhost" |
| 95 | + queryParam.serverPort = "6163"; |
| 96 | + //排序设置 |
| 97 | + queryParam.orderField = orderField ? orderField : ""; |
| 98 | + queryParam.isAsc = isAsc ? isAsc : false; |
| 99 | + //查询服务 |
| 100 | + queryParam.GetFeature(function(result) { |
| 101 | + console.log("result",result) |
| 102 | + vm.dataSource = result; |
| 103 | + vm.pagination.total = result.TotalCount; |
| 104 | + vm.show = true; |
| 105 | + }, function(e) { |
| 106 | + console.log("e",e) |
| 107 | + }); |
| 108 | + }, |
| 109 | + pageChanged(pagination, sorter){ |
| 110 | + //分页事件 |
| 111 | + console.log("pageChanged",pagination) |
| 112 | + this.query(pagination.current - 1,pagination.pageSize,sorter.orderField,sorter.isAsc); |
| 113 | + }, |
| 114 | + selectAll(selectData){ |
| 115 | + //全选事件 |
| 116 | + console.log("selectAll",selectData); |
| 117 | + }, |
| 118 | + selected(selectData,allDate){ |
| 119 | + //选择单个数据事件 |
| 120 | + console.log("selected",selectData); |
| 121 | + console.log("allDate",allDate); |
| 122 | + }, |
| 123 | + fullScreen(pagination, sorter){ |
| 124 | + //全屏事件 |
| 125 | + this.pagination.pageSize = pagination.pageSize; |
| 126 | + this.query(pagination.current - 1,pagination.pageSize,sorter.orderField,sorter.isAsc); |
| 127 | + }, |
| 128 | + originScreen(pagination, sorter){ |
| 129 | + //还原屏幕事件 |
| 130 | + this.pagination.pageSize = pagination.pageSize; |
| 131 | + this.query(pagination.current - 1,pagination.pageSize,sorter.orderField,sorter.isAsc); |
| 132 | + }, |
| 133 | + edited(result){ |
| 134 | + //编辑完成事件 |
| 135 | + console.log("edited",result) |
| 136 | + }, |
| 137 | + click(result, key){ |
| 138 | + //单击事件 |
| 139 | + console.log("click",result, key) |
| 140 | + }, |
| 141 | + deleted(result){ |
| 142 | + //删除事件 |
| 143 | + console.log("deleted",result) |
| 144 | + }, |
| 145 | + sorted(sorter, pagination){ |
| 146 | + //排序事件 |
| 147 | + this.query(pagination.current - 1,pagination.pageSize,sorter.orderField,sorter.isAsc); |
| 148 | + } |
| 149 | + } |
| 150 | + }); |
| 151 | + </script> |
| 152 | + </body> |
| 153 | +</html> |
0 commit comments