1 引入mapbox-gl.js、mapbox-gl.css

2 vue中初始化地图

  import {getJson} from "./geojson/json"

 async initMap() {
// let baseurl = APPCONFIG.economicOperat.url;	//我这里配置的是supermap iServer 9D发布的地图
 let baseurl = 'http://iclient.supermap.io/iserver/services/map-china400/rest/maps/China';	//这里使用iclient官网上的地图
 let map = new mapboxgl.Map({
        container: 'map',	//div容器的id
        style: {
          "version": 8,
          "sources": {
            "raster-tiles": {
              //"attribution": 'supermap',
              "type": "raster",
              "tiles": [baseurl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
              "tileSize": 256,
            },
          },
          "layers": [{
            "id": "simple-tiles",
            "type": "raster",
            "source": "raster-tiles",
            "minzoom": 3,
            "maxzoom": 18,
          }]
        },
        center: [112.7872, 28.2131], //中心点配置
        zoom: 12 //当前缩放等级
        //默认倾斜角度-三维效果
        pitch: 45,
        //默认偏移角度
        bearing: 30
      });

      //底图倾斜角度；可以通过easeTo或flyTo 飞向目标点
      /* map.easeTo({
         center:[112.7872, 28.2131],
         pitch: 45,
         bearing: 30,
         //飞行速度
         speed:0.8
       });*/
 		window.BoxMap = map;
		//初始化底图完毕
       //待地图加载完毕执行建筑物面拉起效果
      setTimeout(this.addLayer,100);
}

3 加载geojson面数据，通过图层叠加拉起面数据

   async addLayer() {
		  let that = this;
	      //获取本地geojson数据,效率快
	      let geojson = getJson();
	      that.addBoxLayer(geojson);
      }

getJson() 是获取geojson里的数据方法,bm11.json在我的下载里

import geojson from './bm11'

var getJson = function () {
  return  geojson;
}

export {
  getJson
}

    async addBoxLayer(feature) {
      let that = this;

      if(BoxMap.getLayer('entity_layer')){
        BoxMap.removeLayer('entity_layer');
      };
      if(BoxMap.getLayer('entity_borders')){
        BoxMap.removeLayer('entity_borders');
      };

      feature.features.forEach(item => {
        let he = '';  //默认建筑物高度
      if (item.properties.height == "") {
        he = "5";
      }else {
        he = item.properties.height;
      }
      //模拟数据
      item.properties.pkid = parseInt(item.properties.xh);
      item.properties.height = parseInt(he);
      item.properties.base_height = parseInt(0);
    });

      if(BoxMap.getSource("states")){
        BoxMap.getSource("states").setData(feature)
      }else{
        BoxMap.addSource("states", {
          "type": "geojson",
          "data": feature
        });
      }



      BoxMap.addLayer({
        'id': 'entity_layer',
        'type': 'fill',
        'source': 'states',
        'type': 'fill-extrusion',
        'layout': {},
        'minzoom': 14,
        'paint': {
          'fill-extrusion-color': '#123984',
          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          // 'fill-extrusion-height': ['get', 'height'],
          // 'fill-extrusion-base': ['get', 'base_height'],
          'fill-extrusion-height': [
            "interpolate", ["linear"], ["zoom"],
            14, 0,
            14.05, ["get", "height"]
          ],
          'fill-extrusion-base': [
            "interpolate", ["linear"], ["zoom"],
            14, 0,
            14.05, ["get", "base_height"]
          ],
          'fill-extrusion-opacity': 1
        }
      });
      BoxMap.addLayer({
        'id': 'entity_borders',
        'type': 'fill',
        'source': 'states',
        'type': 'fill-extrusion',
        'layout': {},
        'minzoom': 14,
        'paint': {
          'fill-extrusion-color': '#b8c9dd',
          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          'fill-extrusion-height': ['get', 'height'],
          'fill-extrusion-base': ['get', 'base_height'],
          'fill-extrusion-opacity': 1
        },
        "filter": ["in", "pkid", ""]
      });

      let popups = new mapboxgl.Popup({
        closeButton: false,
        closeOnClick: false
      });

      BoxMap.on("mousemove", "entity_layer", function(e) {
        BoxMap.getCanvas().style.cursor = 'pointer';
        let feature = e.features[0];

        let relatedFeatures = BoxMap.querySourceFeatures('states', {
          filter: ['in', 'pkid', feature.properties.pkid]
        });

        let filter = relatedFeatures.reduce(function(memo, feature) {
          memo.push(feature.properties.pkid);
          return memo;
        }, ['in', 'pkid']);

        BoxMap.setFilter("entity_borders", filter);

        //建筑物弹窗信息
        let xmmc = "";
        if (feature.properties.XMMC.length > 35) {
          let a1 = feature.properties.XMMC.substring(0,35);
          let a2 = feature.properties.XMMC.substring(35,feature.properties.XMMC.length);
          xmmc = "<h1 style='color: white'><a style='color: orange'>" + a1 + "<br>" + a2+ " ("+ feature.properties.JZWMC + ")</a></h1>";
        } else {
          xmmc = "<h1 style='color: white'><a style='color: orange'>" + feature.properties.XMMC + " ("+ feature.properties.JZWMC + ")</a></h1>";
        }
        //建筑物弹窗信息
        let html = xmmc +
          "<h2 style='color: white'> 建筑物用途：<a style='color: orange'>"+feature.properties.JZWJBYT+"</a> </h2>" +
          "<h2 style='color: white'> 建筑物高度：<a style='color: orange'>" +  feature.properties.JZWGD + " 米</a></h2>" +
          "<h2 style='color: white'> 维修单位：<a style='color: orange'>"+feature.properties.WXDW+"</a> </h2>" +
          "<h2 style='color: white'> 物业公司：<a style='color: orange'>" +  feature.properties.WYGSMC + "</a></h2>" +
          "<h2 style='color: white'> 坐落：<a style='color: orange'>"+feature.properties.ZL+"</a> </h2>";

        popups.setLngLat([feature.properties.X, feature.properties.Y])
          .setHTML(html)
          .addTo(BoxMap);

      });

      BoxMap.on("mouseleave", "entity_layer", function() {
        BoxMap.getCanvas().style.cursor = '';
        BoxMap.setFilter('entity_borders', ['in', 'pkid', '']);
        popups.remove();

      });

    },

4 效果图