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