首頁引入地圖組件 BmPolygon
<!--（stroke-color="#057af3"赂苗，線條顏色 ）院水，（:stroke-weight="2" 可缚，線條寬度） （:fill-color，區(qū)域內(nèi)的填充顏色），（:stroke-opacity="1"，填充的透明度） -->
<bm-polygon v-for="(p,index) in PolygonPath" @mousedown="mousedownPoly(p,index,p[index])"
@mouseover="PolyHover(p,index,p[index])" @mouseout="mouseoutPoly(p,index,p[index])"
:fill-opacity="p.fillOpacity" :key="'p'+index" :path='p' stroke-color="#057af3" :stroke-opacity="1"
:stroke-weight="2" :fill-color="PolygonParam.fillColor"></bm-polygon>
<script>
import BmPolygon from 'vue-baidu-map/components/overlays/Polygon'
export default {
name: '',
components: {
BmPolygon,
},methods:{
mousedownPoly (data, index, key) { // 鼠標(biāo)點(diǎn)擊區(qū)域時(shí)觸發(fā)
this.plyData = data;
this.plyIndex = index;
this.$set(this.PolygonPath[index], `fillOpacity`, 0.7)
this.$message(this.allNameData[index].name)
this.$forceUpdate()
},
mouseoutPoly (data, index, key) { // 鼠標(biāo)離開區(qū)域操作
this.$set(this.PolygonPath[index], `fillOpacity`, 0.1)
this.$forceUpdate()
},
}
</script>
（注意事項(xiàng)） PolygonPath 數(shù)組 單個(gè)區(qū)域數(shù)據(jù)格式一維數(shù)組，多個(gè)區(qū)域的話需要二維數(shù)組才行 不然不識(shí)別(下面方法是獲取后端數(shù)據(jù)來顯示多個(gè)區(qū)域的數(shù)據(jù)做的處理歪泳，后端格式根據(jù)具體業(yè)務(wù)來處理，這里只做參考)
getMarkerScope () { // 獲取坐標(biāo)范圍
let _this = this
this.$http.get('./static/json/area.json',
{
headers: this.COMMON.headerJson
}).then(function (response) {
let res = response.data.result
if (response.data.status == 1) {
_this.areaIndex(res);
let pointArray = [],splitArr = [],allAreaData = [];
for (let p = 0; p < res.length; p++) {
if(p==0){
allAreaData.push(res[0].shapePgis.split('@')) // 默認(rèn)第一條數(shù)據(jù)是顯示 所有范圍
}
splitArr.push(res[p].shapePgis.split('@')) // 把有@符號(hào)的數(shù)據(jù) 拆分出來
}
_this.allArea(allAreaData);
let newarr = [],newArr2=[],newArr3 =[],newArr4 =[],newArr5 = [];
for (let i = 0; i < splitArr.length; i++) {
for (let j = 0, l = splitArr[i].length; j < l; j++) {
if(splitArr[i].length>1){
newarr.push(splitArr[i][j])
}else{
newarr.push(splitArr[i][j])
}
}
}
for (let i = 0; i < newarr.length; i++) {
newArr2.push(newarr[i].split(','))
}
for (let i = 0; i < newArr2.length; i++) { // 去除最左邊的空格
newArr3[i] = new Array();
for (let j = 0, l = newArr2[i].length; j < l; j++) {
newArr3[i].push(newArr2[i][j].replace(/(^\s*)/g, ''))
}
}
for (let i = 0; i < newArr3.length; i++) { // 匹配到空格 替換成逗號(hào)
newArr4[i] = new Array();
for (let j = 0, l = newArr3[i].length; j < l; j++) {
newArr4[i].push(newArr3[i][j].replace(/\s/, ','))
}
}
// 組裝數(shù)據(jù)
for (let i = 0; i < newArr4.length; i++) {
newArr5[i] = new Array();
for (let j = 0, l = newArr4[i].length; j < l; j++) {
if (newArr4[i][j].length > 0) {
newArr5[i].push({lng: newArr4[i][j].split(',')[0], lat:newArr4[i][j].split(',')[1]})
}
}
}
for (let i = 0; i < newArr5.length; i++) {
newArr5[i]['fillOpacity'] = 0.1 // 默認(rèn)區(qū)域背景透明度
}
_this.PolygonPath = newArr5
var point = new BMap.Point(_this.PolygonPath[0][1].lng, _this.PolygonPath[0][2].lat)
_this.map.centerAndZoom(point, 14)
_this.map.enableAutoResize()
} else {
_this.$message({
type: 'error',
message: response.data.msg
})
}
}).catch(function (error) {
console.log(error)
})
},
最終的效果圖
QQ截圖20210119111335.png
點(diǎn)擊某個(gè)區(qū)域顯示深色
1611026156(1).jpg
具體不懂的 可以聯(lián)系我 565598946@qq.com
有什么不對(duì)的地方 還請(qǐng)大家指點(diǎn)指點(diǎn)
