|
| 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" src="./static/libs/include-mapboxgl-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 | + </style> |
| 20 | + </head> |
| 21 | + |
| 22 | + <body> |
| 23 | + <div id="app"> |
| 24 | + <mapgis-web-map |
| 25 | + id="map" |
| 26 | + v-bind:map-style="mapStyle" |
| 27 | + v-bind:zoom="mapZoom" |
| 28 | + v-bind:center="outerCenter" |
| 29 | + v-bind:crs="mapCrs" |
| 30 | + > |
| 31 | + <mapgis-igs-tdt-layer |
| 32 | + v-bind:layer="layer" |
| 33 | + v-bind:layer-id="layerId" |
| 34 | + v-bind:source-id="sourceId" |
| 35 | + v-bind:base-url="baseURL" |
| 36 | + v-bind:token="token" |
| 37 | + :crs="mapCrs" |
| 38 | + > |
| 39 | + </mapgis-igs-tdt-layer> |
| 40 | + <mapgis-igs-doc-layer |
| 41 | + v-bind:layer-id="docLayerId" |
| 42 | + v-bind:source-id="docSourceId" |
| 43 | + v-bind:base-url="docLayerUrl" |
| 44 | + ></mapgis-igs-doc-layer> |
| 45 | + <mapgis-base-table |
| 46 | + v-bind:data-source="dataSource" |
| 47 | + v-bind:pagination="pagination" |
| 48 | + v-bind:columns="columns" |
| 49 | + v-show="show" |
| 50 | + > |
| 51 | + </mapgis-base-table> |
| 52 | + <mapgis-feature-service |
| 53 | + v-on:loaded="serviceLoaded" |
| 54 | + v-bind:url="serviceUrl"></mapgis-feature-service> |
| 55 | + </mapgis-web-map> |
| 56 | + </div> |
| 57 | + <script> |
| 58 | + var draw = new Vue({ |
| 59 | + el: '#app', |
| 60 | + data() { |
| 61 | + return { |
| 62 | + mapStyle: { |
| 63 | + //设置版本号，一定要设置 |
| 64 | + version: 8, |
| 65 | + //添加来源 |
| 66 | + sources: {}, |
| 67 | + //设置加载并显示来源的图层信息 |
| 68 | + layers: [] |
| 69 | + }, // 地图样式 |
| 70 | + mapZoom: 3, // 地图初始化级数 |
| 71 | + outerCenter: [114, 31], // 地图显示中心 |
| 72 | + mapCrs: 'EPSG:3857', |
| 73 | + |
| 74 | + layerId: 'igsLayer_layerId', |
| 75 | + sourceId: 'igsLayer_sourceId', |
| 76 | + layer: {}, // 图层配置信息 |
| 77 | + baseURL: 'http://t2.tianditu.gov.cn/vec_c/wmts', // 请求基地址 |
| 78 | + token: '2ddaabf906d4b5418aed0078e1657029', // 请求天地图的key值 |
| 79 | + docLayerUrl: "http://develop.smaryun.com:6163/igs/rest/mrms/docs/Hubei3857", |
| 80 | + docLayerId: "igs_layer_layerid", |
| 81 | + docSourceId: "igs_layer_sourceid", |
| 82 | + serviceUrl: "http://develop.smaryun.com:6163/igs/rest/mrfs/docs/Hubei3857", |
| 83 | + columns: [], |
| 84 | + dataSource: [], |
| 85 | + pagination:{ |
| 86 | + total:0, |
| 87 | + pageSize:10 |
| 88 | + }, |
| 89 | + show:false |
| 90 | + }; |
| 91 | + }, |
| 92 | + methods: { |
| 93 | + serviceLoaded(service){ |
| 94 | + this.service = service; |
| 95 | + this.getData(); |
| 96 | + }, |
| 97 | + getData(){ |
| 98 | + this.query(0,10,undefined,undefined,true); |
| 99 | + }, |
| 100 | + query(pageIndex,pagination,orderBy,isAsc,initial){ |
| 101 | + var vm = this; |
| 102 | + var sql = this.service.$_getSQLParameter({ |
| 103 | + layers: "1", |
| 104 | + where: '', |
| 105 | + pageIndex: pageIndex, |
| 106 | + pagination: pagination, |
| 107 | + orderBy: orderBy, |
| 108 | + isAsc: isAsc |
| 109 | + }) |
| 110 | + //zondy格式 |
| 111 | + vm.service.$_queryBySQL(sql,function (result) { |
| 112 | + vm.dataSource = result; |
| 113 | + vm.pagination.total = result.TotalCount; |
| 114 | + vm.show = true; |
| 115 | + },function () {}) |
| 116 | + } |
| 117 | + } |
| 118 | + }); |
| 119 | + </script> |
| 120 | + </body> |
| 121 | +</html> |
0 commit comments