高德地图计算多边形中心点

在高德地图中
使用mousetool绘制的多边形 计算其中心点

getCenter(PolygonArr) {

		// console.log('PolygonArr', PolygonArr)数据格式:[[lng,lat],[lng,lat]......]
		let total = PolygonArr.length;
		let X = 0;
		let Y = 0;
		let Z = 0;
		PolygonArr.forEach((lnglat) => {
			let lng = lnglat[0] * Math.PI / 180;
			let lat = lnglat[1] * Math.PI / 180;
			let x, y, z;
			x = Math.cos(lat) * Math.cos(lng);
			y = Math.cos(lat) * Math.sin(lng);
			z = Math.sin(lat);
			X += x;
			Y += y;
			Z += z;
		});
		X = X / total;
		Y = Y / total;
		Z = Z / total;

		let Lng = Math.atan2(Y, X);
		let Hyp = Math.sqrt(X * X + Y * Y);
		let Lat = Math.atan2(Z, Hyp);
		return [Lng * 180 / Math.PI, Lat * 180 / Math.PI];
	},
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用高德地图API画多边形需要进行以下步骤: 1. 在index.html中引入高德地图API的js文件: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的key值"></script> ``` 2. 在Vue组件中使用高德地图API的AMap对象创建地图实例: ```javascript mounted() { // 创建地图实例 this.map = new AMap.Map('mapContainer', { zoom: 13, // 地图缩放级别 center: [116.397428, 39.90923], // 地图中心点坐标 }); } ``` 3. 在地图上绘制多边形: ```javascript drawPolygon() { // 创建多边形路径 const path = [ [116.403322, 39.920255], [116.410703, 39.897555], [116.402292, 39.892353], [116.389846, 39.891365], [116.393699, 39.90684], ]; // 创建多边形实例 const polygon = new AMap.Polygon({ path: path, strokeColor: '#FF33FF', strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, }); // 添加多边形地图 this.map.add(polygon); } ``` 4. 在Vue组件中调用drawPolygon方法,即可在地图上绘制多边形。 完整代码示例: ```html <template> <div id="mapContainer" style="height: 500px;"></div> <button @click="drawPolygon">绘制多边形</button> </template> <script> export default { mounted() { // 创建地图实例 this.map = new AMap.Map('mapContainer', { zoom: 13, // 地图缩放级别 center: [116.397428, 39.90923], // 地图中心点坐标 }); }, methods: { drawPolygon() { // 创建多边形路径 const path = [ [116.403322, 39.920255], [116.410703, 39.897555], [116.402292, 39.892353], [116.389846, 39.891365], [116.393699, 39.90684], ]; // 创建多边形实例 const polygon = new AMap.Polygon({ path: path, strokeColor: '#FF33FF', strokeWeight: 6, strokeOpacity: 0.2, fillColor: '#1791fc', fillOpacity: 0.4, }); // 添加多边形地图 this.map.add(polygon); }, }, }; </script> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值