Map_spatial_buffer.vue
4.75 KB
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
<!--
* 缓冲区分析
* @Author: jiangbotao
* @Date: 2019-12-10 14:16:04
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-10 19:58:51
* @FilePath: \mymapbox\src\components\Map_filter_sql.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl';
import { Logo, FeatureService, QueryService, SpatialAnalystService } from '@supermap/iclient-mapboxgl';
export default {
name: 'HelloWorld',
data () {
return {
}
},
mounted(){
var map, host = "http://support.supermap.com.cn:8090";
var baseUrl = host + "/iserver/services/map-jingjin/rest/maps/京津地区地图/zxyTileImage.png?z={z}&x={x}&y={y}";
var serviceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst";
var serviceUrl2 = 'http://support.supermap.com.cn:8090/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst/datasets/Road_L@Jingjin/buffer.json?returnContent=true';
var map = new mapboxgl.Map({
container: 'map',
style: {
"version": 8,
"sources": {
"raster-tiles": {
"attribution": 'attribution',
"type": "raster",
"tiles": [baseUrl],
"tileSize": 256,
},
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}],
},
center: [116.28094998209556, 39.897168019388474],
maxZoom: 18,
zoom: 12
});
map.addControl(new Logo(), 'bottom-right');
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
map.on('load', function () {
bufferAnalystProcess();
});
function bufferAnalystProcess() {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[116.2143386597, 39.8959419733],
[116.2156351162, 39.8963250173],
[116.2182280292, 39.8968111885],
[116.2740019864, 39.8970124079],
[116.3103285499, 39.8970574832],
[116.3321510064, 39.8970392162],
[116.3377051439, 39.8973437531],
[116.3463089006, 39.8978391816],
]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#888",
"line-width": 8
}
});
//缓冲区分析参数
var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
dataset: "Road_L@Jingjin",
filterQueryParameter: new SuperMap.FilterParameter({
attributeFilter: "NAME='莲花池东路'"
}),
bufferSetting: new SuperMap.BufferSetting({
endType: SuperMap.BufferEndType.ROUND,
leftDistance: {value: 300},
rightDistance: {value: 300},
semicircleLineSegment: 10,
radiusUnit: 'METER'
})
});
//缓冲区分析服务
new SpatialAnalystService(serviceUrl).bufferAnalysis(dsBufferAnalystParameters, function (serviceResult) {
console.log(serviceResult.result);
map.addLayer({
"id": "queryDatas",
"type": "fill", /* fill类型一般用来表示一个面，一般较大 */
"source": {
"type": "geojson",
"data": serviceResult.result.recordset.features
},
"paint": {
"fill-color": "red", /* 填充的颜色 */
"fill-opacity": 0.4 /* 透明度 */
},
});
})
}
}
}
</script>
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>