百度地图绘制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>

三、备注

　　* 宁国市具有飞地效果

　　* 宣州区为目前具有的镂空效果