vue调用高德地图,vue使用高德地图插件
本文主要介绍vue访问高德地图绘制扇区，要求是要有一个列表，列表中的数据是一个基站的信息，包括经纬度信息和基站的名称，以及基站下面划分的扇区。本文通过示例代码非常详细的介绍给大家，有需要的朋友可以参考一下。
目录
vue访问高德地图绘制扇形需求预期效果代码实现第一步绘制基站和第二步绘制基站——计算扇形形状，计算扇形坐标，扇形点击事件，原点点击事件。
vue接入高德地图绘制扇形
为什么又写这篇文章？主要是这个功能Golder不支持，只能自己实现。不过，我估计很多人会用这个东西。所以，还是简单实现一下吧。如果有必要，我们可以直接超越它。对于之前写过天空图画扇形区域的人，如果用的是天空图，可以翻翻我之前的博客。百度地图和这个方法差不多，可能是用的类不一样。在这种情况下，只要原理和过程相似，只需替换每个映射的类名即可。
需求
简单来说就是有单子。列表中的数据是基站信息，包括经纬度信息和基站名称。基站分为扇区，例如有两个扇区或一个扇区。扇区的覆盖范围是什么，即基站周围的半径长度和扇区的角度？这种情况下，我的角度写死了，默认是30度。如果需要动态设置，可以根据自己的需要稍加修改。
以下是基站列表的数据格式：
let sectorList=[{
名称：第一个基站，//基站名称
X: 116.3470390，//基站经度
Y: 40.481888，//基站纬度
数据：[{ //基站包含扇区列表
Msg:第一个基站的第一个扇区，//扇区名称
R: 0 //基站初始角度
}]
}, {
名称：“第二基站”，
x: 117.3470，
y: 39.48188，
数据：[{
Msg:“第二基站的第一扇区”，
r: 0
}, {
Msg:“第二基站的第二扇区”，
120卢比
}]
}]
预想效果
那才是你最终想要达到的！
即在地图上直接覆盖扇区，与标记点不同。这个绘制的扇区会根据地图的比例按比例缩放，我不想保持和标记点一样的大小。但是我还是在基站的顶点用一个圆形的标记点，主要是怕地图缩小到全国，那些地方没有扇区显示。因此，此代码用于显示覆盖点和标记点。然后，这段代码没有优化，只是用来实现的。是根据我自己的项目需求优化的。
代码实现
绘制基站第一步
绘图站点(映射点){
让点=新地图。LngLat(mapPoint.x，mappoint . y)；
for(var I=0；I mappoint . data . length；i ) {
设radian1=90 - mapPoint.data[i]。r - 30
设radian2=90 - mapPoint.data[i]。r
让oval=新地图。多边形({
路径：this.sector(点，500，半径1，半径2)，
stroke color:“# ff 8400”，
stroke opacity:“1”，
strokeWeight: 1，
fill color:“# ff 8400”，
填充不透明度：“0.3”，
})
let info=[]；
Info.push(b基站名称：/b mappoint . name)；
Info.push(b扇区名称：/b mapPoint.data[i])。味精)；
let content=info . join( br/)；
oval.content=内容
oval.on(click ，this . polygonclick)；
map.add(椭圆形)；
}
让marker=新地图。圆形标记({
中心：点，
半径：7，
冲程重量：0，
fill color:“# ff 8400”，
fillOpacity: 1
});
marker.on(click ，this . marker click)；
map . add(marker)；
},
绘制基站第二步 - 计算扇形形状
扇形（中心、透镜、径向1、径向2) {
让点数=[];
设步长=((弧度2-弧度1)/10) 10；//根据扇形的总夹角确定每步夹角度数，最大为10
点.推(中心);
对于(设i=radian1I半径2 0.001;i=step) { //循环获取每步的圆弧上点的坐标，存入点数组
分。推(这个。eoffsetbearing(center，len，I))；
}
点.推(中心);
返点；
},
计算扇形坐标
偏心轴承（中心、透镜、轴承){
设lngConv=center.distance(新地图.LngLat(center.getLng() 0.1，center。getlat())* 10
设latConv=center.distance(新地图.LngLat(center.getLng()，center.getLat() 0.1)) * 10 //计算一纬度与原点的距离
设lat=len * Math.sin(bearing * Math .PI/180)/latConv；//正弦计算待获取的点的纬度与原点纬度差
设lng=len * Math.cos(bearing * Math .PI/180)/液化天然气conv；//余弦计算待获取的点的经度与原点经度差
返回新地图LngLat(center.getLng() lng，中心。get lat()lat)；
},
扇区点击事件
聚精会神
信息窗口。设置内容(例如，目标。内容)；
infoWindow.open(map，[e.lnglat.getLng()，e.lnglat。get lat()])；
},
原点点击事件
markerClick(e) {
信息窗口。设置内容(例如，目标。内容)；
map.setZoomAndCenter(17，e . target。get center())；
infoWindow.open(map，e . target。get center())；
},
然后就可以了。
补充： //信息弹窗
信息窗口=新地图.InfoWindow({ offset: new AMap .Pixel(0，-20)})；
对象要循环，代码是关键代码，没有循环
到此这篇关于某视频剪辑软件接入高德地图绘制扇形的文章就介绍到这了，更多相关某视频剪辑软件高德地图扇形内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。