vue + mapbox 通过genjson数据加载3D建筑模型

1.代码 

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
  import mapboxgl from 'mapbox-gl'
  // import * as THREE from 'three'
  // import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
  import geojson from './code1.json'
  export default {
    data: function () {
      return {
        title: 'Mapgis',
        hs: 'aad',
        positionLocation: [106.5969793, 29.61329216],
        //positionLocation: [106.697157, 29.501613],
        zoom: 16,
        pitch: 60, //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
        bearing: 10,
        antialias: false, //抗锯齿，通过false关闭提升性能
        maxPitch: 60,
        container: 'map',
        lonlats: [],
        baseUrl: 'api/service-count',
        markerRe: [], //标点
        x_PI: (3.14159265358979324 * 3000.0) / 180.0,
        PI: 3.1415926535897932384626,
        a: 6378245.0,
        ee: 0.00669342162296594323,
        layer: '',
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init: function () {
        let that = this
        mapboxgl.accessToken =
          'pk.eyJ1IjoiYWJjZDE5ODg2IiwiYSI6ImNrZTd6a2ZkMDFyc2wzMXBkOXY4bjhlbDcifQ.cKJFaQTOB5mZhzMm1cCDjQ'
        let map = new mapboxgl.Map({
          container: 'map',
          style: 'mapbox://styles/abcd19886/ckgbsqb68214i1apr7qifwpvm',
          maxPitch: this.maxPitch,
          center: this.positionLocation,
          zoom: this.zoom,
          pitch: this.pitch,
          bearing: this.bearing,
        })
        window.mapBox = map
        //console.log(typeof geojson.geometries)
        map.on('style.load', function () {
          that.addBoxLayer(geojson)
        })

      },
      async addBoxLayer(feature) {
        if (mapBox.getLayer('entity_layer')) {
          mapBox.removeLayer('entity_layer')
        }
        if (mapBox.getLayer('entity_borders')) {
          mapBox.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 (mapBox.getSource('states')) {
          mapBox.getSource('states').setData(feature)
        } else {
          mapBox.addSource('states', {
            type: 'geojson',
            data: feature,
          })
        }
        mapBox.addLayer({
          id: 'entity_layer',
          source: 'states',
          type: 'fill-extrusion',
          layout: {},
          minzoom: 10,
          paint: {
            'fill-extrusion-color': '#123984',
            '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,
          },
        })
      },
    },
  }
</script>
<style scoped>
  /* mapbox css*/
  @import url('https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.css');
  #map {
    position: absolute;
    top: 40px;
    bottom: 0;
    width: 100%;
    margin-left: -24px;
  }
</style>

2.效果