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/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/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,