在Google Maps API应用上叠加WebGL层

Alpha · 发表于 2014-10-19 18:56:08

本帖最后由 Alpha 于 2014-10-19 18:57 编辑

为了在地图应用中显示大量的数量，WebGL可以担当此重任。
项目地址：
https://github.com/mattcooper/webgl-layer

ExamplesCreating a WebGL Layer.

This example shows how to create a WebGL Layer object and begin the rendering loop.

<head>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?libraries=places,drawing"></script>


<script src="../CanvasLayer.js"></script>
<script src="../ShaderProgram.js"></script>
<script src="../libtess.cat.js"></script>
<script src="../WebGLLayer.js"></script>

<script>
      var map;
      var myLayer;

      function init(){
         var mapOptions = {
            zoom: 12,
            center: new google.maps.LatLng(51.50711, -0.123124),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
         };

         var mapCanvas = document.getElementById('map-canvas');
         map = new google.maps.Map(mapCanvas, mapOptions);

         myLayer = new WebGLLayer(map);

         myLayer.start();
      }
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

效果图如下：