vue3.x 中使用 ol (openlayer)地图
# 安装依赖
npm install ol --save
1
# 简单引用
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 示例代码
<template>
<div id="map"></div>
</template>
<script setup>
import {
defineExpose,
ref,
getCurrentInstance,
nextTick,
onMounted,
reactive,
} from "vue";
import "ol/ol.css";
import { Feature, View, Map } from "ol";
import Circle from "ol/geom/Circle";
import Polygon from "ol/geom/Polygon";
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from "ol/style";
import { Cluster, OSM, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { boundingExtent } from "ol/extent";
import { fromLonLat } from "ol/proj";
// console.log(geom);
const circleFeature = new Feature({
geometry: new Circle([12127398.797692968, 4063894.123105166], 50),
});
circleFeature.setStyle(
new Style({
fill: new Fill({
color: "#000",
}),
// renderer(coordinates, state) {
// console.log(coordinates, state);
// const [[x, y], [x1, y1]] = coordinates;
// const ctx = state.context;
// const dx = x1 - x;
// const dy = y1 - y;
// const radius = Math.sqrt(dx * dx + dy * dy);
// const innerRadius = 0;
// const outerRadius = radius * 1.4;
// const gradient = ctx.createRadialGradient(
// x,
// y,
// innerRadius,
// x,
// y,
// outerRadius
// );
// gradient.addColorStop(0, "rgba(255,0,0,0)");
// gradient.addColorStop(0.6, "rgba(255,0,0,0.2)");
// gradient.addColorStop(1, "rgba(255,0,0,0.8)");
// ctx.beginPath();
// ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
// ctx.fillStyle = gradient;
// ctx.fill();
// ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
// ctx.strokeStyle = "rgba(255,0,0,1)";
// ctx.stroke();
// },
})
);
circleFeature.on("click", (e) => {
console.log(e);
});
// 交互层
const clusters = new VectorLayer({
source: new VectorSource({
features: [circleFeature],
}),
});
// 地图层
const raster = new TileLayer({
background: "#fff",
source: new OSM(),
});
const initMap = () => {
const map = new Map({
target: "map",
layers: [raster, clusters],
view: new View({
center: [12127398.797692968, 4063894.123105166],
zoom: 16,
}),
});
map.on("click", (evt) => {
clusters.getFeatures(evt.pixel).then(function (features) {
const feature = features.length ? features[0] : undefined;
console.log(feature);
});
});
map.on("pointermove", function (evt) {
if (evt.dragging) {
return;
}
// const pixel = clusters.getEventPixel(evt.originalEvent);
});
};
onMounted(() => {
initMap();
});
</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
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
# 参考地址
- GitHub:https://github.com/openlayers/openlayers
- 官网:https://openlayers.org
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13