zoukankan      html  css  js  c++  java
  • mapbox gl加载400万点动画旋转

    前置条件

    mapbox-gl.js

    mapbox-gl.css

    threebox.js

    DEMO

    <!doctype html>
    <head>
        <title>Threebox example</title>
        <script src="../dist/threebox.js" type="text/javascript"></script>
    
        <script src='mapbox-gl.js'></script>
        <link href='mapbox-gl.css' rel='stylesheet' />
        <style>
            body, html { 
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #map { 
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id='map' class='map'></div>
    
        <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoia3JvbmljayIsImEiOiJjaWxyZGZwcHQwOHRidWxrbnd0OTB0cDBzIn0.u2R3NY5PnevWH3cHRk6TWQ';
        var map = new mapboxgl.Map({
          container: 'map',
          style: 'https://raw.githubusercontent.com/osm2vectortiles/mapbox-gl-styles/master/styles/bright-v9-cdn.json',
          center: [-122.4340, 37.7353],
          zoom: 5.55,
          pitch: 60,
          heading: 41,
          hash: true
        });
    
        var highlighted = [];
        
        var cube = {}
        
        map.on("load", function() {
            // Initialize threebox
            window.threebox = new Threebox(map);
            threebox.setupDefaultLights();
    
            // initialize geometry and material of our cube object
            
            var lng = -122.4340;
            var lat = 37.7353;
            
            var geometry = new THREE.Geometry();
            
            for(x=-1000;x<1000;x++){
                for(y=-1000;y<=1000;y++){
                    
                    
                    geometry.vertices.push(new THREE.Vector3(x*10,y*10, Math.random() * 3000));
                    /**
                    //new THREE.BoxGeometry(500, 500, 0);
                     var geometry = new THREE.CylinderGeometry(5,5,60,64,1,false);
                     
                        var greenMaterial = new THREE.MeshPhongMaterial( {color: 0xaaffaa, side: THREE.DoubleSide});
                        var redMaterial = new THREE.MeshPhongMaterial( {color: 0xff0000, side: THREE.DoubleSide});
    
                        var cube = new THREE.Mesh(geometry, redMaterial);
                        cube.rotation.x += 1.5;
                        cube.userData.name = "Red cube";
                        threebox.addAtCoordinate(cube, [-122.4340 + (x/1000), 37.7353 + (y/1000), 0], {preScale: 1});
                        */
                        
                    
                    
                }
                
                
            }
            
            
            var redMaterial = new THREE.PointsMaterial( {color: 0x00ff00, side: THREE.DoubleSide});
            cube = new THREE.Points(geometry, redMaterial);
            
             
            
            threebox.addAtCoordinate(cube, [-122.4340 , 37.7353 , 555], {preScale: 22});
        
            var render = function() {
                
                  
                map.setBearing(map.getBearing()+2.5)
                  requestAnimationFrame(render);
                  
              };
    
              render();
    
        });
    
        </script>
    </body>

    效果

     

  • 相关阅读:
    (Java实现) 洛谷 P1603 斯诺登的密码
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1036 选数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1012 拼数
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1028 数的计算
    (Java实现) 洛谷 P1553 数字反转(升级版)
    8.4 确定两个日期之间的月份数或年数
    (Java实现) 洛谷 P1553 数字反转(升级版)
  • 原文地址:https://www.cnblogs.com/lilei2blog/p/8628335.html
Copyright © 2011-2022 走看看