uniapp map画多边形打点连线

我是参考https://blog.csdn.net/zyj12138/article/details/112463219这个地址完成的

先看结果

代码

<mapstyle="width: 750rpx; height: 100vh;"id="myMap"ref="myMap":latitude="latitude":longitude="longitude":scale="16":show-location="true":enable-satellite="true":polyline="markerPolyline":markers="markerPoints":polygon="markerPolygon"@tap="tapMap"/>data() {return {latitude: 41.67718,longitude: 123.4631,landPoints: []};},onLoad() {uni.getLocation({geocode: true,success: res => {this.latitude = res.latitude;this.longitude = res.longitude;}});},computed: {markerPoints() {if (this.landPoints.length <= 0) {return [];}const len = this.landPoints.length;// 1.多边形区域端点const endPointMarkers = this.landPoints.map(item => {return {id: Math.random().toString().substr(2),width: 16,height: 25,anchorX: 0.5,anchorY: 0.5,...item};});// 2.多边形区域线段中心点let lineCenterMarkers = this.landPoints.map((item, index) => {// 计算线段中心点经纬度let currentPoint = item,nextPoint,lineCenterLongitude,lineCenterLatitude,distance;if (index === len - 1) {nextPoint = this.landPoints[0];} else {nextPoint = this.landPoints[index + 1];}lineCenterLongitude = (currentPoint.longitude + nextPoint.longitude) / 2;lineCenterLatitude = (currentPoint.latitude + nextPoint.latitude) / 2;distance = this.calculateDistance(currentPoint.longitude, currentPoint.latitude, nextPoint.longitude, nextPoint.latitude);//显示线中间部分xxx米距离return {id: Math.random().toString().substr(2),label: {content: `${distance} 米`,color: '#ff1166'},width: 2,height: 2,anchorX: 0.5,anchorY: 0.5,longitude: lineCenterLongitude,latitude: lineCenterLatitude};});// 区域面积const area = this.calculateArea(this.landPoints.map(item => {return {lat: item.latitude,lng: item.longitude};}));return [...endPointMarkers, ...lineCenterMarkers];},markerPolyline() {if (this.landPoints.length >= 2) {return [{points: [...this.landPoints, this.landPoints[0]],color: '#c89d66ff',width: 2}];}return [];},markerPolygon() {if (this.landPoints.length >= 3) {return [{points: [...this.landPoints],fillColor: '#c89d6633', // 填充颜色strokeColor: '#c89d66ff', // 边框颜色strokeWidth: 2}];}return [];}},methods:{tapMap(res) {this.landPoints.push(res.detail);},//计算长度calculateDistance(lng1, lat1, lng2, lat2) {lat1 = lat1 || 0;lng1 = lng1 || 0;lat2 = lat2 || 0;lng2 = lng2 || 0;var rad1 = (lat1 * Math.PI) / 180.0;var rad2 = (lat2 * Math.PI) / 180.0;var a = rad1 - rad2;var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;var r = 6378137;var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));return distance.toFixed(2);},//计算面积calculateArea(path) {let radius = 6371009;let len = path.length;if (len < 3) return 0;let total = 0;let prev = path[len - 1];let prevTanLat = Math.tan((Math.PI / 2 - (prev.lat / 180) * Math.PI) / 2);let prevLng = (prev.lng / 180) * Math.PI;for (let i in path) {let tanLat = Math.tan((Math.PI / 2 - (path[i].lat / 180) * Math.PI) / 2);let lng = (path[i].lng / 180) * Math.PI;total += this.polarTriangleArea(tanLat, lng, prevTanLat, prevLng);prevTanLat = tanLat;prevLng = lng;}return Math.abs(total * (radius * radius));},// 面积辅助polarTriangleArea(tan1, lng1, tan2, lng2) {let deltaLng = lng1 - lng2;let t = tan1 * tan2;return 2 * Math.atan2(t * Math.sin(deltaLng), 1 + t * Math.cos(deltaLng));}
}

这是以上所有代码啦

uniapp map画多边形打点连线相关推荐

uni-app支付宝小程序map地图组件基础操作+画多边形+打点连线
我们可以参考uni-app官网链接地图块显示气泡标注和多边形 <mapv-if="longitude && latitude"style="wi ...
百度地图画圆、画扇形、画多边形、画点
最近接到一个任务,即如可视化空域展示. 即需要在地图上展示出线.多边形.扇形和圆. 效果如下代码如下 <!DOCTYPE html> <html lang="zh&quo ...
Python+OpenCV 图像处理系列（3）—— 画线、矩形、画圆、画椭圆、画多边形
OpenCV 中的绘图函数使用 OpenCV 绘制不同几何图形,其中包括的函数有 cv2.line() cv2.circle() cv2.rectangle() cv2.ellipse() cv2. ...
教您快速学会用制表描点连线法画双曲线
制表.描点.连线法绘制函数是初步认识函数图像的基础,现在教学都是多媒体教学,所以数学老师要掌握几何画板的使用,下面将以绘制[-7,7]闭区间内,y=8/x图像为例介绍制表.描点和连线画双曲线的过程. ...
H5案例课—5点连线画一个爱-岑远科-专题视频课程
H5案例课-5点连线画一个爱-1329人已学习课程介绍主要针对Mugeda有一定基础的同学,购买前请先学习初级课程,初级课程地址: http://edu.csdn.net/cour ...
uniapp map 地图
## 简单实现两点连线文档地址: uni-app官网 ## 代码 <template><view><map style="width: 100%;height ...
百度地图显示多点连线+数字标注
百度地图显示多点连线+数字标注 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
uniapp - Map地图组件属性示例
目录 1.markers :点标记,用于在地图上显示标记的位置. 2.点聚合: 3.polygons : 4.include-points:可以实现自动缩放展示视图内所有的点标记. 5.polylin ...
vue canvas画多边形
第一个版本,只是单纯用来画多边形的,而且只能画一个. <template><div class="main"><div>这纷纷飞花,这纷纷飞花已 ...

uniapp map画多边形打点连线

uniapp map画多边形打点连线相关推荐

最新文章

热门文章

uniapp map画多边形 打点连线

uniapp map画多边形 打点连线相关推荐

最新文章

热门文章

uniapp map画多边形打点连线

uniapp map画多边形打点连线相关推荐