mapbox 地图 生成矢量数据圆

需求：在地图上绘制区域圆

方法一：使用 turf

取一个点并计算给定的以度、弧度、英里或公里为半径的圆多边形
官方文档：

调试：http://jsrun.net/BuLKp/edit

方法二 使用 js 计算

<template>
	<div id="map">div>
template>

<script>
	// 根据一个点绘制圆
	import mapboxgl from 'mapbox-gl'
	import 'mapbox-gl/dist/mapbox-gl.css'

	export default {
		name: 'app',
		data() {
			return {			
				map: '',
			}
		},
		computed: {

		},
		components: {},
		methods: {
			initMap() {
				mapboxgl.accessToken = 'pk.eyJ1IjoibWVpa...............58EkNW6Ta_AQ';

				this.map = new mapboxgl.Map({
					container: 'map',
					style: 'mapbox://styles/mapbox/streets-v11',
					center: [113.209711, 23.137937],
					zoom: 6,
					pitch: 40,
					bearing: 0,
					pitch: 60,
					antialias: true
				})

				this.map.on('load', () => {
					//createGeoJSONCircle参数（[经度，纬度]，圆的半径单位km）
					this.map.addSource("polygon", this.createGeoJSONCircle([113.209711, 23.137937], 0.5));

					this.map.addLayer({
						"id": "polygon",
						"type": "fill",
						"source": "polygon",
						"layout": {},
						"paint": {
							"fill-color": "blue",
							"fill-opacity": 0.6
						}
					});
				});
			},
		
			//绘制圆形区域的函数
			createGeoJSONCircle: function(center, radiusInKm, points) {
				if (!points) points = 64;

				var coords = {
					latitude: center[1],
					longitude: center[0]
				};

				var km = radiusInKm;

				var ret = [];
				var distanceX = km / (111.320 * Math.cos(coords.latitude * Math.PI / 180));
				var distanceY = km / 110.574;

				var theta, x, y;
				for (var i = 0; i < points; i++) {
					theta = (i / points) * (2 * Math.PI);
					x = distanceX * Math.cos(theta);
					y = distanceY * Math.sin(theta);

					ret.push([coords.longitude + x, coords.latitude + y]);
				}
				ret.push(ret[0]);

				return {
					"type": "geojson",
					"data": {
						"type": "FeatureCollection",
						"features": [{
							"type": "Feature",
							"geometry": {
								"type": "Polygon",
								"coordinates": [ret]
							}
						}]
					}
				};
			},
		},
		mounted() {
			this.initMap()
		},
		beforeDestroy() {}
	}
script>

<style>
	#map {
		margin: 0;
		width: calc(100vw - 200px);
		height: 100vh;
	}

	.mapboxgl-ctrl-bottom-right {
		display: none;
	}
style>

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