高德地图meshLine使用两个点画3D曲线

高德地图meshLine使用两个点画3D曲线

效果图:

在这里插入图片描述
高德官方示例的meshLine用了4个点画线,贝塞尔曲线2个点就能画,另外2个点应该是用来确定曲线垂直方向的弯曲,实现图上的需求只需要2个点,当然还需要一个弯曲度的参数,也就是曲线顶点到两点直线之间的距离。本人数学不好,只能拿官方的例子来改,源码见:MeshLine-线 Line-示例中心-地图 JS API | 高德地图API

var map = new AMap.Map("container", {
	mapStyle: 'amap://styles/darkblue', //设置地图的显示样式
	resizeEnable: true,
	center: [114, 30],
	zoom: 5.5,
	viewMode: '3D',
	pitch: 40  //3D地图倾斜度
});
const object3Dlayer = new AMap.Object3DLayer();
const center = {lng:114.301803,lat:30.599835};	//起点
const points = [								//终点集合,这些点最终和起点连线
	{lng:104.075809, lat:30.651239},
	{lng:113.543028, lat:22.186835},
	{lng:106.551643, lat:29.562849},
	{lng:102.710002, lat:25.045806},
	{lng:116.407394, lat:39.904211},
	{lng:112.562678, lat:37.873499},
	{lng:112.983602, lat:28.112743},
	{lng:108.954347, lat:34.265502},
	{lng:121.473662, lat:31.230372},
	{lng:120.152585, lat:30.266597},
	{lng:119.295143, lat:26.100779},
	{lng:106.705463, lat:26.600055},
	{lng:109.194828, lat:27.755017},
	{lng:116.369774, lat:28.000249},
	{lng:106.766385, lat:31.892508}
];
for (let i = 0; i < points.length; i++) {
	const point = points[i];
	const meshLine = new AMap.Object3D.MeshLine({
		path: computeBezier(center,point, 180),			//计算曲线
		height: getEllipseHeight(180, 4500000, 20),		//计算高度 maxHeight可自定义
		color: 'rgba(55,129,240, 1)',					//线条颜色
		width: 1										//线条宽度
	});
	meshLine.transparent = true;
	object3Dlayer.add(meshLine);
	meshLine['backOrFront'] = 'both';
}
map.add(object3Dlayer);

function computeBezier(center,point, numberOfPoints) {
	let dt;
	let i;
	const curve = [];
	dt = 1.0 / (numberOfPoints - 1);
	for (i = 0; i < numberOfPoints; i++) {
		curve[i] = pointOnCubicBezier(center,point, i * dt);//计算曲线
	}
	return curve;
}
function getEllipseHeight(count, maxHeight, minHeight) {
	const height = [];
	const radionUnit = Math.PI / count;
	
	for (let i = 0; i < count; i++) {
		const radion = i * radionUnit;
		height.push(minHeight + Math.sin(radion) * maxHeight);
	}
  return height;
}
function pointOnCubicBezier(center,point, t) {
	let cx;
	let cy;
	cx = (point.lng - center.lng);
	cy = (point.lat - center.lat);
	const lng =  (cx * t) + center.lng;
	const lat =  (cy * t) + center.lat;
	return new AMap.LngLat(lng, lat);
}
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值