百度地圖繪制3D棱柱

一、引入腳本

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script>

二、編碼

<template>
  <div style="height: 100%;position: relative">
    <div id="allmap"></div>
    <button style="position: absolute;top: 10px;left: 10px;z-index: 9999" @click="getMapCenter">獲取中心點</button>
    <button style="position: absolute;top: 10px;left: 100px;z-index: 9999" @click="getPolygonPath">獲取繪制面路徑</button>
  </div>
</template>

<script>
  export default {
    name: "a4",
    data() {
      return {
        map: null,
        polygon: null
      }
    },
    mounted() {
      this.initmap()
    },
    methods: {
      initmap() {
        // 百度地圖API功能
        var map = new BMapGL.Map("allmap");
        this.map = map

        var centerPoint = new BMapGL.Point(120.212, 31.462)// 點
        map.centerAndZoom(centerPoint, 12);// 初始化地圖（點，級別）
        // map.setTilt(50);// 傾斜角度
        map.enableScrollWheelZoom();// 滾輪縮放
        // map.setDisplayOptions({poiText: false, poiIcon: false})// 隱藏坐標文本和圖標

        var bd = new BMapGL.Boundary();
        bd.get('濱湖區', function (rs) {
          var count = rs.boundaries.length; // 行政區域的點有多少個
          for (var i = 0; i < count; i++) {
            var path = [];
            var str = rs.boundaries[i].replace(' ', '');
            var points = str.split(';');
            for (var j = 0; j < points.length; j++) {
              var lng = points[j].split(',')[0];
              var lat = points[j].split(',')[1];
              path.push(new BMapGL.Point(lng, lat));
            }
            var prism = new BMapGL.Prism(path, 5000, {// 棱柱覆蓋物
              topFillColor: '#5679ea',
              topFillOpacity: 0.5,
              sideFillColor: '#5679ea',
              sideFillOpacity: 0.9
            });
            map.addOverlay(prism);//添加覆蓋物

            var events = ['click', 'mouseover', 'mouseout'];
            for (let i = 0; i < events.length; i++) {
              prism.addEventListener(events[i], e => {// 綁定鼠標事件
                switch (events[i]) {
                  case 'click':
                    alert('濱湖區');
                    break;
                  case 'mouseover':
                    e.target.setTopFillColor('#475fab');
                    e.target.setTopFillOpacity(1);
                    break;
                  case 'mouseout':
                    e.target.setTopFillColor('#5679ea');
                    e.target.setTopFillOpacity(0.5);
                    break;
                }
              });
            }
          }
        });

        var polygon = new BMapGL.Polygon([// 繪制面
          new BMapGL.Point(119.971, 31.647),
          new BMapGL.Point(120.056, 31.646),
          new BMapGL.Point(120.054, 31.593)
        ], {
          strokeColor: 'blue',
          strokeWeight: 2,
          strokeOpacity: 0.5
        });
        this.polygon = polygon
        polygon.enableEditing()// 開啟繪制
        map.addOverlay(polygon);
      },
      getMapCenter() {
        console.log(this.map.getCenter())// 獲取中心點
      },
      getPolygonPath() {
        console.log(this.polygon.getPath())// 獲取繪制面路徑
      }
    }
  }
</script>

<style scoped>
  #allmap {
    height: 100%;
  }
</style>

三、備注

　　* 寧國市具有飛地效果

　　* 宣州區為目前具有的鏤空效果