openlayers点标记只在视图内展示，视图外不展示，用于大量数据展示

一，逻辑

通过判断坐标是否在当前视图内，若在则显示，反之不显示。然后根据移动，放大或缩小地图，改变视图，展示新的点标记。

如下图所示：

图1，移动前只有视图内标记显示

图2，移动后，新的视图内显示

视频

openlayers点标记只在视图内展示，视图外不展示

二，使用的API

1，获取视图的范围

map.getView().calculateExtent()
1

2，获取坐标的标记的范围

feature.getGeometry().getExtent()
1

3，使用Style控制样式，来显示隐藏，如果在范围内给样式，不在样式为null

style: function(feature) {
	return isTrue ? style : null 
}
1
2
3

三，主要逻辑代码

方式1

const layer = new ol.layer.Vector({
	source: source,
	style: function(feature) {
		const calculateExtent = map.getView().calculateExtent();
		const extent = feature.getGeometry().getExtent()
		const isTrue = isInExtent(calculateExtent, extent)
		return isTrue ? style : null
	}
});
1
2
3
4
5
6
7
8
9

方式2

feature.setStyle(function(feature) {
	const calculateExtent = map.getView().calculateExtent();
	const extent = feature.getGeometry().getExtent()
	const isTrue = isInExtent(calculateExtent, extent)
	return isTrue ? style : null
})
1
2
3
4
5
6

判断点标记是否在范围内

function isInExtent(Extent, Point) {
	return Extent[0] <= Point[0] && Point[0] <= Extent[2] && Extent[1] <= Point[1] && Point[1] <= Extent[3]
}
1
2
3

四，完整代码

js文件和数据，自己造

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./ol/ol.css">
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<style>
			#map {
				width: 100vw;
				height: 100vh;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
	</body>
</html>
<script src="./ol/ol.js"></script>
<script>
	var projection = ol.proj.get("EPSG:4326");
	var projectionExtent = projection.getExtent();
	var size = ol.extent.getWidth(projectionExtent) / 256;
	var resolutions = [];
	for (var z = 2; z < 19; ++z) {
		resolutions[z] = size / Math.pow(2, z);
	}

	const view = new ol.View({
		zoom: 18,
		maxZoom: 20,
		minZoom: 5,
		constrainResolution: true,
		projection: "EPSG:4326",
		center: [121.34906911986785, 28.484043198103166],
	})

	const map = new ol.Map({
		// 绑定 DIV 元素
		target: 'map',
		// 添加图层
		layers: [
			// 设置图层的数据源
			new ol.layer.Tile({
				// 设置图层的数据源
				source: new ol.source.XYZ({
					url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8",
				})
			}),
		],
		// 设置视图窗口
		view,
	});

	// 绘制红色范围
	const sourceExtent = new ol.source.Vector();
	const layerExtent = new ol.layer.Vector({
		source: sourceExtent
	})
	map.addLayer(layerExtent)
	
	// 视图改变时，再次绘制范围
	view.on('change', e => {
		createExtentSource()
	})
	// 范围
	function createExtentSource() {
		const [x1, y1, x2, y2] = map.getView().calculateExtent();
		const feature = new ol.Feature({
			geometry: new ol.geom.Polygon.fromExtent([x1, y1, x2, y2])
		});
		feature.setStyle(
			new ol.style.Style({
				//边线颜色
				stroke: new ol.style.Stroke({
					color: 'red',
					width: 2,
				}),
			})
		)
		sourceExtent.addFeature(feature);
	}

	// 数据
	$.getJSON('./json/node.json', function(response) {
		const nodes = response.data;
		const geojsonObject = createGeoJson(nodes)

		const source = new ol.source.Vector({
			url: './json/GeoJson.json',
			format: new ol.format.GeoJSON(),
		});

		const layer = new ol.layer.Vector({
			source: source,
			style: function(feature) {
				const attributes = feature.getProperties()
				const calculateExtent = map.getView().calculateExtent();
				const extent = feature.getGeometry().getExtent()
				const isTrue = isInExtent(calculateExtent, extent)
				return isTrue ? createSourceStyle(`断面 | ${attributes.proName}`) : null
			}
		});
		map.addLayer(layer)
	})

	// 判断点标记是否在范围内
	function isInExtent(Extent, Point) {
		return Extent[0] <= Point[0] && Point[0] <= Extent[2] && Extent[1] <= Point[1] && Point[1] <= Extent[3]
	}

	// 生产GeoJson数据
	function createGeoJson(nodes) {
		return {
			"type": "FeatureCollection",
			"crs": {
				"type": "name",
				"properties": {
					"name": "EPSG:4326"
				}
			},
			"features": nodes.map(v => {
				const {
					longitude,
					latitude
				} = v;
				return {
					"type": "Feature",
					"geometry": {
						"type": "Point",
						"coordinates": [longitude, latitude]
					},
					"properties": v
				}
			})
		}
	}

	// 样式
	function createSourceStyle(text) {
		return new ol.style.Style({
			text: new ol.style.Text({
				text,
				padding: [3, 10, 3, 10],
				fill: new ol.style.Fill({
					color: '#fff'
				}),
				backgroundFill: new ol.style.Fill({
					color: '#2ea4fe'
				}),
				offsetY: -10
			}),
			image: new ol.style.RegularShape({
				points: 3,
				radius: 10,
				rotation: Math.PI,
				angle: 0,
				fill: new ol.style.Fill({
					color: '#2ea4fe'
				})
			}),
		})
	}
</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

相关阅读:
LINUX 服务器中病毒了，后来追踪到的一个机器运行脚本，研究了一下对于初学者shell的人有很大的帮助
 get与post的区别
 【数据结构与算法】不就是数据结构
 java毕业设计KTV点歌系统mybatis+源码+调试部署+系统+数据库+lw
You Only Learn One Representation: Unified Network for Multiple Tasks
【UNR #6 B】机器人表演（DP）
如何录制微课？简单，手把手教你：教学微课视频如何录制
 Oracle基础知识和常用操作
 android studio 连接mumu模拟器调试
 华为某员工爆料：偷偷跑出去面试，被面试官鄙视了。第一句话就问：华为淘汰的吧，35岁了，这个年龄在华为能混得下去吗？身体没啥毛病吧
原文地址：https://blog.csdn.net/mf_717714/article/details/132710437