Merge branch 'fix-raster' into 'master'

Fix raster

解决 type array clone 导致栅格数据渲染失败的问题

See merge request !27

.eslintignore

@@ -11,3 +11,4 @@ demos/*
 rollup/*
 webpack/*
 src/core/three.js
+testdemo/*

.gitignore

@@ -75,3 +75,4 @@ demos/image
 .vscode
 demos/hexagon.html
 demos/model
+testdemo

demos/04_choropleths_polygon.html

@@ -61,7 +61,7 @@ const scene = new L7.Scene({
 window.scene = scene;
 scene.on('loaded', () => {
   var colors = ["#FFF5B8","#FFDC7D","#FFAB5C","#F27049","#D42F31","#730D1C"];
-  $.getJSON('https://gw.alipayobjects.com/os/basement_prod/7224a078-e3a3-4cc3-8749-7026af9e5c7f.json', city => {
+  $.getJSON('https://gw.alipayobjects.com/os/basement_prod/77497aa8-8dd0-4a0c-bf3b-3bb55c5d453c.json', city => {
    
     const citylayer = scene.PolygonLayer()
     .source(city)

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);
      
     }
   };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/l7",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "Large-scale WebGL-powered Geospatial Data Visualization",
   "main": "build/l7.js",
   "browser": "build/l7.js",

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/geojson.js

@@ -3,6 +3,7 @@ import { getCoords } from '@turf/invariant';
 
 export default function geoJSON(data) {
   const resultData = [];
+  // 数据为空时处理
   turfMeta.flattenEach(data, (currentFeature, featureIndex) => { // 多个polygon 拆成一个
     const coord = getCoords(currentFeature);
     const dataItem = {

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,