From bccb0b3291f1a3ec04861d29c39c6f4a01bbc7b5 Mon Sep 17 00:00:00 2001 From: "mipha.ly@alibaba-inc.com" Date: Wed, 27 Feb 2019 14:50:10 +0800 Subject: [PATCH 1/7] feat heatmap layer --- demos/heatmap.html | 59 ++++++++++ src/core/engine/renderpass.js | 18 ++-- src/core/three.js | 4 + src/geom/buffer/heatmap.js | 105 ++++++++++++++++++ src/geom/material/heatmapMateial.js | 33 ++++++ src/geom/shader/heatmap_colorize_frag.glsl | 9 ++ src/geom/shader/heatmap_colorize_vert.glsl | 5 + src/geom/shader/heatmap_intensity_frag.glsl | 11 ++ src/geom/shader/heatmap_intensity_vert.glsl | 22 ++++ src/layer/heatmapLayer.js | 113 ++++++++++++++++++++ src/layer/index.js | 3 + src/layer/lineLayer.js | 1 - src/layer/pointLayer.js | 1 - src/layer/rasterLayer.js | 1 - 14 files changed, 375 insertions(+), 10 deletions(-) create mode 100644 demos/heatmap.html create mode 100644 src/geom/buffer/heatmap.js create mode 100644 src/geom/material/heatmapMateial.js create mode 100644 src/geom/shader/heatmap_colorize_frag.glsl create mode 100644 src/geom/shader/heatmap_colorize_vert.glsl create mode 100644 src/geom/shader/heatmap_intensity_frag.glsl create mode 100644 src/geom/shader/heatmap_intensity_vert.glsl create mode 100644 src/layer/heatmapLayer.js diff --git a/demos/heatmap.html b/demos/heatmap.html new file mode 100644 index 0000000000..44f99033ef --- /dev/null +++ b/demos/heatmap.html @@ -0,0 +1,59 @@ + + + + + + + + + heatmap + + + +
+ + + + + + + + diff --git a/src/core/engine/renderpass.js b/src/core/engine/renderpass.js index 9a19c47b35..70311302be 100644 --- a/src/core/engine/renderpass.js +++ b/src/core/engine/renderpass.js @@ -1,25 +1,28 @@ import * as THREE from '../three'; -export class RenderPass { +export default class RenderPass { constructor(cfg) { this.scene; this.camera = cfg.camera; this.renderer = cfg.renderer; this.clearColor = cfg.clear.clearColor; this.clearAlpha = cfg.clear.clearAlpha; + this.size = cfg.size ? cfg.size : cfg.renderer.getSize(); this._init(cfg); } _init() { this.scene = new THREE.Scene(); - const parameters = { minFilter: THREE.NearestFilter, - magFilter: THREE.NearestFilter, + const parameters = { + // minFilter: THREE.NearestFilter, + // magFilter: THREE.NearestFilter, + minFilter: THREE.LinearFilter, + magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false, depthBuffer: false }; - const size = this.renderer.getSize(); - this.pass = new THREE.WebGLRenderTarget(size.width, size.height, parameters); + this.pass = new THREE.WebGLRenderTarget(this.size.width, this.size.height, parameters); this.originClearColor = this.renderer.getClearColor(); this.originClearAlpha = this.renderer.getClearAlpha(); this.texture = this.pass.texture; @@ -35,7 +38,8 @@ export class RenderPass { render() { this.renderer.setClearColor(this.clearColor, this.clearAlpha); - this.renderer.render(this.scene, this.camera, this.pass, true); // this.pass,true - this.renderer.setClearColor(this.clearColor, this.clearAlpha); + this.renderer.render(this.scene, this.camera, this.pass, true); + this.renderer.setClearColor(this.originClearColor, this.originClearAlpha); + this.texture = this.pass.texture; } } diff --git a/src/core/three.js b/src/core/three.js index 75cbe58b5d..3c05ab2d13 100644 --- a/src/core/three.js +++ b/src/core/three.js @@ -11,7 +11,9 @@ export { Mesh } from 'three/src/objects/Mesh.js'; export { Texture } from 'three/src/textures/Texture.js'; export { WebGLRenderTarget } from 'three/src/renderers/WebGLRenderTarget.js'; export { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera.js'; +export { OrthographicCamera } from 'three/src/cameras/OrthographicCamera.js'; export { BufferGeometry } from 'three/src/core/BufferGeometry.js'; +export { PlaneBufferGeometry } from 'three/src/geometries/PlaneGeometry.js'; export { Raycaster } from 'three/src/core/Raycaster.js'; export { Matrix4 } from 'three/src/math/Matrix4.js'; export { Matrix3 } from 'three/src/math/Matrix3.js'; @@ -20,7 +22,9 @@ export { Vector4 } from 'three/src/math/Vector4.js'; export { Vector3 } from 'three/src/math/Vector3.js'; export { Vector2 } from 'three/src/math/Vector2.js'; export { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js'; +export { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js'; export { DataTexture } from 'three/src/textures/DataTexture.js'; +export { Color } from 'three/src/math/Color.js'; export { Float64BufferAttribute, Float32BufferAttribute, diff --git a/src/geom/buffer/heatmap.js b/src/geom/buffer/heatmap.js new file mode 100644 index 0000000000..c52c6b58ae --- /dev/null +++ b/src/geom/buffer/heatmap.js @@ -0,0 +1,105 @@ +import BufferBase from './bufferBase'; +import { colorScales } from '../../attr/colorscales'; +import * as THREE from '../../core/three'; + + +export default class HeatmapBuffer extends BufferBase { + geometryBuffer() { + const coordinates = this.get('coordinates'); + const properties = this.get('properties'); + const positions = []; + const dirs = []; + const weights = []; + const indices = []; + + // 组织顶点数据 + coordinates.forEach((geo, index) => { + const totalIndex = index * 4; + const props = properties[index]; + const radius = props.size; + /* const tl = this._addVertex(geo, -1, -1); + const tr = this._addVertex(geo, 1, -1); + const bl = this._addVertex(geo, -1, 1); + const br = this._addVertex(geo, 1, 1);*/ + const dir = this._addDir(-1, 1); + const dir1 = this._addDir(1, 1); + const dir2 = this._addDir(-1, -1); + const dir3 = this._addDir(1, -1); + positions.push(...geo, ...geo, ...geo, ...geo, ...geo, ...geo); + dirs.push(...dir, ...dir2, ...dir3, ...dir1, ...dir, ...dir3); + // dirs.push(...this._addDir(-1, 1), ...this._addDir(1, 1), ...this._addDir(-1, -1), ...this._addDir(1, -1)); + weights.push(radius, radius, radius, radius, radius, radius); + indices.push(totalIndex, totalIndex + 2, totalIndex + 3, totalIndex, totalIndex + 3, totalIndex + 1); + }); + + this.attributes = { + vertices: positions, + indices, + dirs, + weights + }; + } + + _addVertex(position, dirX, dirY) { + const x = (position[0] * 2) + ((dirX + 1) / 2); + const y = (position[1] * 2) + ((dirY + 1) / 2); + const z = position[2]; + return [ x, y, z ]; + } + + _addDir(dirX, dirY) { + const x = (dirX + 1) / 2; + const y = (dirY + 1) / 2; + return [ x, y ]; + } + +} + +export function createColorRamp(colors) { + const colorImageData = getColorRamp(colors); + const colorTexture = getTexture(colorImageData); + return colorTexture; +} + +function getColorRamp(name) { + let colorscale = name; + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + canvas.width = 256; + canvas.height = 1; + const gradient = ctx.createLinearGradient(0, 0, 256, 0); + let data = null; + if (typeof (colorscale) === 'string') { + colorscale = colorScales[name]; + } + if (Object.prototype.toString.call(colorscale) === '[object Object]') { + const min = colorscale.positions[0]; + const max = colorscale.positions[colorscale.positions.length - 1]; + + for (let i = 0; i < colorscale.colors.length; ++i) { + const value = (colorscale.positions[i] - min) / (max - min); + gradient.addColorStop(value, colorscale.colors[i]); + } + ctx.fillStyle = gradient; + ctx.fillRect(0, 0, 256, 1); + data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data); + } + if (Object.prototype.toString.call(colorscale) === '[object Uint8Array]') { + data = ctx.createImageData(256, 1); + } + + return new ImageData(data, 16, 16); + +} + +function getTexture(image) { + const texture = new THREE.Texture(image); + texture.magFilter = THREE.LinearFilter; + texture.minFilter = THREE.LinearFilter; + texture.format = THREE.RGBAFormat; + texture.type = THREE.UnsignedByteType; + texture.needsUpdate = true; + return texture; +} + diff --git a/src/geom/material/heatmapMateial.js b/src/geom/material/heatmapMateial.js new file mode 100644 index 0000000000..31e1064c37 --- /dev/null +++ b/src/geom/material/heatmapMateial.js @@ -0,0 +1,33 @@ +import * as THREE from '../../core/three'; +import Material from './material'; +import heatmap_intensity_vert from '../shader/heatmap_intensity_vert.glsl'; +import heatmap_intensity_frag from '../shader/heatmap_intensity_frag.glsl'; +import heatmap_colorize_vert from '../shader/heatmap_colorize_vert.glsl'; +import heatmap_colorize_frag from '../shader/heatmap_colorize_frag.glsl'; + +export function HeatmapIntensityMaterial(opt) { + const material = new Material({ + uniforms: { + u_intensity: { value: opt.intensity }, + u_radius: { value: opt.radius }, + u_zoom: { value: opt.zoom } + }, + vertexShader: heatmap_intensity_vert, + fragmentShader: heatmap_intensity_frag, + transparent: true, + blending: THREE.AdditiveBlending + }); + return material; +} + +export function HeatmapColorizeMaterial(opt) { + const material = new Material({ + uniforms: { + u_texture: { value: opt.texture }, + u_colorRamp: { value: opt.colorRamp } + }, + vertexShader: heatmap_colorize_vert, + fragmentShader: heatmap_colorize_frag + }); + return material; +} diff --git a/src/geom/shader/heatmap_colorize_frag.glsl b/src/geom/shader/heatmap_colorize_frag.glsl new file mode 100644 index 0000000000..e408ca3852 --- /dev/null +++ b/src/geom/shader/heatmap_colorize_frag.glsl @@ -0,0 +1,9 @@ +uniform sampler2D u_texture; +uniform sampler2D u_colorRamp; +varying vec2 v_uv; + +void main(){ + float intensity = texture2D(u_texture,v_uv).r; + vec4 color = texture2D(u_colorRamp,vec2(0.5,1.0-intensity)); + gl_FragColor = color * intensity; +} \ No newline at end of file diff --git a/src/geom/shader/heatmap_colorize_vert.glsl b/src/geom/shader/heatmap_colorize_vert.glsl new file mode 100644 index 0000000000..fb7bcf8ff1 --- /dev/null +++ b/src/geom/shader/heatmap_colorize_vert.glsl @@ -0,0 +1,5 @@ +varying vec2 v_uv; +void main(){ + v_uv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); +} \ No newline at end of file diff --git a/src/geom/shader/heatmap_intensity_frag.glsl b/src/geom/shader/heatmap_intensity_frag.glsl new file mode 100644 index 0000000000..a70f8dd848 --- /dev/null +++ b/src/geom/shader/heatmap_intensity_frag.glsl @@ -0,0 +1,11 @@ +precision highp float; +varying float v_weight; +varying vec2 v_extrude; + + +void main(){ + float GAUSS_COEF = 0.3989422804014327; + float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude); + float val = v_weight * 10.0 * GAUSS_COEF * exp(d); + gl_FragColor = vec4(val, val, val, 1.0); +} diff --git a/src/geom/shader/heatmap_intensity_vert.glsl b/src/geom/shader/heatmap_intensity_vert.glsl new file mode 100644 index 0000000000..504355316b --- /dev/null +++ b/src/geom/shader/heatmap_intensity_vert.glsl @@ -0,0 +1,22 @@ +precision highp float; +attribute float a_weight; +attribute vec2 a_dir; +uniform float u_intensity; +uniform float u_radius; +uniform float u_zoom; +varying vec2 v_extrude; +varying float v_weight; + +void main(){ + v_weight = a_weight; + float GAUSS_COEF = 0.3989422804014327; + float ZERO = 1.0 / 255.0 / 16.0; + float extrude_x = a_dir.x * 2.0 -1.0; + float extrude_y = a_dir.y * 2.0 -1.0; + vec2 extrude_dir = normalize(vec2(extrude_x,extrude_y)); + float S = sqrt(-2.0 * log(ZERO / a_weight / u_intensity / GAUSS_COEF)) / 3.0; + v_extrude = extrude_dir * S; + vec2 extrude = v_extrude * u_radius * pow(2.0,20.0-min(u_zoom,9.0)); + vec4 pos = vec4( position.xy+ extrude, 0.0, 1.0); + gl_Position = projectionMatrix * modelViewMatrix * pos; +} \ No newline at end of file diff --git a/src/layer/heatmapLayer.js b/src/layer/heatmapLayer.js new file mode 100644 index 0000000000..420a99ba97 --- /dev/null +++ b/src/layer/heatmapLayer.js @@ -0,0 +1,113 @@ +import Layer from '../core/layer'; +import HeatmapBuffer from '../geom/buffer/heatmap'; +import { createColorRamp } from '../geom/buffer/heatmap'; +import { HeatmapIntensityMaterial, HeatmapColorizeMaterial } from '../geom/material/heatmapMateial'; +import Renderpass from '../core/engine/renderpass'; +import * as THREE from '../core/three'; + +export default class HeatmapLayer extends Layer { + + render() { + this.init(); + const bbox = this._calBoundingBox(this.layerSource.geoData); + const colors = this.get('styleOptions').rampColors; + this.colorRamp = createColorRamp(colors); + this._createIntensityPass(bbox); + this._createColorizePass(bbox); + } + + _createIntensityPass(bbox) { + const source = this.layerSource; + const style = this.get('styleOptions'); + const StyleData = this.StyleData; + // get attributes data + const buffer = new HeatmapBuffer({ + coordinates: source.geoData, + properties: StyleData + }); + const attributes = buffer.attributes; + // create geometery + const geometry = new THREE.BufferGeometry(); + // geometry.setIndex(attributes.indices); + geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3)); + geometry.addAttribute('a_dir', new THREE.Float32BufferAttribute(attributes.dirs, 2)); + geometry.addAttribute('a_weight', new THREE.Float32BufferAttribute(attributes.weights, 1)); + // set material + const material = new HeatmapIntensityMaterial({ + intensity: style.intensity, + radius: style.radius, + zoom: this.scene.getZoom() + }); + const mesh = new THREE.Mesh(geometry, material); + // set camera + const passOrth = new THREE.OrthographicCamera(bbox.width / -2, bbox.width / 2, bbox.height / 2, bbox.height / -2, 1, 10000); + passOrth.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 1000); + // renderpass + const renderpass = new Renderpass({ + renderer: this.scene._engine._renderer, + camera: passOrth, + size: { + width: 10000, + height: 10000 * (bbox.height / bbox.width) + }, + clear: { + clearColor: 0x000000, + clearAlpha: 1.0 + } + }); + renderpass.add(mesh); + renderpass.render(); + this.intensityPass = renderpass; + const scene = this.scene; + render(); + function render() { + requestAnimationFrame(render); + renderpass.render(); + mesh.material.uniforms.u_zoom.value = scene.getZoom(); + } + } + _createColorizePass(bbox) { + // create plane geometry + const geometery = new THREE.PlaneBufferGeometry(bbox.width, bbox.height); + const material = new HeatmapColorizeMaterial({ + texture: this.intensityPass.texture, + colorRamp: this.colorRamp + }); + const mesh = new THREE.Mesh(geometery, material); + mesh.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 0.0); + this.add(mesh); + } + + _calBoundingBox(positions) { + let minX = Infinity; + let minY = Infinity; + let maxX = -Infinity; + let maxY = -Infinity; + for (let i = 0; i < positions.length; i++) { + const p = positions[i]; + if (p[0] < minX) { + minX = p[0]; + } else if (p[0] > maxX) { + maxX = p[0]; + } + if (p[1] < minY) { + minY = p[1]; + } else if (p[1] > maxY) { + maxY = p[1]; + } + } + const width = maxX - minX; + const height = maxY - minY; + + return { + minX, + maxX, + minY, + maxY, + width, + height + }; + } + + +} diff --git a/src/layer/index.js b/src/layer/index.js index 5e8fef27c6..8f5c3622ef 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -4,12 +4,14 @@ import PointLayer from './pointLayer'; import LineLayer from './lineLayer'; import ImageLayer from './imageLayer'; import RasterLayer from './rasterLayer'; +import HeatmapLayer from './heatmapLayer'; registerLayer('PolygonLayer', PolygonLayer); registerLayer('PointLayer', PointLayer); registerLayer('LineLayer', LineLayer); registerLayer('ImageLayer', ImageLayer); registerLayer('RasterLayer', RasterLayer); +registerLayer('HeatmapLayer', HeatmapLayer); export { LAYER_MAP } from './factory'; export { default as PolygonLayer } from './polygonLayer'; @@ -17,4 +19,5 @@ export { default as PointLayer } from './pointLayer'; export { default as LineLayer } from './lineLayer'; export { default as ImageLayer } from './imageLayer'; export { default as RasterLayer } from './rasterLayer'; +export { default as HeatmapLayer } from './heatmapLayer'; diff --git a/src/layer/lineLayer.js b/src/layer/lineLayer.js index 4d40755100..fd103aa549 100644 --- a/src/layer/lineLayer.js +++ b/src/layer/lineLayer.js @@ -1,4 +1,3 @@ - import Layer from '../core/layer'; import * as THREE from '../core/three'; import { LineBuffer } from '../geom/buffer/index'; diff --git a/src/layer/pointLayer.js b/src/layer/pointLayer.js index a21a80b4a7..5eabb8bfad 100644 --- a/src/layer/pointLayer.js +++ b/src/layer/pointLayer.js @@ -13,7 +13,6 @@ import * as PointBuffer from '../geom/buffer/point/index'; * shape 3d cube，column, sphere * shape Model ,自定义 * image - * */ export default class PointLayer extends Layer { diff --git a/src/layer/rasterLayer.js b/src/layer/rasterLayer.js index 7a68dc8530..0c5cd44089 100644 --- a/src/layer/rasterLayer.js +++ b/src/layer/rasterLayer.js @@ -37,7 +37,6 @@ export default class RasterLayer extends Layer { const rasterMesh = new THREE.Mesh(this.geometry, material); this.add(rasterMesh); return this; - } animateFunc() { From eec6a121ac4c1a13f3442d6285533395a70bbcf6 Mon Sep 17 00:00:00 2001 From: "mipha.ly@alibaba-inc.com" Date: Wed, 27 Feb 2019 17:14:01 +0800 Subject: [PATCH 2/7] feat(l7): feat heatmap layer --- demos/heatmap.html | 9 -- src/geom/buffer/{ => heatmap}/heatmap.js | 6 +- src/layer/heatmap.js | 55 --------- src/layer/heatmapLayer.js | 146 +++++++---------------- src/layer/index.js | 2 - src/layer/render/heatmap/heatmap.js | 105 ++++++++++++++++ 6 files changed, 153 insertions(+), 170 deletions(-) rename src/geom/buffer/{ => heatmap}/heatmap.js (95%) delete mode 100644 src/layer/heatmap.js create mode 100644 src/layer/render/heatmap/heatmap.js diff --git a/demos/heatmap.html b/demos/heatmap.html index 44f99033ef..415af28ee5 100644 --- a/demos/heatmap.html +++ b/demos/heatmap.html @@ -42,15 +42,6 @@ scene.on('loaded', () => { } }) .render(); - - /* scene.PointLayer({ - zIndex: 3 - }) - .source(data) - .shape('2d:circle') - .size(2) - .color('#EE2C2C') - .render();*/ }); }); diff --git a/src/geom/buffer/heatmap.js b/src/geom/buffer/heatmap/heatmap.js similarity index 95% rename from src/geom/buffer/heatmap.js rename to src/geom/buffer/heatmap/heatmap.js index 6553f1ea59..6d394a8ea7 100644 --- a/src/geom/buffer/heatmap.js +++ b/src/geom/buffer/heatmap/heatmap.js @@ -1,6 +1,6 @@ -import BufferBase from './bufferBase'; -import { colorScales } from '../../attr/colorscales'; -import * as THREE from '../../core/three'; +import BufferBase from '../bufferBase'; +import { colorScales } from '../../../attr/colorscales'; +import * as THREE from '../../../core/three'; export default class HeatmapBuffer extends BufferBase { diff --git a/src/layer/heatmap.js b/src/layer/heatmap.js deleted file mode 100644 index 3b23ad98da..0000000000 --- a/src/layer/heatmap.js +++ /dev/null @@ -1,55 +0,0 @@ -import Layer from '../core/layer'; -import gridBuffer from '../geom/buffer/heatmap/grid'; -import DrawGrid from './render/heatmap/gird'; -import DrawHexagon from './render/heatmap/hexagon'; -import hexagonBuffer from '../geom/buffer/heatmap/hexagon'; - -export default class HeatMapLayer extends Layer { - shape(type) { - this.shapeType = type; - return this; - } - render() { - this._prepareRender(); - return this; - } - _prepareRender() { - this.init(); - switch (this.shapeType) { - case 'grid' : - this._drawGrid(); - break; - case 'hexagon' : - this._drawHexagon(); - break; - default: - this._drawGrid(); - } - } - _drawHexagon() { - const style = this.get('styleOptions'); - const { radius } = this.layerSource.data; - this._buffer = new hexagonBuffer(this.layerData); - const config = { - ...style, - radius - }; - const Mesh = new DrawHexagon(this._buffer, config); - this.add(Mesh); - - } - _drawGrid() { - this.type = 'heatmap'; - const style = this.get('styleOptions'); - const { xOffset, yOffset } = this.layerSource.data; - this._buffer = new gridBuffer(this.layerData); - const config = { - ...style, - xOffset, - yOffset - }; - const girdMesh = new DrawGrid(this._buffer, config); - this.add(girdMesh); - } - -} diff --git a/src/layer/heatmapLayer.js b/src/layer/heatmapLayer.js index 455bbfd943..117bab6822 100644 --- a/src/layer/heatmapLayer.js +++ b/src/layer/heatmapLayer.js @@ -1,111 +1,55 @@ import Layer from '../core/layer'; -import HeatmapBuffer from '../geom/buffer/heatmap'; -import { createColorRamp } from '../geom/buffer/heatmap'; -import { HeatmapIntensityMaterial, HeatmapColorizeMaterial } from '../geom/material/heatmapMateial'; -import Renderpass from '../core/engine/renderpass'; -import * as THREE from '../core/three'; - -export default class HeatmapLayer extends Layer { +import gridBuffer from '../geom/buffer/heatmap/grid'; +import DrawGrid from './render/heatmap/gird'; +import DrawHexagon from './render/heatmap/hexagon'; +import drawHeatmap from './render/heatmap/heatmap'; +import hexagonBuffer from '../geom/buffer/heatmap/hexagon'; +export default class HeatMapLayer extends Layer { + shape(type) { + this.shapeType = type; + return this; + } render() { + this._prepareRender(); + return this; + } + _prepareRender() { this.init(); - const bbox = this._calBoundingBox(this.layerData); - const colors = this.get('styleOptions').rampColors; - this.colorRamp = createColorRamp(colors); - this._createIntensityPass(bbox); - this._createColorizePass(bbox); + this.type = 'heatmap'; + switch (this.shapeType) { + case 'grid' : + this._drawGrid(); + break; + case 'hexagon' : + this._drawHexagon(); + break; + default: + drawHeatmap(this); + } } - - _createIntensityPass(bbox) { + _drawHexagon() { const style = this.get('styleOptions'); - const data = this.layerData; - // get attributes data - const buffer = new HeatmapBuffer({ - data - }); - const attributes = buffer.attributes; - // create geometery - const geometry = new THREE.BufferGeometry(); - // geometry.setIndex(attributes.indices); - geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3)); - geometry.addAttribute('a_dir', new THREE.Float32BufferAttribute(attributes.dirs, 2)); - geometry.addAttribute('a_weight', new THREE.Float32BufferAttribute(attributes.weights, 1)); - // set material - const material = new HeatmapIntensityMaterial({ - intensity: style.intensity, - radius: style.radius, - zoom: this.scene.getZoom() - }); - const mesh = new THREE.Mesh(geometry, material); - // set camera - const passOrth = new THREE.OrthographicCamera(bbox.width / -2, bbox.width / 2, bbox.height / 2, bbox.height / -2, 1, 10000); - passOrth.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 1000); - // renderpass - const renderpass = new Renderpass({ - renderer: this.scene._engine._renderer, - camera: passOrth, - size: { - width: 10000, - height: 10000 * (bbox.height / bbox.width) - }, - clear: { - clearColor: 0x000000, - clearAlpha: 1.0 - } - }); - renderpass.add(mesh); - renderpass.render(); - this.intensityPass = renderpass; - const scene = this.scene; - render(); - function render() { - requestAnimationFrame(render); - renderpass.render(); - mesh.material.uniforms.u_zoom.value = scene.getZoom(); - } - } - _createColorizePass(bbox) { - // create plane geometry - const geometery = new THREE.PlaneBufferGeometry(bbox.width, bbox.height); - const material = new HeatmapColorizeMaterial({ - texture: this.intensityPass.texture, - colorRamp: this.colorRamp - }); - const mesh = new THREE.Mesh(geometery, material); - mesh.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 0.0); - this.add(mesh); - } - - _calBoundingBox(data) { - let minX = Infinity; - let minY = Infinity; - let maxX = -Infinity; - let maxY = -Infinity; - for (let i = 0; i < data.length; i++) { - const p = data[i].coordinates; - if (p[0] < minX) { - minX = p[0]; - } else if (p[0] > maxX) { - maxX = p[0]; - } - if (p[1] < minY) { - minY = p[1]; - } else if (p[1] > maxY) { - maxY = p[1]; - } - } - const width = maxX - minX; - const height = maxY - minY; - - return { - minX, - maxX, - minY, - maxY, - width, - height + const { radius } = this.layerSource.data; + this._buffer = new hexagonBuffer(this.layerData); + const config = { + ...style, + radius }; + const Mesh = new DrawHexagon(this._buffer, config); + this.add(Mesh); + } + _drawGrid() { + const style = this.get('styleOptions'); + const { xOffset, yOffset } = this.layerSource.data; + this._buffer = new gridBuffer(this.layerData); + const config = { + ...style, + xOffset, + yOffset + }; + const girdMesh = new DrawGrid(this._buffer, config); + this.add(girdMesh); } - } diff --git a/src/layer/index.js b/src/layer/index.js index a6a5314142..f7754776e2 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -5,14 +5,12 @@ import LineLayer from './lineLayer'; import ImageLayer from './imageLayer'; import RasterLayer from './rasterLayer'; import HeatmapLayer from './heatmapLayer'; -import HeatMapLayer from './heatmap'; registerLayer('PolygonLayer', PolygonLayer); registerLayer('PointLayer', PointLayer); registerLayer('LineLayer', LineLayer); registerLayer('ImageLayer', ImageLayer); registerLayer('RasterLayer', RasterLayer); -registerLayer('HeatMapLayer', HeatMapLayer); registerLayer('HeatmapLayer', HeatmapLayer); export { LAYER_MAP } from './factory'; diff --git a/src/layer/render/heatmap/heatmap.js b/src/layer/render/heatmap/heatmap.js new file mode 100644 index 0000000000..02ab1063c0 --- /dev/null +++ b/src/layer/render/heatmap/heatmap.js @@ -0,0 +1,105 @@ +import HeatmapBuffer from '../../../geom/buffer/heatmap/heatmap'; +import { createColorRamp } from '../../../geom/buffer/heatmap/heatmap'; +import { HeatmapIntensityMaterial, HeatmapColorizeMaterial } from '../../../geom/material/heatmapMateial'; +import Renderpass from '../../../core/engine/renderpass'; +import * as THREE from '../../../core/three'; + +export default function drawHeatmap(layer) { + const bbox = calBoundingBox(layer.layerData); + const colors = layer.get('styleOptions').rampColors; + layer.colorRamp = createColorRamp(colors); + createIntensityPass(layer, bbox); + createColorizePass(layer, bbox); +} + +function createIntensityPass(layer, bbox) { + const style = layer.get('styleOptions'); + const data = layer.layerData; + // get attributes data + const buffer = new HeatmapBuffer({ + data + }); + const attributes = buffer.attributes; + // create geometery + const geometry = new THREE.BufferGeometry(); + // geometry.setIndex(attributes.indices); + geometry.addAttribute('position', new THREE.Float32BufferAttribute(attributes.vertices, 3)); + geometry.addAttribute('a_dir', new THREE.Float32BufferAttribute(attributes.dirs, 2)); + geometry.addAttribute('a_weight', new THREE.Float32BufferAttribute(attributes.weights, 1)); + // set material + const material = new HeatmapIntensityMaterial({ + intensity: style.intensity, + radius: style.radius, + zoom: layer.scene.getZoom() + }); + const mesh = new THREE.Mesh(geometry, material); + // set camera + const passOrth = new THREE.OrthographicCamera(bbox.width / -2, bbox.width / 2, bbox.height / 2, bbox.height / -2, 1, 10000); + passOrth.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 1000); + // renderpass + const renderpass = new Renderpass({ + renderer: layer.scene._engine._renderer, + camera: passOrth, + size: { + width: 10000, + height: 10000 * (bbox.height / bbox.width) + }, + clear: { + clearColor: 0x000000, + clearAlpha: 1.0 + } + }); + renderpass.add(mesh); + renderpass.render(); + layer.intensityPass = renderpass; + const scene = layer.scene; + render(); + function render() { + requestAnimationFrame(render); + renderpass.render(); + mesh.material.uniforms.u_zoom.value = scene.getZoom(); + } +} +function createColorizePass(layer, bbox) { + // create plane geometry + const geometery = new THREE.PlaneBufferGeometry(bbox.width, bbox.height); + const material = new HeatmapColorizeMaterial({ + texture: layer.intensityPass.texture, + colorRamp: layer.colorRamp + }); + const mesh = new THREE.Mesh(geometery, material); + mesh.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 0.0); + layer.add(mesh); +} + +function calBoundingBox(data) { + let minX = Infinity; + let minY = Infinity; + let maxX = -Infinity; + let maxY = -Infinity; + for (let i = 0; i < data.length; i++) { + const p = data[i].coordinates; + if (p[0] < minX) { + minX = p[0]; + } else if (p[0] > maxX) { + maxX = p[0]; + } + if (p[1] < minY) { + minY = p[1]; + } else if (p[1] > maxY) { + maxY = p[1]; + } + } + const width = maxX - minX; + const height = maxY - minY; + + return { + minX, + maxX, + minY, + maxY, + width, + height + }; +} + From 45db805a6889b4435d946ae0f35cb4d1e141f92f Mon Sep 17 00:00:00 2001 From: "mipha.ly" Date: Thu, 28 Feb 2019 11:55:04 +0800 Subject: [PATCH 3/7] =?UTF-8?q?fix(heatmap):=20=E8=A7=A3=E5=86=B3=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E6=8F=92=E5=80=BC=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E6=B8=B2=E6=9F=93=E6=80=A7=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demos/heatmap.html | 8 +++--- src/core/engine/renderpass.js | 20 +++++++-------- src/geom/buffer/heatmap/heatmap.js | 20 ++++++++------- src/geom/material/heatmapMateial.js | 3 ++- src/geom/shader/heatmap_colorize_frag.glsl | 2 +- src/geom/shader/heatmap_intensity_frag.glsl | 7 +++--- src/geom/shader/heatmap_intensity_vert.glsl | 2 +- src/layer/render/heatmap/heatmap.js | 28 +++++++++++++++++---- 8 files changed, 55 insertions(+), 35 deletions(-) diff --git a/demos/heatmap.html b/demos/heatmap.html index 415af28ee5..7d6538e09d 100644 --- a/demos/heatmap.html +++ b/demos/heatmap.html @@ -34,11 +34,11 @@ scene.on('loaded', () => { .source(data) .size('mag', [ 0, 1 ]) // weight映射通道 .style({ - intensity: 1, - radius: 10, + intensity: 3, + radius: 20, rampColors: { - colors: [ 'rgba(33,102,172,0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43)' ], - positions: [ 0.0, 0.2, 0.4, 0.6, 0.8, 1.0 ] + colors: [ 'rgba(33,102,172,0.0)', 'rgb(103,169,207)', 'rgb(209,229,240)', 'rgb(253,219,199)', 'rgb(239,138,98)', 'rgb(178,24,43,1.0)' ], + positions: [ 0, 0.2, 0.4, 0.6, 0.8, 1.0 ] } }) .render(); diff --git a/src/core/engine/renderpass.js b/src/core/engine/renderpass.js index 70311302be..b39cb5de07 100644 --- a/src/core/engine/renderpass.js +++ b/src/core/engine/renderpass.js @@ -8,21 +8,20 @@ export default class RenderPass { this.clearColor = cfg.clear.clearColor; this.clearAlpha = cfg.clear.clearAlpha; this.size = cfg.size ? cfg.size : cfg.renderer.getSize(); + const defaultRenderCfg = { + minFilter: THREE.NearestFilter, + magFilter: THREE.NearestFilter, + format: THREE.RGBAFormat, + stencilBuffer: false, + depthBuffer: false + }; + this.renderCfg = cfg.renderCfg ? cfg.renderCfg : defaultRenderCfg; this._init(cfg); } _init() { this.scene = new THREE.Scene(); - const parameters = { - // minFilter: THREE.NearestFilter, - // magFilter: THREE.NearestFilter, - minFilter: THREE.LinearFilter, - magFilter: THREE.LinearFilter, - format: THREE.RGBAFormat, - stencilBuffer: false, - depthBuffer: false - }; - this.pass = new THREE.WebGLRenderTarget(this.size.width, this.size.height, parameters); + this.pass = new THREE.WebGLRenderTarget(this.size.width, this.size.height, this.renderCfg); this.originClearColor = this.renderer.getClearColor(); this.originClearAlpha = this.renderer.getClearAlpha(); this.texture = this.pass.texture; @@ -40,6 +39,5 @@ export default class RenderPass { this.renderer.setClearColor(this.clearColor, this.clearAlpha); this.renderer.render(this.scene, this.camera, this.pass, true); this.renderer.setClearColor(this.originClearColor, this.originClearAlpha); - this.texture = this.pass.texture; } } diff --git a/src/geom/buffer/heatmap/heatmap.js b/src/geom/buffer/heatmap/heatmap.js index 6d394a8ea7..c915b5dfa4 100644 --- a/src/geom/buffer/heatmap/heatmap.js +++ b/src/geom/buffer/heatmap/heatmap.js @@ -60,9 +60,9 @@ function getColorRamp(name) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); - canvas.width = 256; - canvas.height = 1; - const gradient = ctx.createLinearGradient(0, 0, 256, 0); + canvas.width = 1; + canvas.height = 256; + const gradient = ctx.createLinearGradient(0, 0, 0, 256); let data = null; if (typeof (colorscale) === 'string') { colorscale = colorScales[name]; @@ -76,21 +76,23 @@ function getColorRamp(name) { gradient.addColorStop(value, colorscale.colors[i]); } ctx.fillStyle = gradient; - ctx.fillRect(0, 0, 256, 1); - data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data); + ctx.fillRect(0, 0, 1, 256); + data = new Uint8ClampedArray(ctx.getImageData(0, 0, 1, 256).data); } if (Object.prototype.toString.call(colorscale) === '[object Uint8Array]') { - data = ctx.createImageData(256, 1); + data = ctx.createImageData(1, 256); } - return new ImageData(data, 16, 16); + return new ImageData(data, 1, 256); } function getTexture(image) { const texture = new THREE.Texture(image); - texture.magFilter = THREE.LinearFilter; - texture.minFilter = THREE.LinearFilter; + texture.wrapS = THREE.ClampToEdgeWrapping; + texture.wrapT = THREE.ClampToEdgeWrapping; + texture.magFilter = THREE.NearestFilter; + texture.minFilter = THREE.NearestFilter; texture.format = THREE.RGBAFormat; texture.type = THREE.UnsignedByteType; texture.needsUpdate = true; diff --git a/src/geom/material/heatmapMateial.js b/src/geom/material/heatmapMateial.js index 31e1064c37..c3ce362658 100644 --- a/src/geom/material/heatmapMateial.js +++ b/src/geom/material/heatmapMateial.js @@ -27,7 +27,8 @@ export function HeatmapColorizeMaterial(opt) { u_colorRamp: { value: opt.colorRamp } }, vertexShader: heatmap_colorize_vert, - fragmentShader: heatmap_colorize_frag + fragmentShader: heatmap_colorize_frag, + transparent: true }); return material; } diff --git a/src/geom/shader/heatmap_colorize_frag.glsl b/src/geom/shader/heatmap_colorize_frag.glsl index e408ca3852..e2c790b914 100644 --- a/src/geom/shader/heatmap_colorize_frag.glsl +++ b/src/geom/shader/heatmap_colorize_frag.glsl @@ -5,5 +5,5 @@ varying vec2 v_uv; void main(){ float intensity = texture2D(u_texture,v_uv).r; vec4 color = texture2D(u_colorRamp,vec2(0.5,1.0-intensity)); - gl_FragColor = color * intensity; + gl_FragColor = color; } \ No newline at end of file diff --git a/src/geom/shader/heatmap_intensity_frag.glsl b/src/geom/shader/heatmap_intensity_frag.glsl index a70f8dd848..de324a2cb8 100644 --- a/src/geom/shader/heatmap_intensity_frag.glsl +++ b/src/geom/shader/heatmap_intensity_frag.glsl @@ -1,4 +1,5 @@ precision highp float; +uniform float u_intensity; varying float v_weight; varying vec2 v_extrude; @@ -6,6 +7,6 @@ varying vec2 v_extrude; void main(){ float GAUSS_COEF = 0.3989422804014327; float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude); - float val = v_weight * 10.0 * GAUSS_COEF * exp(d); - gl_FragColor = vec4(val, val, val, 1.0); -} + float val = v_weight * u_intensity * GAUSS_COEF * exp(d); + gl_FragColor = vec4(val, val, val, val); +} \ No newline at end of file diff --git a/src/geom/shader/heatmap_intensity_vert.glsl b/src/geom/shader/heatmap_intensity_vert.glsl index 504355316b..b3d884c360 100644 --- a/src/geom/shader/heatmap_intensity_vert.glsl +++ b/src/geom/shader/heatmap_intensity_vert.glsl @@ -16,7 +16,7 @@ void main(){ vec2 extrude_dir = normalize(vec2(extrude_x,extrude_y)); float S = sqrt(-2.0 * log(ZERO / a_weight / u_intensity / GAUSS_COEF)) / 3.0; v_extrude = extrude_dir * S; - vec2 extrude = v_extrude * u_radius * pow(2.0,20.0-min(u_zoom,9.0)); + vec2 extrude = v_extrude * u_radius * pow(2.0,20.0-u_zoom); vec4 pos = vec4( position.xy+ extrude, 0.0, 1.0); gl_Position = projectionMatrix * modelViewMatrix * pos; } \ No newline at end of file diff --git a/src/layer/render/heatmap/heatmap.js b/src/layer/render/heatmap/heatmap.js index 02ab1063c0..3386cbbd5e 100644 --- a/src/layer/render/heatmap/heatmap.js +++ b/src/layer/render/heatmap/heatmap.js @@ -37,16 +37,30 @@ function createIntensityPass(layer, bbox) { const passOrth = new THREE.OrthographicCamera(bbox.width / -2, bbox.width / 2, bbox.height / 2, bbox.height / -2, 1, 10000); passOrth.position.set(bbox.minX + bbox.width / 2, bbox.minY + bbox.height / 2, 1000); // renderpass + const renderer = layer.scene._engine._renderer; + // get extension for bilinear texture interpolation:https://threejs.org/docs/#api/en/textures/DataTexture + const gl = renderer.domElement.getContext('webgl') || + renderer.domElement.getContext('experimental-webgl'); + gl.getExtension('OES_texture_float_linear'); const renderpass = new Renderpass({ - renderer: layer.scene._engine._renderer, + renderer, camera: passOrth, size: { - width: 10000, - height: 10000 * (bbox.height / bbox.width) + width: 2000, + height: 2000 * (bbox.height / bbox.width) }, clear: { clearColor: 0x000000, - clearAlpha: 1.0 + clearAlpha: 0.0 + }, + renderCfg: { + wrapS: THREE.ClampToEdgeWrapping, + wrapT: THREE.ClampToEdgeWrapping, + minFilter: THREE.LinearFilter, + magFilter: THREE.LinearFilter, + format: THREE.RGBAFormat, + stencilBuffer: false, + depthBuffer: false } }); renderpass.add(mesh); @@ -56,8 +70,12 @@ function createIntensityPass(layer, bbox) { render(); function render() { requestAnimationFrame(render); + const zoom = scene.getZoom(); + mesh.material.uniforms.u_zoom.value = zoom; + const passWidth = Math.min(10000, Math.pow(zoom, 2.0) * 200); + const passHeight = passWidth * (bbox.height / bbox.width); + renderpass.pass.setSize(passWidth, passHeight); renderpass.render(); - mesh.material.uniforms.u_zoom.value = scene.getZoom(); } } function createColorizePass(layer, bbox) { From 06f6303f7e474e354cf7b05fd16a22e6c7b93bf6 Mon Sep 17 00:00:00 2001 From: "mipha.ly" Date: Fri, 1 Mar 2019 11:15:33 +0800 Subject: [PATCH 4/7] =?UTF-8?q?=E7=A7=BB=E9=99=A4three=E4=B8=8D=E5=BF=85?= =?UTF-8?q?=E8=A6=81=E7=9A=84=E6=A8=A1=E5=9D=97basic=20material?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/core/layer.js | 4 ++-- src/core/three.js | 1 - src/layer/render/heatmap/heatmap.js | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/core/layer.js b/src/core/layer.js index dc0afbd99e..e416d1c1ba 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -84,8 +84,8 @@ export default class Layer extends Base { object.onBeforeRender = () => { const zoom = this.scene.getZoom(); - object.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime()); - object.material.setUniformsValue('u_zoom', zoom); + // object.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime()); + // object.material.setUniformsValue('u_zoom', zoom); this._preRender(); }; diff --git a/src/core/three.js b/src/core/three.js index 08674d38d3..1c2ca4bc80 100644 --- a/src/core/three.js +++ b/src/core/three.js @@ -23,7 +23,6 @@ export { Vector4 } from 'three/src/math/Vector4.js'; export { Vector3 } from 'three/src/math/Vector3.js'; export { Vector2 } from 'three/src/math/Vector2.js'; export { ShaderMaterial } from 'three/src/materials/ShaderMaterial.js'; -export { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js'; export { DataTexture } from 'three/src/textures/DataTexture.js'; export { Color } from 'three/src/math/Color.js'; export { diff --git a/src/layer/render/heatmap/heatmap.js b/src/layer/render/heatmap/heatmap.js index 3386cbbd5e..07b7bb4cd4 100644 --- a/src/layer/render/heatmap/heatmap.js +++ b/src/layer/render/heatmap/heatmap.js @@ -72,7 +72,7 @@ function createIntensityPass(layer, bbox) { requestAnimationFrame(render); const zoom = scene.getZoom(); mesh.material.uniforms.u_zoom.value = zoom; - const passWidth = Math.min(10000, Math.pow(zoom, 2.0) * 200); + const passWidth = Math.min(10000, Math.pow(zoom, 2.0) * 300); const passHeight = passWidth * (bbox.height / bbox.width); renderpass.pass.setSize(passWidth, passHeight); renderpass.render(); From 918570d2f53f12e49897902f227c8fa84356ccad Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 1 Mar 2019 11:38:38 +0800 Subject: [PATCH 5/7] fix bug --- package.json | 3 ++- src/core/scene.js | 4 ++-- src/layer/index.js | 4 ++-- src/worker/geojsonSourceWorker.js | 2 -- 4 files changed, 6 insertions(+), 7 deletions(-) delete mode 100644 src/worker/geojsonSourceWorker.js diff --git a/package.json b/package.json index c28b5a396a..bf6a16b346 100755 --- a/package.json +++ b/package.json @@ -53,7 +53,8 @@ "string-replace-loader": "~1.3.0", "torchjs": "~2.1.0", "uglify-js": "~3.1.10", - "webpack": "~3.10.0", + "webpack": "~4.29.6", + "webpack-cli": "^3.2.3", "worker-loader": "^2.0.0" }, "scripts": { diff --git a/src/core/scene.js b/src/core/scene.js index c86c5cf65c..0ab5e653f5 100644 --- a/src/core/scene.js +++ b/src/core/scene.js @@ -2,7 +2,7 @@ import Engine from './engine'; import { LAYER_MAP } from '../layer'; import Base from './base'; import LoadImage from './image'; -import WorkerPool from './worker'; +// import WorkerPool from './worker'; // import { MapProvider } from '../map/AMap'; import { getMap } from '../map/index'; import Global from '../global'; @@ -22,7 +22,7 @@ export default class Scene extends Base { _initEngine(mapContainer) { this._engine = new Engine(mapContainer, this); this._engine.run(); - this.workerPool = new WorkerPool(); + // this.workerPool = new WorkerPool(); compileBuiltinModules(); } // 为pickup场景添加 object 对象 diff --git a/src/layer/index.js b/src/layer/index.js index f7754776e2..ea30bf91e7 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -4,14 +4,14 @@ import PointLayer from './pointLayer'; import LineLayer from './lineLayer'; import ImageLayer from './imageLayer'; import RasterLayer from './rasterLayer'; -import HeatmapLayer from './heatmapLayer'; +// import HeatmapLayer from './heatmapLayer'; registerLayer('PolygonLayer', PolygonLayer); registerLayer('PointLayer', PointLayer); registerLayer('LineLayer', LineLayer); registerLayer('ImageLayer', ImageLayer); registerLayer('RasterLayer', RasterLayer); -registerLayer('HeatmapLayer', HeatmapLayer); +// registerLayer('HeatmapLayer', HeatmapLayer); export { LAYER_MAP } from './factory'; diff --git a/src/worker/geojsonSourceWorker.js b/src/worker/geojsonSourceWorker.js deleted file mode 100644 index 139597f9cb..0000000000 --- a/src/worker/geojsonSourceWorker.js +++ /dev/null @@ -1,2 +0,0 @@ - - From 16b5fd3a11ace354ebbce84186b7578456931781 Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 1 Mar 2019 13:09:41 +0800 Subject: [PATCH 6/7] fix layer zoom --- demos/grid.html | 4 +-- demos/heatmap.html | 2 +- demos/hexgon.html | 2 +- src/core/layer.js | 4 +-- src/geom/buffer/heatmap/heatmap.js | 2 +- src/layer/index.js | 4 +-- src/layer/pointLayer.js | 48 +++++++++++++++--------------- 7 files changed, 33 insertions(+), 33 deletions(-) diff --git a/demos/grid.html b/demos/grid.html index 94c2000bb9..7b85b6cd87 100644 --- a/demos/grid.html +++ b/demos/grid.html @@ -29,7 +29,7 @@ const scene = new L7.Scene({ }); scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => { - var layer = scene.HeatMapLayer({ + var layer = scene.HeatmapLayer({ zIndex: 2 }) .source(data, { @@ -59,7 +59,7 @@ scene.on('loaded', () => { } ] }) - .shape('gird') + .shape('grid') .style({ coverage: 0.8 }) diff --git a/demos/heatmap.html b/demos/heatmap.html index 7d6538e09d..23a2d6464a 100644 --- a/demos/heatmap.html +++ b/demos/heatmap.html @@ -27,7 +27,7 @@ const scene = new L7.Scene({ }); window.scene = scene; scene.on('loaded', () => { - $.get('./data/earthquakes.geojson', data => { + $.get('https://gw.alipayobjects.com/os/basement_prod/08c6ea00-dc5f-4bb0-b0b5-52bde5edf0a3.json', data => { scene.HeatmapLayer({ zIndex: 2 }) diff --git a/demos/hexgon.html b/demos/hexgon.html index ce5ed92af9..3cc2da6a73 100644 --- a/demos/hexgon.html +++ b/demos/hexgon.html @@ -29,7 +29,7 @@ const scene = new L7.Scene({ }); scene.on('loaded', () => { $.get('https://gw.alipayobjects.com/os/basement_prod/7359a5e9-3c5e-453f-b207-bc892fb23b84.csv', data => { - var layer = scene.HeatMapLayer({ + var layer = scene.HeatmapLayer({ zIndex: 2 }) .source(data, { diff --git a/src/core/layer.js b/src/core/layer.js index 92dda815fd..9cad42e7f2 100644 --- a/src/core/layer.js +++ b/src/core/layer.js @@ -84,8 +84,8 @@ export default class Layer extends Base { object.onBeforeRender = () => { const zoom = this.scene.getZoom(); - // object.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime()); - // object.material.setUniformsValue('u_zoom', zoom); + object.material.setUniformsValue('u_time', this.scene._engine.clock.getElapsedTime()); + object.material.setUniformsValue('u_zoom', zoom); this._preRender(); }; diff --git a/src/geom/buffer/heatmap/heatmap.js b/src/geom/buffer/heatmap/heatmap.js index c915b5dfa4..dac3f1aca0 100644 --- a/src/geom/buffer/heatmap/heatmap.js +++ b/src/geom/buffer/heatmap/heatmap.js @@ -12,7 +12,7 @@ export default class HeatmapBuffer extends BufferBase { // const indices = []; // 组织顶点数据 - data.forEach((d, index) => { + data.forEach(d => { // const totalIndex = index * 4; const coord = d.coordinates; const weight = d.size; diff --git a/src/layer/index.js b/src/layer/index.js index ea30bf91e7..f7754776e2 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -4,14 +4,14 @@ import PointLayer from './pointLayer'; import LineLayer from './lineLayer'; import ImageLayer from './imageLayer'; import RasterLayer from './rasterLayer'; -// import HeatmapLayer from './heatmapLayer'; +import HeatmapLayer from './heatmapLayer'; registerLayer('PolygonLayer', PolygonLayer); registerLayer('PointLayer', PointLayer); registerLayer('LineLayer', LineLayer); registerLayer('ImageLayer', ImageLayer); registerLayer('RasterLayer', RasterLayer); -// registerLayer('HeatmapLayer', HeatmapLayer); +registerLayer('HeatmapLayer', HeatmapLayer); export { LAYER_MAP } from './factory'; diff --git a/src/layer/pointLayer.js b/src/layer/pointLayer.js index 4ff4417f64..7c8d7abfaa 100644 --- a/src/layer/pointLayer.js +++ b/src/layer/pointLayer.js @@ -41,33 +41,33 @@ export default class PointLayer extends Layer { switch (pointShapeType) { case 'fill' :// 填充图形 - { - if (fill !== 'none') { // 是否填充 - const attributes = PointBuffer.FillBuffer(this.layerData, style); - const meshfill = drawPoint.DrawFill(attributes, this.get('styleOptions')); - this.add(meshfill); + { + if (fill !== 'none') { // 是否填充 + const attributes = PointBuffer.FillBuffer(this.layerData, style); + const meshfill = drawPoint.DrawFill(attributes, this.get('styleOptions')); + this.add(meshfill); + } + if (stroke !== 'none') { // 是否绘制边界 + const lineAttribute = PointBuffer.StrokeBuffer(this.layerData, style); + const meshStroke = drawPoint.DrawStroke(lineAttribute, this.get('styleOptions')); + this.add(meshStroke, 'line'); + } + break; } - if (stroke !== 'none') { // 是否绘制边界 - const lineAttribute = PointBuffer.StrokeBuffer(this.layerData, style); - const meshStroke = drawPoint.DrawStroke(lineAttribute, this.get('styleOptions')); - this.add(meshStroke, 'line'); - } - break; - } case 'image':// 绘制图片标注 - { - const imageAttribute = PointBuffer.ImageBuffer(this.layerData, { imagePos: this.scene.image.imagePos }); - const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture }); - this.add(imageMesh); - break; - } + { + const imageAttribute = PointBuffer.ImageBuffer(this.layerData, { imagePos: this.scene.image.imagePos }); + const imageMesh = drawPoint.DrawImage(imageAttribute, { ...style, texture: this.scene.image.texture }); + this.add(imageMesh); + break; + } case 'normal' : // 原生点 - { - const normalAttribute = PointBuffer.NormalBuffer(this.layerData, style); - const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style); - this.add(normalPointMesh); - break; - } + { + const normalAttribute = PointBuffer.NormalBuffer(this.layerData, style); + const normalPointMesh = drawPoint.DrawNormal(normalAttribute, style); + this.add(normalPointMesh); + break; + } default: return null; } From c2bba65c84bbb68ac4c41d885e0e92c87f952e1c Mon Sep 17 00:00:00 2001 From: thinkinggis Date: Fri, 1 Mar 2019 15:00:48 +0800 Subject: [PATCH 7/7] fix package --- package.json | 3 ++- src/index.js | 8 +------- src/layer/render/polygon/drawAnimate.js | 1 - 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index bf6a16b346..435edf89da 100755 --- a/package.json +++ b/package.json @@ -89,7 +89,8 @@ }, "pre-commit": { "run": [ - "lint" + "lint", + "test" ], "silent": false }, diff --git a/src/index.js b/src/index.js index ab6962277f..f791d2df22 100755 --- a/src/index.js +++ b/src/index.js @@ -4,14 +4,8 @@ import Scene from './core/scene'; import Global from './global'; const version = Global.version; -const track = function(enable) { - Global.trackable = enable; -}; -import './track'; export { version, - Scene, - track - + Scene }; diff --git a/src/layer/render/polygon/drawAnimate.js b/src/layer/render/polygon/drawAnimate.js index 534a96ea7d..e8a4883bb5 100644 --- a/src/layer/render/polygon/drawAnimate.js +++ b/src/layer/render/polygon/drawAnimate.js @@ -21,7 +21,6 @@ export default function DrawAnimate(attributes, style) { ANIMATE: true }); const fillPolygonMesh = new THREE.Mesh(geometry, material); - this.fillPolygonMesh = fillPolygonMesh; return fillPolygonMesh; }