1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
| <template>
| <div id="map"></div>
| </template>
|
| <script>
| // 引入组件
| import MConfig from '@/conf/mapbox/MConfig'
| const mapboxgl = require('@cgcs2000/mapbox-gl')
| export default {
| name: 'MapBoxHome',
| data () {
| return {
| IsLoadTDTByToken: MConfig.TokenConfig.IsLoadTDTByToken
| }
| },
| mounted () {
| // if (this.IsLoadTDTByToken) {
| // this.requireToken()
| // return
| // }
| this.initmap()
| },
| methods: {
| async requireToken () {
| // const param = MConfig.TokenConfig.TokenOption
| // let token = await
| },
| initmap () {
| // const layers = MConfig.layers
| // for (const item in layers) {
| // const groupLayer = layers[item]
| // for (const itm in groupLayer) {
| // console.log(groupLayer[itm])
| // }
| // }
| // layers.forEach((item) => {
| // item.forEach((itm) => {
| // console.log(itm)
| // })
| // })
| var vecUrl = 'http://t0.tianditu.com/img_c/wmts?tk=5d76218063082952d18b76da5005f490'
| var cvaUrl = 'http://t0.tianditu.com/cia_c/wmts?tk=5d76218063082952d18b76da5005f490'
| var tdtVec = {
| // 类型为栅格瓦片
| type: 'raster',
| tiles: [
| // 请求地址
| // vecUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
| vecUrl + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
| ],
| // 分辨率
| tileSize: 256
| }
| var tdtCva = {
| type: 'raster',
| tiles: [
| // cvaUrl + "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles"
| cvaUrl + '&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles'
| ],
| tileSize: 256
| }
| // wmts模块
| var wmts = {
| type: 'raster',
| tiles: [
| 'http://xearth.cn:6299/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}'
| ],
| tileSize: 256
| // ,
| // zoomOffset: -1
| }
|
| const buildings = {
| type: 'vector',
| scheme: 'tms',
| zoomOffset: -1, // 必须要 经纬度天地图 其他图层需要zoomOffset -1
| tiles: ['http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Abuildings@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf']
| }
| // var wms ={
| // "type": "raster",
| // 'tiles': [
| // 'http://xearth.cn:6289/server/ogcserver/PipeLine/wms?' +
| // 'version=1.1.1&service=WMS&request=GetMap&layers=all&styles=&format=image%2Fpng&transparent=true&version=1.1.1&' +
| // 'width=256&height=256&srs=EPSG%3A4326&bbox={bbox-epsg-4490}'
| // ],
| // 'tileSize': 256,
| // 'zoomOffset': -1
| //
| // }
| // 矢量瓦片模块
| var test = {
| // 矢量类型
| type: 'vector',
| // 服务类型 tms，要使用wmts服务请换成wmts
| scheme: 'tms',
| zoomOffset: -1, // 必须要 经纬度天地图 其他图层需要zoomOffset -1
| tiles: [
| // 获取GeoServer 矢量切片服务,可以是一下几种方式
| 'http://localhost:8080/vector/tile/{z}/{x}/{y}' // postgis 数据库
| // "http://xearth.cn:6213/geoserver/gwc/service/tms/1.0.0/vectory_tile%3Acontrolpoint@EPSG%3A4326@pbf/{z}/{x}/{y}.pbf" //geoserver
| ]
| }
| var geojson = {
| type: 'FeatureCollection',
| features: [{
| type: 'Feature',
| geometry: {
| type: 'Point',
| coordinates: [118.759, 32.214]
| },
| properties: {
| title: '点1',
| description: '点1测试'
| }
| },
| {
| type: 'Feature',
| geometry: {
| type: 'Point',
| coordinates: [118.775, 32.214]
| },
| properties: {
| title: '点2',
| description: '点2测试'
| }
| }]
| }
| // mapboxgl.accessToken = 'pk.eyJ1IjoiYXR0dWluZyIsImEiOiJjamNham4ycTgwZzVkMndzM2lzYTJtN2VjIn0.kB9yWdGNuo7_oi3brXX4-A';
| // 实例化Map地图对象
| var map = new mapboxgl.Map({
| // 地图容器div的id
| container: 'map',
| style: {
| // 设置版本号，一定要设置
| version: 8,
| // 添加来源
| sources: {
| tdtVec: tdtVec,
| tdtCva: tdtCva,
| wmts: wmts,
| buildings: buildings,
| // "wms":wms,
| test: test
| },
| layers: [
| {
| // 图层id，要保证唯一性
| id: 'tdtVec',
| // 图层类型
| type: 'raster',
| // 数据源
| source: 'tdtVec',
| // 图层最小缩放级数
| minzoom: 0,
| // 图层最大缩放级数
| maxzoom: 17
| },
| {
| id: 'tdtCva',
| type: 'raster',
| source: 'tdtCva',
| minzoom: 0,
| maxzoom: 17
| },
| {
| id: 'wmts',
| type: 'raster',
| source: 'wmts',
| minzoom: 0,
| maxzoom: 17
| },
| {
| id: 'builds',
| source: 'buildings',
| 'source-layer': 'buildings',
| type: 'fill-extrusion',
| minzoom: 15,
| paint: {
| 'fill-extrusion-color':
| [
| 'interpolate',
| ['linear'],
| ['get', 'height'], // 属性字段
| 0, 'rgb(255, 255, 191)',
| 75, 'rgb(253, 174, 97)',
| 150, 'rgb(215,25,28)'
| ],
| 'fill-extrusion-height': [
| 'interpolate', ['linear'], ['zoom'],
| 15, 0,
| 15.05, ['get', 'height']
| ], // 属性字段
| 'fill-extrusion-opacity':
| 0.7
| }
| },
| // {
| // "id": "wms",
| // "type": "raster",
| // "source": "wms",
| // "minzoom": 0,
| // "maxzoom": 17
| // },
| {
| id: 'test',
| type: 'circle',
| source: 'test',
| 'source-layer': 'points',
| // "source-layer": "controlpoint",
| minzoom: 0,
| maxzoom: 18,
| // "paint": {
| // "circle-radius": 10,
| // "circle-color": "#3887be"
| //
| // }
| paint: {
| 'circle-radius': {
| stops: [
| [8, 0.1],
| [11, 0.5],
| [15, 3],
| [20, 30]
| ]
| },
| 'circle-color': {
| // property: 'v',
| stops: [
| [1, '#990055'],
| [2, '#cdb640']
| ]
|
| },
| 'circle-opacity': 1
| }
| }
| ]
| },
| // 地图中心点
| center: [118.7843, 32.2221],
| // 地图当前缩放级数
| zoom: 13,
| maxZoom: 16
| })
| // 实例化导航控件
| var nav = new mapboxgl.NavigationControl(
| {
| // 是否显示指南针，默认为true
| showCompass: true,
| // 是否显示缩放按钮，默认为true
| showZoom: true
| }
| )
| // 添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，默认为'top-right'
| map.addControl(nav, 'top-left')
| map.on('click', function (e) {
| console.log(e)
| })
| console.log(geojson)
| }
| }
| }
| </script>
|
| <style scoped>
| #map{
| position: absolute;
| top: 0;
| bottom: 0;
| width: 100%;
| }
| </style>
|
|
