vue接入高德地圖繪制扇形效果的案例詳解
vue接入高德地圖繪制扇形
為什么又寫(xiě)這一篇呢，主要是因?yàn)檫@個(gè)功能高德不支持，只能自己實(shí)現(xiàn)，但是呢，我估計(jì)很多人會(huì)用到這玩意兒。所以說(shuō)呢，就簡(jiǎn)單的實(shí)現(xiàn)一下，如果有需要的話直接超過(guò)去就行，之前寫(xiě)過(guò)天地圖繪制扇形區(qū)域的，如果使用天地圖的話可以翻一下我之前的博客，百度地圖和這個(gè)方法類(lèi)似，可能就是使用的類(lèi)不同，這樣的話只要原理流程理解的差不多，直接把各個(gè)地圖的類(lèi)名替換一下就可以了。
需求
需求簡(jiǎn)單說(shuō)一下，就是有一個(gè)列表，列表的數(shù)據(jù)就是一個(gè)基站信息，包含基站的經(jīng)緯度信息和名字，基站下面又分扇區(qū)，比如有兩個(gè)扇區(qū)或者一個(gè)扇區(qū)，扇區(qū)的覆蓋范圍是多少，也就是圍繞基站的半徑長(zhǎng)度，以及扇形的角度，這個(gè)案例我角度是寫(xiě)死的哈，默認(rèn)30度做的，如果需要?jiǎng)討B(tài)設(shè)置的話，可以根據(jù)自己的需求稍作修改。
下面是基站列表的數(shù)據(jù)格式：
let sectorList = [{
name: '第一個(gè)基站', // 基站名稱
x: 116.3470390, // 基站經(jīng)度
y: 40.481888, // 基站緯度
data: [{ // 基站包含扇區(qū)列表
msg: '第一個(gè)基站的第一個(gè)扇區(qū)', // 扇區(qū)名稱
r: 0 // 基站初始角度
}]
}, {
name: '第二個(gè)基站',
x: 117.3470,
y: 39.48188,
data: [{
msg: '第二個(gè)基站的第一個(gè)扇區(qū)',
r: 0
}, {
msg: '第二個(gè)基站的第二個(gè)扇區(qū)',
r: 120
}]
}]預(yù)想效果
最后想要實(shí)現(xiàn)的效果就是這個(gè)樣子的哈！
就是扇區(qū)直接覆蓋在地圖上，和標(biāo)注點(diǎn)不一樣，這個(gè)繪制的扇區(qū)會(huì)根據(jù)地圖的縮放進(jìn)行等比例縮放，不想標(biāo)注點(diǎn)一樣大小不變，但是呢，我在基站的頂點(diǎn)還是是用了一個(gè)圓形標(biāo)注點(diǎn)，主要是怕地圖縮小到全國(guó)找不到那些地方有扇區(qū)展示，所以說(shuō)用來(lái)覆蓋物和標(biāo)注點(diǎn)配合展示，然后呢，這個(gè)代碼沒(méi)有優(yōu)化，僅僅作為實(shí)現(xiàn)用，具體根據(jù)自己項(xiàng)目需求進(jìn)行優(yōu)化處理。
代碼實(shí)現(xiàn)
繪制基站第一步
drawSite(mapPoint) {
let point = new AMap.LngLat(mapPoint.x, mapPoint.y);
for (var i = 0; i < mapPoint.data.length; i++) {
let radian1 = 90 - mapPoint.data[i].r - 30
let radian2 = 90 - mapPoint.data[i].r
let oval = new AMap.Polygon({
path: this.sector(point, 500, radian1, radian2),
strokeColor: '#ff8400',
strokeOpacity: '1',
strokeWeight: 1,
fillColor: '#ff8400',
fillOpacity: '0.3',
})
let info = [];
info.push("<b>基站名稱：</b>" + mapPoint.name);
info.push("<b>扇區(qū)名稱：</b>" + mapPoint.data[i].msg);
let content = info.join("<br/>");
oval.content = content
oval.on('click', this.polygonClick);
map.add(oval);
}
let marker = new AMap.CircleMarker({
center: point,
radius: 7,
strokeWeight: 0,
fillColor: "#ff8400",
fillOpacity: 1,
});
marker.on('click', this.markerClick);
map.add(marker);
},繪制基站第二步 - 計(jì)算扇形形狀
sector(center, len, radian1, radian2) {
let points = [];
let step = ((radian2 - radian1) / 10) || 10; //根據(jù)扇形的總夾角確定每步夾角度數(shù)，最大為10
points.push(center);
for (let i = radian1; i < radian2 + 0.001; i += step) { //循環(huán)獲取每步的圓弧上點(diǎn)的坐標(biāo)，存入點(diǎn)數(shù)組
points.push(this.eOffsetBearing(center, len, i));
}
points.push(center);
return points;
},計(jì)算扇形坐標(biāo)
eOffsetBearing(center, len, bearing) {
let lngConv = center.distance(new AMap.LngLat(center.getLng() + 0.1, center.getLat())) * 10
let latConv = center.distance(new AMap.LngLat(center.getLng(), center.getLat() + 0.1)) * 10 //計(jì)算1緯度與原點(diǎn)的距離
let lat = len * Math.sin(bearing * Math.PI / 180) / latConv; //正弦計(jì)算待獲取的點(diǎn)的緯度與原點(diǎn)緯度差
let lng = len * Math.cos(bearing * Math.PI / 180) / lngConv; //余弦計(jì)算待獲取的點(diǎn)的經(jīng)度與原點(diǎn)經(jīng)度差
return new AMap.LngLat(center.getLng() + lng, center.getLat() + lat);
},扇區(qū)點(diǎn)擊事件
polygonClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, [e.lnglat.getLng(), e.lnglat.getLat()]);
},原點(diǎn)點(diǎn)擊事件
markerClick(e) {
infoWindow.setContent(e.target.content);
map.setZoomAndCenter(17, e.target.getCenter());
infoWindow.open(map, e.target.getCenter());
},然后就可以了。
補(bǔ)充： // 信息彈窗
infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -20) });對(duì)象要循環(huán)，代碼是關(guān)鍵代碼，沒(méi)有循環(huán)
到此這篇關(guān)于vue接入高德地圖繪制扇形的文章就介紹到這了,更多相關(guān)vue高德地圖扇形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼
本文主要介紹了FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
在Vue中，數(shù)據(jù)流是指數(shù)據(jù)的傳遞和管理方式，而Vue采用的是單向數(shù)據(jù)流，所以這篇文章就來(lái)就來(lái)和大家講講什么是Vue的數(shù)據(jù)流以及如何進(jìn)行數(shù)據(jù)流管理，感興趣的可以了解一下2023-06-06
Vue實(shí)現(xiàn)動(dòng)態(tài)查詢規(guī)則生成組件
今天我們來(lái)給大家介紹下在Vue開(kāi)發(fā)中我們經(jīng)常會(huì)碰到的一種需求場(chǎng)景，本文主要介紹了Vue動(dòng)態(tài)查詢規(guī)則生成組件，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vue內(nèi)聯(lián)處理器中訪問(wèn)方法和訪問(wèn)事件參數(shù)詳解
在 Vue 3 中,使用組合式 API 時(shí),可以通過(guò)內(nèi)聯(lián)事件處理器來(lái)直接在模板中編寫(xiě)事件處理邏輯,內(nèi)聯(lián)事件處理器不僅可以直接執(zhí)行簡(jiǎn)單的操作,還可以調(diào)用組件中的方法,并訪問(wèn)事件參數(shù),下面將詳細(xì)講解如何在內(nèi)聯(lián)事件處理器中調(diào)用方法以及訪問(wèn)事件參數(shù),需要的朋友可以參考下2024-12-12
vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)動(dòng)態(tài)列表點(diǎn)擊各行換色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue3.2+ts實(shí)現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗(類(lèi)el-MessageBox)
這篇文章主要介紹了vue3.2+ts實(shí)現(xiàn)在方法中可調(diào)用的擬態(tài)框彈窗（類(lèi)el-MessageBox）,這個(gè)需求最主要的是要通過(guò)方法去調(diào)用，為了像el-messagebox使用那樣方便，需要的朋友可以參考下2022-12-12
可控制緩存銷(xiāo)毀的?keepAlive?組件實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了可控制緩存銷(xiāo)毀的?keepAlive?組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在vue中使用Echarts利用watch做動(dòng)態(tài)數(shù)據(jù)渲染操作
這篇文章主要介紹了在vue中使用Echarts利用watch做動(dòng)態(tài)數(shù)據(jù)渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue SSR 即時(shí)編譯技術(shù)的實(shí)現(xiàn)
這篇文章主要介紹了Vue SSR 即時(shí)編譯技術(shù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05