# 四.tilegrid
# 1.地理坐标为 WFS
查看代码详情
<template>
<div ref="map" class="map"></div>
</template>
<script>
export default {
mounted() {
let {
format: { GeoJSON },
Map,
View,
layer: { Tile: TileLayer, Vector: VectorLayer },
source: { XYZ, Vector: VectorSource },
style: { Stroke, Style },
tilegrid: { createXYZ },
loadingstrategy: { tile },
proj: { useGeographic },
} = ol
useGeographic()
const vectorSource = new VectorSource({
format: new GeoJSON(),
url: function (extent) {
return (
"https://ahocevar.com/geoserver/wfs?service=WFS&" +
"version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
"outputFormat=application/json&srsname=EPSG:4326&" +
"bbox=" +
extent.join(",") +
",EPSG:4326"
)
},
strategy: tile(createXYZ({ tileSize: 512 })),
})
const vector = new VectorLayer({
source: vectorSource,
style: new Style({
stroke: new Stroke({
color: "rgba(0, 0, 255, 1.0)",
width: 2,
}),
}),
})
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
const raster = new TileLayer({
source: new XYZ({
attributions: attributions,
url:
"https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=" +
mapkeys.maptiler,
maxZoom: 20,
}),
})
const map = new Map({
layers: [
raster,
vector],
target: this.$refs.map,
view: new View({
center: [-80.0298, 43.4578],
maxZoom: 19,
zoom: 12,
}),
})
},
}
</script>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
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
# 2.WMS 512x256 瓦片
查看代码详情
<template>
<div ref="map" class="map"></div>
</template>
<script>
export default {
mounted() {
let {
tilegrid: { TileGrid },
Map,
View,
layer: { Tile: TileLayer },
source: { TileWMS, OSM },
extent: { getWidth },
proj: { get: getProjection },
} = ol
const projExtent = getProjection("EPSG:3857").getExtent()
const startResolution = getWidth(projExtent) / 256
const resolutions = new Array(22)
for (let i = 0, ii = resolutions.length; i < ii; ++i) {
resolutions[i] = startResolution / Math.pow(2, i)
}
const tileGrid = new TileGrid({
extent: [-13884991, 2870341, -7455066, 6338219],
resolutions: resolutions,
tileSize: [512, 256],
})
const layers = [
new TileLayer({
source: new OSM(),
}),
new TileLayer({
source: new TileWMS({
url: "https://ahocevar.com/geoserver/wms",
params: { LAYERS: "topp:states", TILED: true },
serverType: "geoserver",
tileGrid: tileGrid,
}),
}),
]
const map = new Map({
layers: layers,
target: this.$refs.map,
view: new View({
center: [-10997148, 4569099],
zoom: 4,
}),
})
},
}
</script>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
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
# 3.ArcGIS REST 功能服务
| 图层 | layer | source | 备注 |
|---|---|---|---|
| layer1 | Tile | XYZ | "https://server.arcgisonline.com/ArcGIS/rest/services/" +"World_Topo_Map/MapServer/tile/{z}/{y}/{x}" |
| layer2 | Vector | Vector | "https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/" +"Petroleum/KSFields/FeatureServer/" |
查看代码详情
<template>
<div>
<div ref="map" class="map"></div>
<div ref="info"> </div>
</div>
</template>
<script>
export default {
mounted() {
let {
format: { EsriJSON },
Feature,
Map,
Point,
View,
tilegrid: { createXYZ },
proj: { fromLonLat },
loadingstrategy: { tile: tileStrategy },
layer: { Tile: TileLayer, Vector: VectorLayer },
source: { XYZ, Vector: VectorSource },
style: { Fill, Stroke, Style },
} = ol
const serviceUrl =
"https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/" +
"Petroleum/KSFields/FeatureServer/"
const layer = "0"
const esrijsonFormat = new EsriJSON()
const styleCache = {
ABANDONED: new Style({
fill: new Fill({
color: "rgba(225, 225, 225, 255)",
}),
stroke: new Stroke({
color: "rgba(0, 0, 0, 255)",
width: 0.4,
}),
}),
GAS: new Style({
fill: new Fill({
color: "rgba(255, 0, 0, 255)",
}),
stroke: new Stroke({
color: "rgba(110, 110, 110, 255)",
width: 0.4,
}),
}),
OIL: new Style({
fill: new Fill({
color: "rgba(56, 168, 0, 255)",
}),
stroke: new Stroke({
color: "rgba(110, 110, 110, 255)",
width: 0,
}),
}),
OILGAS: new Style({
fill: new Fill({
color: "rgba(168, 112, 0, 255)",
}),
stroke: new Stroke({
color: "rgba(110, 110, 110, 255)",
width: 0.4,
}),
}),
}
const vectorSource = new VectorSource({
loader: function (extent, resolution, projection, success, failure) {
const url =
serviceUrl +
layer +
"/query/?f=json&" +
"returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=" +
encodeURIComponent(
'{"xmin":' +
extent[0] +
',"ymin":' +
extent[1] +
',"xmax":' +
extent[2] +
',"ymax":' +
extent[3] +
',"spatialReference":{"wkid":102100}}'
) +
"&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*" +
"&outSR=102100"
// $.ajax({
// url: url,
// dataType: "jsonp",
// success: function (response) {
// if (response.error) {
// alert(
// response.error.message +
// "\n" +
// response.error.details.join("\n")
// )
// failure()
// } else {
// const features = esrijsonFormat.readFeatures(response, {
// featureProjection: projection,
// })
// if (features.length > 0) {
// vectorSource.addFeatures(features)
// }
// success(features)
// }
// },
// error: failure,
// })
},
strategy: tileStrategy(
createXYZ({
tileSize: 512,
})
),
})
const vector = new VectorLayer({
source: vectorSource,
style: function (feature) {
const classify = feature.get("activeprod")
return styleCache[classify]
},
})
const raster = new TileLayer({
source: new XYZ({
attributions:
'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
url:
"https://server.arcgisonline.com/ArcGIS/rest/services/" +
"World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
}),
})
const map = new Map({
layers: [raster, vector],
target: this.$refs.map,
view: new View({
center: fromLonLat([-97.6114, 38.8403]),
zoom: 7,
}),
})
const displayFeatureInfo = function (pixel) {
const features = []
map.forEachFeatureAtPixel(pixel, function (feature) {
features.push(feature)
})
if (features.length > 0) {
const info = []
let i, ii
for (i = 0, ii = features.length; i < ii; ++i) {
info.push(features[i].get("field_name"))
}
this.$refs.info.innerHTML = info.join(", ") || "(unknown)"
map.getTarget().style.cursor = "pointer"
} else {
this.$refs.info.innerHTML = " "
map.getTarget().style.cursor = ""
}
}.bind(this)
map.on("pointermove", function (evt) {
if (evt.dragging) {
return
}
const pixel = map.getEventPixel(evt.originalEvent)
displayFeatureInfo(pixel)
})
map.on("click", function (evt) {
displayFeatureInfo(evt.pixel)
})
},
}
</script>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
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