1.需求效果如下

画一个扇形或多个扇形组成圆,跟随地图移动、缩放、旋转等

2.代码实现

HTML部分:

<map ref="map" style="width: 100%; height: 100%" :scale="12" :min-scale="5" :max-scale="15"  :latitude="latitude" :longitude="longitude" :markers="covers" :polygons="polygons"></map>

JS部分:

定义数据:

data() {
			return {
				latitude: 28.2283, // 地图中心纬度
				longitude: 112.9389, // 地图中心经度
				covers: [{
					id: 10000,
					latitude: 28.2283, // 标记点纬度
					longitude: 112.9389, // 标记点经度
					width: 27,
					height: 31,
					iconPath: '../../static/report/mackerIcons.png'
				}],
				polygons: [],//自定义覆盖物
			}
		},

 画图形方法,根据自己需要设置扇形角度,下面代码设置为30°

//angle初始角度,shifting旋转角度,ll中心经纬度
logPoint(angle, shifting, ll) {
				var lls = [];
				lls.push({
					longitude: ll.JD,
					latitude: ll.WD
				})
				var a = 4000000; //半径
				angle = angle - shifting > 0 ? angle - shifting : angle + (360 - shifting); //更具方位角算出,扇形弧边的初始位置。

				var b, c; // 边长,a是圆半径,b是高(Y轴),C是长(X轴)
				var B; // 角度,设定B是向量-变化
				for (var i = 0; i < 11; i++) {
					var g = angle + i * 3;
					g = g > 360 ? g - 360 : g;
					var B = g / (180 / Math.PI); //Math中使用的是弧度并不是角度,所以将角度转换成弧度(180/π)°角度
					b = a * Math.sin(B);
					c = a * Math.cos(B);
					// 1.同一纬线上经度差一度,实际距离差多少
					// 111km*cosφ (φ为当地纬度)
					// 2.同一经线上纬度差一度,实际距离差多少
					// 111km
					b = b / 111000 + ll.JD;
					c = c / 111000 + ll.WD;
					lls.push({
						angle: B,
						longitude: b,
						latitude: c,
					});
				}
				return lls;
			},

 使用方法:

//colorValue动态设置颜色值,latitude中心经度, longitude中心纬度
countBear(colorValue, latitude, longitude) {
				let that = this
				var N = {
					points: that.logPoint(30, 45, {
						JD: longitude,
						WD: latitude,
					}),
					fillColor: that.changeColor(colorValue.N),
					strokeColor: "transparent",
					strokeWidth: 1,
					zIndex: 1
				};
				var ENN = {
					points: that.logPoint(30, 15, {
						JD: longitude,
						WD: latitude,
					}),
					fillColor: that.changeColor(colorValue.ENN),
					strokeColor: "transparent",
					strokeWidth: 1,
					zIndex: 1
				}
				//以此类推... 要几个扇形定义几个
				let pl = []
				pl.push(N, ENN, ...)
				that.polygons = pl //与map组件中的参数对应
			}

//动态设置颜色值方法 这里要注意只能用HEX不能用RGBA
changeColor(e) {
				return e == 2 ? '#24B65A3D' : (e == 1 ? '#0047FF40' : (e == 0 ? '#FFDF3640' : (e == -1 ? '#FF884540' : '#FF00003D')))
			},

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐