openlayers+turf.js实现缓冲区的绘制

最新推荐文章于 2024-05-28 09:50:58 发布

qq_41537416

最新推荐文章于 2024-05-28 09:50:58 发布

阅读量1k

点赞数 1

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_41537416/article/details/124401818

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

openlayers+turf.js实现缓冲区的绘制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/turf.min.js"></script>
		<link rel="stylesheet" href="js/map/map.css">
		<script src="js/map/map.js"></script>
		<style>
			#MapINfo {
				width: 1000px;
				height: 800px;
			}
		</style>
	</head>
	<body>
		<div id="MapINfo">

		</div>
		<script>
			var map;
			laodMap();

			function laodMap() {
				// 本地地图;
				map = new ol.Map({
					layers: [
						new ol.layer.Tile({
							title: "标注图层",
							source: new ol.source.XYZ({
								url: "http://192.168.1.200/map/tianditu/luwang/{z}/{x}/{y}.png"
							})
						}),

						// 10.253.2.150:8003/map/luwang
						new ol.layer.Tile({
							title: "路网图层",
							source: new ol.source.XYZ({
								url: "http://192.168.1.200/map/tianditu/biaozhu/{z}/{x}/{y}.png"
							})
						})
					],
					target: 'MapINfo',
					logo: false,
					controls: ol.control.defaults({
						attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
							collapsible: false
						})
					}),
					view: new ol.View({
						center: new ol.proj.fromLonLat([116.335351, 39.913385]),
						zoom: 18,
						minZoom: 1,
						maxZoom: 18
					})
				});
				map.on('singleclick', function(e) {
					// 通过getEventCoordinate方法获取地理位置，再转换为wgs84坐标，并弹出对话框显示
					alert(ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
				})
				acc()
			}

			function acc() {
				//创建缓冲数据
				var points1 = [
					[116.13359972278997, 39.89752453995499],
					[116.13363972393584, 39.89751454330168],
					[116.13503969556173, 39.89761446121351],
					[116.13591968272674, 39.89764442416162],
					[116.1381596449371, 39.897754314956366]
				]
				var points = points1;
				for (var i = points1.length - 1; i >= 0; i--) {
					points.push(points1[i])
				}
				// 创建并获取缓冲区
				var py = turf.polygon([
					points
				]);
				var buffered = turf.buffer(py, 0.0025, {
					units: 'kilometers'
				});
				console.log(buffered)
				var trajectory_arr = [];
				var trajectory_arr1 = [];
				for (var i = 0; i < buffered.geometry.coordinates[0].length; i++) {
					trajectory_arr.push(new ol.proj.fromLonLat([parseFloat(buffered.geometry.coordinates[0][i][0]), parseFloat(
						buffered.geometry.coordinates[0][i][1])], 'EPSG:3857'))
				}
				var saoguan_line = new ol.Feature({
					geometry: new ol.geom.LineString(trajectory_arr)
				});
				// 划线样式
				saoguan_line.setStyle(new ol.style.Style({
					stroke: new ol.style.Stroke({
						width: 1,
						color: '#ff0000',
					})
				}));
				var source = new ol.source.Vector({
					features: [saoguan_line]
				});
				var layer = new ol.layer.Vector({
					source: source
				});

				map.addLayer(layer); //添加轨迹线

				for (var i = 0; i < points.length - 1; i++) {
					trajectory_arr1.push(new ol.proj.fromLonLat([parseFloat(points[i][0]), parseFloat(
						points[i][1])], 'EPSG:3857'))
				}
				var saoguan_line1 = new ol.Feature({
					geometry: new ol.geom.LineString(trajectory_arr1)
				});
				console.log(trajectory_arr1)
				// 划线样式
				saoguan_line1.setStyle(new ol.style.Style({
					stroke: new ol.style.Stroke({
						width: 3,
						color: '#005500',
					})
				}));
				var source = new ol.source.Vector({
					features: [saoguan_line1]
				});
				var layer2 = new ol.layer.Vector({
					source: source
				});

				map.addLayer(layer2); //添加轨迹线
				// 判断用户给的点是不是在缓冲区内
				var pt1 = turf.point([116.18643450735361, 39.90614144239751]);
				var poly1 = turf.polygon([buffered.geometry.coordinates[0]]);
				console.log(turf.booleanPointInPolygon(pt1, poly1))
			}
		</script>
	</body>
</html>

在这里插入图片描述

qq_41537416

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
openlayers+turf.js实现缓冲区的绘制

openlayers+turf.js实现缓冲区的绘制<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/turf.min.js"></script> <link rel="stylesheet" href="js/map/map.css"> <script
复制链接

扫一扫