vue接入高德地圖繪制扇形效果的案例詳解
vue接入高德地圖繪制扇形
為什么又寫這一篇呢，主要是因?yàn)檫@個(gè)功能高德不支持，只能自己實(shí)現(xiàn)，但是呢，我估計(jì)很多人會(huì)用到這玩意兒。所以說呢，就簡(jiǎn)單的實(shí)現(xiàn)一下，如果有需要的話直接超過去就行，之前寫過天地圖繪制扇形區(qū)域的，如果使用天地圖的話可以翻一下我之前的博客，百度地圖和這個(gè)方法類似，可能就是使用的類不同，這樣的話只要原理流程理解的差不多，直接把各個(gè)地圖的類名替換一下就可以了。
需求
需求簡(jiǎn)單說一下，就是有一個(gè)列表，列表的數(shù)據(jù)就是一個(gè)基站信息，包含基站的經(jīng)緯度信息和名字，基站下面又分扇區(qū)，比如有兩個(gè)扇區(qū)或者一個(gè)扇區(qū)，扇區(qū)的覆蓋范圍是多少，也就是圍繞基站的半徑長(zhǎng)度，以及扇形的角度，這個(gè)案例我角度是寫死的哈，默認(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ū)展示，所以說用來覆蓋物和標(biāo)注點(diǎn)配合展示，然后呢，這個(gè)代碼沒有優(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)鍵代碼，沒有循環(huán)
到此這篇關(guān)于vue接入高德地圖繪制扇形的文章就介紹到這了,更多相關(guān)vue高德地圖扇形內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了vue 項(xiàng)目如何引入微信sdk接口的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
這篇文章介紹了VUE中template的三種寫法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
這篇文章主要介紹了基于vue實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過程中，盡可能多的提取關(guān)鍵信息，并以此指導(dǎo)生成最優(yōu)代碼的過程，優(yōu)化的方向主要是區(qū)分動(dòng)態(tài)內(nèi)容和靜態(tài)內(nèi)容，并針對(duì)不同的內(nèi)容采用不同的優(yōu)化策略2023-01-01
跨域指瀏覽器不允許當(dāng)前頁(yè)面的所在的源去請(qǐng)求另一個(gè)源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue中選中多個(gè)選項(xiàng)并且改變選中的樣式的實(shí)例代碼
這篇文章主要介紹了vue中選中多個(gè)選項(xiàng)并且改變選中的樣式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要給大家介紹了關(guān)于Swiper在Vue2中的簡(jiǎn)單使用方法,swiper是一款現(xiàn)代化的移動(dòng)端輪播組件,可以在Vue中輕松使用,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了使用vant的地域控件追加全部選項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue3的介紹和兩種創(chuàng)建方式詳解(cli和vite)
這篇文章主要介紹了vue3的介紹和兩種創(chuàng)建方式(cli和vite),vue3對(duì)比vue2帶來的性能提升有很多優(yōu)勢(shì)，總體來說Vue 3在性能、開發(fā)體驗(yàn)和代碼組織方面都有所改進(jìn)，使得它更加適合于大型、復(fù)雜的應(yīng)用程序開發(fā)，需要的朋友可以參考下2023-04-04
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12