vue集成maptalk实现geojson3D渲染

不念不忘少年蓝@ 2023-07-15 15:16 10阅读 0赞

//实例化地图对象
        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: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <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);