ol-ext文字随线的走向_ol-ext 文字沿线-优快云博客

核心代码：

		// ol-ext 文字随线方向
		function setTextPathStyle() {
			vectorLayer.setTextPathStyle((f) => {
				var style = new ol.style.Style({
					text: new ol.style.TextPath({
						text: f.get("name"),
						font: "15px Arial",
						fill: new ol.style.Fill({
							color: "#369"
						}),
						stroke: new ol.style.Stroke({
							color: "#fff",
							width: 3
						}),
						textBaseline: 'bottom',
						textAlign: 'center',
						rotateWithView: true,
						textOverflow: 'hidden',
					}),
					geometry: f.getGeometry().cspline()
				})
				return [style]
			})
		}
		setTextPathStyle();

我的demo完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>文字随线</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
		<!-- Openlayers -->
		<link rel="stylesheet" href="./dist/ol.css" />
		<script type="text/javascript" src="./dist/ol.js"></script>
		<!-- ol-ext -->
		<link rel="stylesheet" href="./dist/ol-ext.css" />
		<script type="text/javascript" src="./dist/ol-ext.js"></script>
		<style type="text/css">
			html,
			body,
			#map {
				border: 0px;
				margin: 0px;
				padding: 0px;
				width: 100%;
				height: 100%;
				font-size: 13px;
			}
		</style>

	</head>
	<body>
		<div id="map"></div>
	</body>
	<script type="text/javascript">
		var wktformat = new ol.format.WKT();
		var tileLayer = new ol.layer.Tile({
			source: new ol.source.XYZ({
				url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
			})
		});
		var vectorSource = new ol.source.Vector({
			features: []
		})

		function vectorStyle(feature) {
			var styles = [
				new ol.style.Style({
					fill: new ol.style.Fill({
						color: 'rgba(255, 0, 0, 0.2)'
					}),
					stroke: new ol.style.Stroke({
						color: '#ffcc33',
						width: 1
					}),
					image: new ol.style.Circle({
						radius: 7,
						fill: new ol.style.Fill({
							color: '#ffcc33'
						})
					}),
					// ol样式，默认横排
					/**
					text: new ol.style.Text({
						font: '13px Microsoft YaHei',
						text: feature.get('name'),
						fill: new ol.style.Fill({
							color: '#666'
						})
					})
					**/
				})
			]
			
			// 添加箭头样式
			var geometry = feature.getGeometry();
			if (geometry.getType() == "MultiLineString") {
				geometry.getLineString().forEachSegment((start, end) => {
					// arrows
					styles.push(styleArrow(start, end, feature.get('name')))
				});
			} else if (geometry.getType() == "LineString") {
				var start = geometry.getCoordinates()[0]
				var end = geometry.getCoordinates()[1]
				// arrows
				styles.push(styleArrow(start, end, feature.get('name')))
			}
			return styles
		}

		function styleArrow(start, end, title) {
			var arrowLonLat = [(end[0] + start[0]) / 2, (end[1] + start[1]) / 2];
			var dx = end[0] - start[0];
			var dy = end[1] - start[1];
			var rotation = Math.atan2(dy, dx);
			return new ol.style.Style({
				geometry: new ol.geom.Point(arrowLonLat),
				image: new ol.style.Icon({
					src: '../openlayer/arrow.gif',
					anchor: [0.75, 0.5],
					rotateWithView: true,
					rotation: -rotation,
				})
			})
		}

		var vectorLayer = new ol.layer.Vector({
			source: vectorSource,
			style: vectorStyle
		});
		var map = new ol.Map({
			controls: [],
			target: 'map',
			layers: [tileLayer, vectorLayer],
			view: new ol.View({
				center: transform([103.584297498027, 36.119086450265]),
				zoom: 4,
			})
		});
		// map.getView().fit(features[2].getGeometry());

		function transform(pois) {
			return ol.proj.transform(pois, 'EPSG:4326', 'EPSG:3857')
		}


		// 线
		var lineCoord = [
			[109.6399637062942, 36.10488480328604],
			[119.4837137062942, 42.51651033049882]
		];
		var line = new ol.geom.LineString(lineCoord);
		line.transform('EPSG:4326', 'EPSG:3857');
		// var f2 = new ol.Feature(line);
		var f2 = new ol.Feature({
			geometry: line,
			id: 2,
			name: '线1-右上'
		});
		vectorSource.addFeature(f2);
		console.log(wktformat.writeGeometry(line))
		console.log(wktformat.writeFeature(f2))
		console.log(line.getLength())

		var lineCoord2 = [
			[107.5305887062942, 34.55617638204109],
			[120.25715013341059, 27.888441634487776]
		];
		var line2 = new ol.geom.LineString(lineCoord2);
		line2.transform('EPSG:4326', 'EPSG:3857');
		// var f2 = new ol.Feature(line);
		var f22 = new ol.Feature({
			geometry: line2,
			id: 2,
			name: '线2-右下'
		});
		vectorSource.addFeature(f22);

		// 多线
		var multilineCoord = [
			[
				[103.45246156052698, 34.960539700465915],
				[98.81183763341058, 27.826278348695965]
			]
		];
		var multiline = new ol.geom.MultiLineString(multilineCoord);
		multiline.transform('EPSG:4326', 'EPSG:3857');
		// var f2 = new ol.Feature(line);
		var f23 = new ol.Feature({
			geometry: multiline,
			id: 2,
			name: '多线1-左下'
		});
		vectorSource.addFeature(f23);

		var multilineCoord2 = [
			[
				[97.75715013341059, 37.79053483981271],
				[88.1243397791778, 43.59537248307916]
			]
		];
		var multiline2 = new ol.geom.MultiLineString(multilineCoord2);
		multiline2.transform('EPSG:4326', 'EPSG:3857');
		// var f2 = new ol.Feature(line);
		var f24 = new ol.Feature({
			geometry: multiline2,
			id: 2,
			name: '多线2-左上'
		});
		vectorSource.addFeature(f24);

		// ol-ext 文字随线方向
		function setTextPathStyle() {
			vectorLayer.setTextPathStyle((f) => {
				var style = new ol.style.Style({
					text: new ol.style.TextPath({
						text: f.get("name"),
						font: "15px Arial",
						fill: new ol.style.Fill({
							color: "#369"
						}),
						stroke: new ol.style.Stroke({
							color: "#fff",
							width: 3
						}),
						textBaseline: 'bottom',
						textAlign: 'center',
						rotateWithView: true,
						textOverflow: 'hidden',
					}),
					geometry: f.getGeometry().cspline()
				})
				return [style]
			})
		}
		setTextPathStyle();


		map.on('click', (evt) => {
			console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
			vectorLayer.getFeatures(evt.pixel).then((features) => {
				var feature = features.length ? features[0] : undefined;
				if (feature) {
					console.log(feature.getProperties())
				}
			});
		});
	</script>
</html>