openLayer3图层加入数据，一边加一边更新。

这个需要考虑JS多线程的问题，需要用定时器创建新的线程去做，一个线程的话会出现需要所有数据加入后，地图上才出现点。
<!DOCTYPE html>
<html>
  <head>
    <title>Clustered Features</title>
    <link rel="stylesheet" href="http://openlayers.org/en/v3.18.2/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="http://openlayers.org/en/v3.18.2/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <button onClick="play()">添加要素</button>
    <script>
      var count = 10000;
      var features = new Array(count);
      var e = 4500000;
      for (var i = 0; i < count; ++i) {
        var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
        features[i] = new ol.Feature(new ol.geom.Point(coordinates));
      }

      var source = new ol.source.Vector({

      });

      var styleCache = {};
      var vectlayers= new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
              image: new ol.style.Circle({
                radius: 10,
                stroke: new ol.style.Stroke({
                  color: '#fff'
                }),
                fill: new ol.style.Fill({
                  color: '#3399CC'
                })
              })
            })
      });

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
      });



      function createPlayer(interval,count,show,onFinished){
          var t={
            timer:null,
            index:0,
            count:count,
            isPause:false,
            play:function(){
              t.timer=setInterval(function(){
                 if(!t.isPause){
                   if(t.index<t.count){
                      show(t.index++);
                   }
                   else{
                     t.stop();
                   }
                 }
              },interval)
            },
            pause:function(){
               t.isPause = true;
            },
            continue:function(){
               t.isPause=false;
            },
            stop:function(){
               t.index=0;
               clearInterval(t.timer);
               onFinished();
            }
          }
          return t;
      } 

      function addFeatures(index){
         for(var i=index*100;i<100*(index+1);i++){
           vectlayers.getSource().addFeature(features[i]);
         }    
      }

      function play(){
          var animate=createPlayer(500,100,function(index){
              addFeatures(index);
          });
          animate.play();
      }

      var map = new ol.Map({
        layers: [raster, vectlayers],
        renderer: 'canvas',
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
    </script>
  </body>
</html>
openLayer3图层加入数据，一边加一边更新。

猜你喜欢
