diff --git a/.eslintignore b/.eslintignore index 9e34b3efdb..8dcfb7d80d 100755 --- a/.eslintignore +++ b/.eslintignore @@ -10,4 +10,5 @@ demos/index.html demos/* rollup/* webpack/* -src/core/three.js \ No newline at end of file +src/core/three.js +testdemo/* \ No newline at end of file diff --git a/.gitignore b/.gitignore index 5fb73328f2..bb2eaa557b 100755 --- a/.gitignore +++ b/.gitignore @@ -74,4 +74,5 @@ demos/data demos/image .vscode demos/hexagon.html -demos/model \ No newline at end of file +demos/model +testdemo \ No newline at end of file diff --git a/demos/04_choropleths_polygon.html b/demos/04_choropleths_polygon.html index c1059cc1ce..f0b263abba 100644 --- a/demos/04_choropleths_polygon.html +++ b/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) diff --git a/demos/05_raster_dem.html b/demos/05_raster_dem.html index 88a1e5bf92..81b98192b3 100644 --- a/demos/05_raster_dem.html +++ b/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); } }; diff --git a/package.json b/package.json index 529672e824..dcca835f42 100755 --- a/package.json +++ b/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", diff --git a/src/core/image.js b/src/core/image.js index eb1ab5c415..e127909242 100644 --- a/src/core/image.js +++ b/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'); } diff --git a/src/geom/buffer/raster.js b/src/geom/buffer/raster.js index 9f62192699..1cb9c17c3a 100644 --- a/src/geom/buffer/raster.js +++ b/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 = []; diff --git a/src/geom/shader/raster_vert.glsl b/src/geom/shader/raster_vert.glsl index 7568cdbf80..bbe478d523 100644 --- a/src/geom/shader/raster_vert.glsl +++ b/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; diff --git a/src/source/parser/geojson.js b/src/source/parser/geojson.js index d157b4ffec..791dd2de0d 100644 --- a/src/source/parser/geojson.js +++ b/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 = { diff --git a/src/source/parser/raster.js b/src/source/parser/raster.js index 7d33903a23..5092a380d8 100644 --- a/src/source/parser/raster.js +++ b/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,