Merge branch 'master' into tile

demos/05_raster_dem.html

@@ -26,9 +26,9 @@ const scene = new L7.Scene({
   id: 'map',
   viewMode: '3D',
   mapStyle: 'amap://styles/ba3e9759545cd618392ef073c0dfda8c?isPublic=true', // 样式URL
-  center: [ 110.770672, 34.159869 ],
+  center: [ 110.770672, 44.159869 ],
   pitch: 0,
-  zoom: 4
+  zoom: 3
 });
 
 scene.on('loaded', () => {
@@ -42,10 +42,9 @@ scene.on('loaded', () => {
       const blob = this.response;
       const tiff = GeoTIFF.parse(blob);
       const image = tiff.getImage();
-      const values = image.readRasters()[0];
+      const values = image.readRasters()[0].values();
       const m = image.getHeight();
       const n = image.getWidth();
-
       const layer = scene.RasterLayer({ zIndex: 2 }).
       source(values, {
         parser: {
@@ -64,7 +63,7 @@ scene.on('loaded', () => {
          }
        })
       .render();
-
+      console.log(layer);
      
     }
   };

src/core/image.js

@@ -28,14 +28,11 @@ export default class LoadImage extends EventEmitter {
     if (typeof opt === 'string') {
       getImage({ url: opt }, (err, img) => {
         img.id = id;
-
         this.images.push(img);
         this.ctx.drawImage(img, x, y, this.imageWidth, this.imageWidth);
-
         this.texture.magFilter = THREE.LinearFilter;
         this.texture.minFilter = THREE.LinearFilter;
         this.texture.needsUpdate = true;
-
         if (this.images.length === this.imagesCount) {
           this.emit('imageLoaded');
         }

src/geom/buffer/raster.js

@@ -15,17 +15,16 @@ export class RasterBuffer extends BufferBase {
     ];
     const imgPosUv = [ 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0 ];
     const size = this.get('size');
+
     const texture = new THREE.DataTexture(new Float32Array(data), width, height, THREE.LuminanceFormat, THREE.FloatType);
-    texture.generateMipmaps = true;
     texture.needsUpdate = true;
     const colors = this.get('rampColors');
     const colorImageData = this.getColorRamp(colors);
-    const colorTexture = this._getTexture(colorImageData);
+    const colorTexture = this._getTexture(colorImageData); // 颜色纹理
     this.bufferStruct.position = positions;
     this.bufferStruct.uv = imgPosUv;
     this.bufferStruct.u_raster = texture;//
     this.bufferStruct.u_extent = [ coordinates[0][0], coordinates[0][1], coordinates[1][0], coordinates[1][1] ];
-
     this.bufferStruct.u_colorTexture = colorTexture; // 颜色表‘=
     const triangles = this._buildTriangles(width, height, size, this.bufferStruct.u_extent);
     const attributes = {
@@ -68,16 +67,23 @@ export class RasterBuffer extends BufferBase {
     return new ImageData(data, 16, 16);
 
   }
+
+  /**
+   * 颜色纹理
+   * @param {*} image 颜色图片
+   * @return {texture} texture
+   */
   _getTexture(image) {
     const texture1 = new THREE.Texture(image);
     texture1.magFilter = THREE.LinearFilter;
     texture1.minFilter = THREE.LinearFilter;
     texture1.format = THREE.RGBAFormat;
     texture1.type = THREE.UnsignedByteType;
+    texture1.generateMipmaps = true;
     texture1.needsUpdate = true;
     return texture1;
   }
-  _buildTriangles(width, height, size = 1, extent) {
+  _buildTriangles(width, height, size = 2, extent) {
     // const extent = [ 73.482190241, 3.82501784112, 135.106618732, 57.6300459963 ]
     const indices = [];
     const vertices = [];

src/geom/shader/raster_vert.glsl

@@ -1,6 +1,7 @@
 precision highp float;
 uniform vec4 u_extent;
 uniform sampler2D u_texture;
+uniform float u_opacity;
 uniform float u_size;
 uniform sampler2D u_colorTexture;
 uniform float u_min;

src/source/parser/raster.js

@@ -4,7 +4,7 @@ export default function raster(data, cfg) {
     _id: 1,
     dataArray: [
       {
-        data,
+        data: Array.from(data),
         width,
         height,
         min,