vue集成maptalk實現geojson3D渲染

   //實例化地圖對象
    let map = new maptalks.Map("map",{
      center: [13.416935229170008, 52.529564137540376],
      zoom: 20,
      dragPitch : true,
      //allow map to drag rotating, true by default
      dragRotate : true,
      //enable map to drag pitching and rotating at the same time, false by default
      dragRotatePitch : true,
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a','b','c','d'],
        attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
      })
    });

// features to draw
//將Buildings中的數據，添加到features中
    let features = [];

    buildings.forEach(function (b) {
      console.log(b.features);
      features = features.concat(b.features);
    });

// the ThreeLayer to draw buildings
    let threeLayer = new ThreeLayer('t', {
      forceRenderOnMoving : true,
      forceRenderOnRotating : true
    });


    threeLayer.prepareToDraw = function (gl, scene, camera) {

      let me = this;
      let light = new THREE.DirectionalLight(0xffffff);
      light.position.set(0, -10, 10).normalize();
      scene.add(light);

      features.forEach(function (g) {
        let heightPerLevel = 5;
        let levels = g.properties.levels || 1;
        let color = 0x2685a7

        let m = new THREE.MeshPhongMaterial({color: color, opacity : 0.7});
        //change to back side with THREE <= v0.94
        // m.side = THREE.BackSide;

        let mesh = me.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), heightPerLevel, m,  heightPerLevel);
        if (Array.isArray(mesh)) {
          scene.add.apply(scene, mesh);
        } else {
          scene.add(mesh);
        }
      });
    };

    threeLayer.addTo(map);