首頁(yè)引入地圖組件 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ù)來(lái)顯示多個(gè)區(qū)域的數(shù)據(jù)做的處理，后端格式根據(jù)具體業(yè)務(wù)來(lái)處理，這里只做參考)

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ù) 拆分出來(lái)

            }

            _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)