mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'master' into l7-draw
This commit is contained in:
thinkinggis
commit
bb1755b80d
|
|
@ -3,6 +3,12 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- 修复颜色纹理取色问题 & 图片标注默认颜色问题 ([9d6b198](https://github.com/antvis/L7/commit/9d6b198f76b44c55ce0a094c6649c9e4130a398b))
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
### Bug Fixes
|
||||
|
|
|
|||
|
|
@ -6,6 +6,10 @@
|
|||
|
||||
[GitHub](https://github.com/antvis/L7)
|
||||
|
||||
```bash
|
||||
git clone https://github.com/antvis/L7 --depth=1
|
||||
```
|
||||
|
||||
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 专注数据可视化化表达，通过颜色、大小、纹理，方向，体积等视觉变量设置实现从数据到信息清晰，有效的表达。
|
||||
|
||||
L7 能够满足常见的地图图表，BI 系统的可视化分析、以及 GIS，交通，电力，国土，农业，城市等领域的空间信息管理，分析等应用系统开发需求。
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-component
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-component
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-component",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.1.5",
|
||||
"@antv/l7-utils": "^2.1.5",
|
||||
"@antv/l7-core": "^2.1.7",
|
||||
"@antv/l7-utils": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"eventemitter3": "^4.0.0",
|
||||
"inversify": "^5.0.1",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-core
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-core",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-utils": "^2.1.5",
|
||||
"@antv/l7-utils": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/tiny-sdf": "^1.1.1",
|
||||
"ajv": "^6.10.2",
|
||||
|
|
|
|||
|
|
@ -112,9 +112,9 @@ export default class PickingService implements IPickingService {
|
|||
const xInDevicePixel = x * window.devicePixelRatio;
|
||||
const yInDevicePixel = y * window.devicePixelRatio;
|
||||
if (
|
||||
xInDevicePixel > width ||
|
||||
xInDevicePixel > width - 1 * window.devicePixelRatio ||
|
||||
xInDevicePixel < 0 ||
|
||||
yInDevicePixel > height ||
|
||||
yInDevicePixel > height - 1 * window.devicePixelRatio ||
|
||||
yInDevicePixel < 0
|
||||
) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-draw
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-draw",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "L7 Draw moudules",
|
||||
"keywords": [],
|
||||
"author": "thinkinggis <lzx199065@gmail.com>",
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7": "^2.1.5",
|
||||
"@antv/l7": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@turf/circle": "^6.0.1",
|
||||
"@turf/distance": "^6.0.1",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "A Large-scale WebGL-powered Geospatial Data Visualization",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,11 +24,11 @@
|
|||
"author": "antv",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.1.5",
|
||||
"@antv/l7-core": "^2.1.5",
|
||||
"@antv/l7-layers": "^2.1.5",
|
||||
"@antv/l7-maps": "^2.1.5",
|
||||
"@antv/l7-scene": "^2.1.5",
|
||||
"@antv/l7-component": "^2.1.7",
|
||||
"@antv/l7-core": "^2.1.7",
|
||||
"@antv/l7-layers": "^2.1.7",
|
||||
"@antv/l7-maps": "^2.1.7",
|
||||
"@antv/l7-scene": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7"
|
||||
},
|
||||
"gitHead": "a5d354b66873f700730248d015c5e539c54b34b7",
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@ export * from '@antv/l7-scene';
|
|||
export * from '@antv/l7-maps';
|
||||
export * from '@antv/l7-layers';
|
||||
export * from '@antv/l7-component';
|
||||
export const version = '2.1.5';
|
||||
export const version = '2.1.6';
|
||||
|
|
|
|||
|
|
@ -3,6 +3,17 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复颜色纹理取色问题 & 图片标注默认颜色问题 ([9d6b198](https://github.com/antvis/L7/commit/9d6b198f76b44c55ce0a094c6649c9e4130a398b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-layers
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-layers",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "L7's collection of built-in layers",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-core": "^2.1.5",
|
||||
"@antv/l7-source": "^2.1.5",
|
||||
"@antv/l7-utils": "^2.1.5",
|
||||
"@antv/l7-core": "^2.1.7",
|
||||
"@antv/l7-source": "^2.1.7",
|
||||
"@antv/l7-utils": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/martini": "^0.1.0",
|
||||
"@turf/meta": "^6.0.2",
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ export default class CityBuildModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 10 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -15,11 +15,6 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
|
|||
public renderModels() {
|
||||
const shape = this.getModelType();
|
||||
if (shape === 'heatmap') {
|
||||
// if (this.layerModelNeedUpdate) {
|
||||
// this.layerModel.buildModels();
|
||||
// this.buildModels();
|
||||
// this.layerModelNeedUpdate = false;
|
||||
// }
|
||||
if (this.layerModel) {
|
||||
this.layerModel.render(); // 独立的渲染流程
|
||||
}
|
||||
|
|
|
|||
|
|
@ -82,13 +82,14 @@ export default class HeatMapModel extends BaseModel {
|
|||
// 初始化密度图纹理
|
||||
this.heatmapFramerBuffer = createFramebuffer({
|
||||
color: createTexture2D({
|
||||
width,
|
||||
height,
|
||||
width: Math.floor(width / 4),
|
||||
height: Math.floor(height / 4),
|
||||
wrapS: gl.CLAMP_TO_EDGE,
|
||||
wrapT: gl.CLAMP_TO_EDGE,
|
||||
min: gl.LINEAR,
|
||||
mag: gl.LINEAR,
|
||||
}),
|
||||
depth: false,
|
||||
});
|
||||
|
||||
// 初始化颜色纹理
|
||||
|
|
@ -99,9 +100,9 @@ export default class HeatMapModel extends BaseModel {
|
|||
height: imageData.height,
|
||||
wrapS: gl.CLAMP_TO_EDGE,
|
||||
wrapT: gl.CLAMP_TO_EDGE,
|
||||
min: gl.LINEAR,
|
||||
mag: gl.LINEAR,
|
||||
flipY: true,
|
||||
min: gl.NEAREST,
|
||||
mag: gl.NEAREST,
|
||||
flipY: false,
|
||||
});
|
||||
|
||||
return [this.intensityModel, this.colorModel];
|
||||
|
|
@ -149,7 +150,7 @@ export default class HeatMapModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size = 2 } = feature;
|
||||
const { size = 1 } = feature;
|
||||
return [size as number];
|
||||
},
|
||||
},
|
||||
|
|
@ -168,9 +169,9 @@ export default class HeatMapModel extends BaseModel {
|
|||
enable: true,
|
||||
func: {
|
||||
srcRGB: gl.ONE,
|
||||
srcAlpha: gl.ONE_MINUS_SRC_ALPHA,
|
||||
srcAlpha: 1,
|
||||
dstRGB: gl.ONE,
|
||||
dstAlpha: gl.ONE_MINUS_SRC_ALPHA,
|
||||
dstAlpha: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -216,15 +217,7 @@ export default class HeatMapModel extends BaseModel {
|
|||
depth: {
|
||||
enable: false,
|
||||
},
|
||||
blend: {
|
||||
enable: true,
|
||||
func: {
|
||||
srcRGB: gl.SRC_ALPHA,
|
||||
srcAlpha: 1,
|
||||
dstRGB: gl.ONE_MINUS_SRC_ALPHA,
|
||||
dstAlpha: 1,
|
||||
},
|
||||
},
|
||||
blend: this.getBlend(),
|
||||
count: 6,
|
||||
elements: createElements({
|
||||
data: [0, 2, 1, 2, 3, 1],
|
||||
|
|
@ -283,7 +276,7 @@ export default class HeatMapModel extends BaseModel {
|
|||
private build3dHeatMap() {
|
||||
const { getViewportSize } = this.rendererService;
|
||||
const { width, height } = getViewportSize();
|
||||
const triangulation = heatMap3DTriangulation(width / 2.0, height / 2.0);
|
||||
const triangulation = heatMap3DTriangulation(width / 4.0, height / 4.0);
|
||||
this.shaderModuleService.registerModule('heatmap3dColor', {
|
||||
vs: heatmap3DVert,
|
||||
fs: heatmap3DFrag,
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@ varying float v_intensity;
|
|||
void main(){
|
||||
|
||||
float intensity = texture2D(u_texture, v_texCoord).r;
|
||||
vec2 ramp_pos = vec2(
|
||||
fract(16.0 * (1.0 - v_intensity)),
|
||||
floor(16.0 * (1.0 - v_intensity)) / 16.0);
|
||||
// vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
|
||||
vec4 color = texture2D(u_colorTexture,ramp_pos);
|
||||
vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
|
||||
gl_FragColor = color;
|
||||
gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
|
||||
// gl_FragColor.a = color.a * smoothstep(0.1,0.2,intensity)* u_opacity;
|
||||
gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ vec2 toBezier(float t, vec4 p){
|
|||
void main() {
|
||||
v_texCoord = a_Uv;
|
||||
|
||||
vec2 pos = 1.8 * (a_Uv * vec2(2.0) - vec2(1.0));
|
||||
vec2 pos =(a_Uv * vec2(2.0) - vec2(1.0));
|
||||
|
||||
|
||||
vec4 p1 = vec4(pos, 0.0, 1.0);
|
||||
|
|
@ -40,6 +40,6 @@ void main() {
|
|||
|
||||
v_intensity = texture2D(u_texture, v_texCoord).r;
|
||||
fh = toBezier(v_intensity, b).y;
|
||||
gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * 50., 1.0));
|
||||
gl_Position = project_common_position_to_clipspace(vec4(position.xy, fh * project_pixel(50.), 1.0));
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,12 +6,8 @@ varying float v_intensity;
|
|||
|
||||
void main(){
|
||||
float intensity = texture2D(u_texture, v_texCoord).r;
|
||||
vec2 ramp_pos = vec2(
|
||||
fract(16.0 * (1.0 - intensity)),
|
||||
floor(16.0 * (1.0 - intensity)) / 16.0);
|
||||
// vec4 color = texture2D(u_colorTexture,vec2(0.5,1.0-intensity));
|
||||
vec4 color = texture2D(u_colorTexture,ramp_pos);
|
||||
gl_FragColor = color;
|
||||
gl_FragColor.a = color.a * smoothstep(0.,0.05,intensity) * u_opacity;
|
||||
vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
|
||||
gl_FragColor =color;
|
||||
gl_FragColor.a = color.a * smoothstep(0.,0.1,intensity) * u_opacity;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,9 @@ precision highp float;
|
|||
uniform float u_intensity;
|
||||
varying float v_weight;
|
||||
varying vec2 v_extrude;
|
||||
|
||||
|
||||
#define GAUSS_COEF 0.3989422804014327
|
||||
void main(){
|
||||
float GAUSS_COEF = 0.3989422804014327;
|
||||
float d = -0.5 * 3.0 * 3.0 * dot(v_extrude, v_extrude);
|
||||
float val = v_weight * u_intensity * GAUSS_COEF * exp(d);
|
||||
gl_FragColor = vec4(val, val, val, val);
|
||||
gl_FragColor = vec4(val, 1., 1., 1.);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,12 @@ varying vec2 v_extrude;
|
|||
varying float v_weight;
|
||||
uniform mat4 u_ModelMatrix;
|
||||
|
||||
#define GAUSS_COEF 0.3989422804014327
|
||||
|
||||
#pragma include "projection"
|
||||
|
||||
void main(){
|
||||
v_weight = a_Size;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ uniform sampler2D u_texture;
|
|||
varying vec2 v_texCoord;
|
||||
varying float v_intensity;
|
||||
void main() {
|
||||
v_texCoord = a_Uv;
|
||||
v_texCoord = a_Uv;
|
||||
v_intensity = texture2D(u_texture, v_texCoord).r;
|
||||
gl_Position = vec4(a_Position.xy, 0, 1.);
|
||||
gl_Position = vec4(a_Position.xy, 0, 1.);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default class ArcModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 1 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default class Arc3DModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 1 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default class GreatCircleModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 1 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -67,8 +67,9 @@ export default class DataMappingPlugin implements ILayerPlugin {
|
|||
),
|
||||
);
|
||||
}
|
||||
|
||||
this.logger.debug('remapping finished');
|
||||
// 处理文本更新
|
||||
layer.emit('remapping', null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -88,11 +89,6 @@ export default class DataMappingPlugin implements ILayerPlugin {
|
|||
return this.applyAttributeMapping(filter, record)[0];
|
||||
});
|
||||
}
|
||||
// TODO: FIXME
|
||||
// if (!filterData) {
|
||||
// return;
|
||||
// }
|
||||
// mapping with source data
|
||||
layer.setEncodedData(this.mapping(attributes, filterData));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@ export default class RegisterStyleAttributePlugin implements ILayerPlugin {
|
|||
size: 4,
|
||||
update: (feature: IEncodeFeature, featureIdx: number) => {
|
||||
const { color } = feature;
|
||||
return !color || !color.length ? [0, 0, 0, 0] : color;
|
||||
return !color || !color.length ? [1, 1, 1, 1] : color;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ export default class UpdateModelPlugin implements ILayerPlugin {
|
|||
layer.hooks.beforeRender.tap('UpdateModelPlugin', () => {
|
||||
// 处理文本更新
|
||||
if (layer.layerModel) {
|
||||
// console.log(layer.layerModelNeedUpdate);
|
||||
layer.layerModel.needUpdate();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export default class FillModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 5 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export default class ImageModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 5 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export default class NormalModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 1 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -36,44 +36,56 @@ interface IPointTextLayerStyleOptions {
|
|||
textAllowOverlap: boolean;
|
||||
}
|
||||
export function TextTriangulation(feature: IEncodeFeature) {
|
||||
const centroid = feature.centroid as number[]; // 计算中心点
|
||||
const { glyphQuads } = feature;
|
||||
// @ts-ignore
|
||||
const that = this as TextModel;
|
||||
const id = feature.id as number;
|
||||
const vertices: number[] = [];
|
||||
const indices: number[] = [];
|
||||
|
||||
if (!that.glyphInfoMap || !that.glyphInfoMap[id]) {
|
||||
return {
|
||||
vertices: [], // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
|
||||
indices: [],
|
||||
size: 7,
|
||||
};
|
||||
}
|
||||
const centroid = that.glyphInfoMap[id].centroid as number[]; // 计算中心点
|
||||
const coord =
|
||||
centroid.length === 2 ? [centroid[0], centroid[1], 0] : centroid;
|
||||
glyphQuads.forEach((quad: IGlyphQuad, index: number) => {
|
||||
vertices.push(
|
||||
...coord,
|
||||
quad.tex.x,
|
||||
quad.tex.y + quad.tex.height,
|
||||
quad.tl.x,
|
||||
quad.tl.y,
|
||||
...coord,
|
||||
quad.tex.x + quad.tex.width,
|
||||
quad.tex.y + quad.tex.height,
|
||||
quad.tr.x,
|
||||
quad.tr.y,
|
||||
...coord,
|
||||
quad.tex.x + quad.tex.width,
|
||||
quad.tex.y,
|
||||
quad.br.x,
|
||||
quad.br.y,
|
||||
...coord,
|
||||
quad.tex.x,
|
||||
quad.tex.y,
|
||||
quad.bl.x,
|
||||
quad.bl.y,
|
||||
);
|
||||
indices.push(
|
||||
0 + index * 4,
|
||||
1 + index * 4,
|
||||
2 + index * 4,
|
||||
2 + index * 4,
|
||||
3 + index * 4,
|
||||
0 + index * 4,
|
||||
);
|
||||
});
|
||||
that.glyphInfoMap[id].glyphQuads.forEach(
|
||||
(quad: IGlyphQuad, index: number) => {
|
||||
vertices.push(
|
||||
...coord,
|
||||
quad.tex.x,
|
||||
quad.tex.y + quad.tex.height,
|
||||
quad.tl.x,
|
||||
quad.tl.y,
|
||||
...coord,
|
||||
quad.tex.x + quad.tex.width,
|
||||
quad.tex.y + quad.tex.height,
|
||||
quad.tr.x,
|
||||
quad.tr.y,
|
||||
...coord,
|
||||
quad.tex.x + quad.tex.width,
|
||||
quad.tex.y,
|
||||
quad.br.x,
|
||||
quad.br.y,
|
||||
...coord,
|
||||
quad.tex.x,
|
||||
quad.tex.y,
|
||||
quad.bl.x,
|
||||
quad.bl.y,
|
||||
);
|
||||
indices.push(
|
||||
0 + index * 4,
|
||||
1 + index * 4,
|
||||
2 + index * 4,
|
||||
2 + index * 4,
|
||||
3 + index * 4,
|
||||
0 + index * 4,
|
||||
);
|
||||
},
|
||||
);
|
||||
return {
|
||||
vertices, // [ x, y, z, tex.x,tex.y, offset.x. offset.y]
|
||||
indices,
|
||||
|
|
@ -82,21 +94,20 @@ export function TextTriangulation(feature: IEncodeFeature) {
|
|||
}
|
||||
|
||||
export default class TextModel extends BaseModel {
|
||||
private texture: ITexture2D;
|
||||
private glyphInfo: IEncodeFeature[];
|
||||
private currentZoom: number = -1;
|
||||
private extent: [[number, number], [number, number]];
|
||||
private textureHeight: number = 0;
|
||||
private textCount: number = 0;
|
||||
private preTextStyle: Partial<IPointTextLayerStyleOptions> = {};
|
||||
private glyphInfoMap: {
|
||||
public glyphInfo: IEncodeFeature[];
|
||||
public glyphInfoMap: {
|
||||
[key: string]: {
|
||||
shaping: any;
|
||||
glyphQuads: IGlyphQuad[];
|
||||
centroid: number[];
|
||||
};
|
||||
} = {};
|
||||
|
||||
private texture: ITexture2D;
|
||||
private currentZoom: number = -1;
|
||||
private extent: [[number, number], [number, number]];
|
||||
private textureHeight: number = 0;
|
||||
private textCount: number = 0;
|
||||
private preTextStyle: Partial<IPointTextLayerStyleOptions> = {};
|
||||
public getUninforms(): IModelUniform {
|
||||
const {
|
||||
opacity = 1.0,
|
||||
|
|
@ -130,6 +141,11 @@ export default class TextModel extends BaseModel {
|
|||
}
|
||||
|
||||
public buildModels(): IModel[] {
|
||||
this.layer.on('remapping', () => {
|
||||
this.initGlyph();
|
||||
this.updateTexture();
|
||||
this.reBuildModel();
|
||||
});
|
||||
this.extent = this.textExtent();
|
||||
const {
|
||||
textAnchor = 'center',
|
||||
|
|
@ -147,7 +163,7 @@ export default class TextModel extends BaseModel {
|
|||
moduleName: 'pointText',
|
||||
vertexShader: textVert,
|
||||
fragmentShader: textFrag,
|
||||
triangulation: TextTriangulation,
|
||||
triangulation: TextTriangulation.bind(this),
|
||||
depth: { enable: false },
|
||||
blend: this.getBlend(),
|
||||
}),
|
||||
|
|
@ -166,17 +182,7 @@ export default class TextModel extends BaseModel {
|
|||
(!textAllowOverlap && (Math.abs(this.currentZoom - zoom) > 1 || !flag)) ||
|
||||
textAllowOverlap !== this.preTextStyle.textAllowOverlap
|
||||
) {
|
||||
this.filterGlyphs();
|
||||
this.layer.models = [
|
||||
this.layer.buildLayerModel({
|
||||
moduleName: 'pointText',
|
||||
vertexShader: textVert,
|
||||
fragmentShader: textFrag,
|
||||
triangulation: TextTriangulation,
|
||||
depth: { enable: false },
|
||||
blend: this.getBlend(),
|
||||
}),
|
||||
];
|
||||
this.reBuildModel();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
|
@ -225,7 +231,7 @@ export default class TextModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 12 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
@ -314,13 +320,11 @@ export default class TextModel extends BaseModel {
|
|||
feature.shaping = shaping;
|
||||
feature.glyphQuads = glyphQuads;
|
||||
feature.centroid = calculteCentroid(coordinates);
|
||||
if (id) {
|
||||
this.glyphInfoMap[id] = {
|
||||
shaping,
|
||||
glyphQuads,
|
||||
centroid: calculteCentroid(coordinates),
|
||||
};
|
||||
}
|
||||
this.glyphInfoMap[id as number] = {
|
||||
shaping,
|
||||
glyphQuads,
|
||||
centroid: calculteCentroid(coordinates),
|
||||
};
|
||||
return feature;
|
||||
});
|
||||
}
|
||||
|
|
@ -333,9 +337,11 @@ export default class TextModel extends BaseModel {
|
|||
textAllowOverlap = false,
|
||||
} = this.layer.getLayerConfig() as IPointTextLayerStyleOptions;
|
||||
if (textAllowOverlap) {
|
||||
this.layer.setEncodedData(this.glyphInfo);
|
||||
// 如果允许文本覆盖
|
||||
// this.layer.setEncodedData(this.glyphInfo);
|
||||
return;
|
||||
}
|
||||
this.glyphInfoMap = {};
|
||||
this.currentZoom = this.mapService.getZoom();
|
||||
this.extent = this.textExtent();
|
||||
const { width, height } = this.rendererService.getViewportSize();
|
||||
|
|
@ -362,7 +368,11 @@ export default class TextModel extends BaseModel {
|
|||
return false;
|
||||
}
|
||||
});
|
||||
this.layer.setEncodedData(filterData);
|
||||
filterData.forEach((item) => {
|
||||
// @ts-ignore
|
||||
this.glyphInfoMap[item.id as number] = item;
|
||||
});
|
||||
// this.layer.setEncodedData(filterData);
|
||||
}
|
||||
/**
|
||||
* 初始化文字布局
|
||||
|
|
@ -389,15 +399,14 @@ export default class TextModel extends BaseModel {
|
|||
});
|
||||
}
|
||||
|
||||
private rebuildModel() {
|
||||
// 避让 anchor,等属性变化时需要重新构建model
|
||||
private reBuildModel() {
|
||||
this.filterGlyphs();
|
||||
return [
|
||||
this.layer.models = [
|
||||
this.layer.buildLayerModel({
|
||||
moduleName: 'pointText',
|
||||
vertexShader: textVert,
|
||||
fragmentShader: textFrag,
|
||||
triangulation: TextTriangulation,
|
||||
triangulation: TextTriangulation.bind(this),
|
||||
depth: { enable: false },
|
||||
blend: this.getBlend(),
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ float r = 1.0 - smoothstep(radius-(radius*0.01),
|
|||
radius+(radius*0.01),
|
||||
distanceSqrd);
|
||||
vec4 textureColor=texture2D(u_texture,pos);
|
||||
if(v_color == vec4(0.)){
|
||||
if(v_color == vec4(1.0)){
|
||||
gl_FragColor= vec4(textureColor.xyz, textureColor.w);
|
||||
}else {
|
||||
gl_FragColor= step(0.01, textureColor.z) * v_color;
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default class ExtrudeModel extends BaseModel {
|
|||
vertex: number[],
|
||||
attributeIdx: number,
|
||||
) => {
|
||||
const { size } = feature;
|
||||
const { size = 10 } = feature;
|
||||
return Array.isArray(size) ? [size[0]] : [size as number];
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export default class RasterModel extends BaseModel {
|
|||
data: imageData.data,
|
||||
width: imageData.width,
|
||||
height: imageData.height,
|
||||
flipY: true,
|
||||
flipY: false,
|
||||
});
|
||||
return [
|
||||
this.layer.buildLayerModel({
|
||||
|
|
@ -121,7 +121,7 @@ export default class RasterModel extends BaseModel {
|
|||
data: imageData.data,
|
||||
width: imageData.width,
|
||||
height: imageData.height,
|
||||
flipY: true,
|
||||
flipY: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export default class RasterLayer extends BaseLayer<IRasterLayerStyleOptions> {
|
|||
data: imageData.data,
|
||||
width: imageData.width,
|
||||
height: imageData.height,
|
||||
flipY: true,
|
||||
flipY: false,
|
||||
});
|
||||
this.models = [this.buildRasterModel()];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export default class Raster2dLayer extends BaseLayer<IRasterLayerStyleOptions> {
|
|||
data: imageData.data,
|
||||
width: imageData.width,
|
||||
height: imageData.height,
|
||||
flipY: true,
|
||||
flipY: false,
|
||||
});
|
||||
this.models = [
|
||||
this.buildLayerModel({
|
||||
|
|
|
|||
|
|
@ -19,10 +19,9 @@ void main() {
|
|||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
else {
|
||||
float normalisedValue =(value - u_domain[0]) / (u_domain[1] -u_domain[0]);
|
||||
vec2 ramp_pos = vec2(
|
||||
fract(16.0 * (1.0 - normalisedValue)),
|
||||
floor(16.0 * (1.0 - normalisedValue)) / 16.0);
|
||||
gl_FragColor = texture2D(u_colorTexture, ramp_pos);
|
||||
vec4 color = texture2D(u_colorTexture,vec2(normalisedValue, 0));
|
||||
gl_FragColor = color;
|
||||
gl_FragColor.a = gl_FragColor.a * u_opacity ;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -24,10 +24,7 @@ void main() {
|
|||
// v_texCoord = a_Uv;
|
||||
value = clamp(value,u_min,u_max);
|
||||
float value1 = (value - u_min) / (u_max -u_min);
|
||||
vec2 ramp_pos = vec2(
|
||||
fract(16.0 * (1.0 - value1)),
|
||||
floor(16.0 * (1.0 - value1)) / 16.0);
|
||||
v_color = texture2D(u_colorTexture,ramp_pos);
|
||||
vec4 color = texture2D(u_colorTexture,vec2(intensity, 0));
|
||||
|
||||
// if(uv.x > 1.0 || uv.y > 1.0) {
|
||||
// v_color = vec4(0.);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-maps
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-maps
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-maps",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.1.5",
|
||||
"@antv/l7-utils": "^2.1.5",
|
||||
"@antv/l7-core": "^2.1.7",
|
||||
"@antv/l7-utils": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@types/amap-js-api": "^1.4.6",
|
||||
"gl-matrix": "^3.1.0",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-react
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-react
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-react",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
"author": "lzxue",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7": "^2.1.5",
|
||||
"@antv/l7-maps": "^2.1.5",
|
||||
"@antv/l7": "^2.1.7",
|
||||
"@antv/l7-maps": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"load-styles": "^2.0.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-renderer
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-renderer
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-renderer",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
"gl": "^4.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/l7-core": "^2.1.5",
|
||||
"@antv/l7-core": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-scene
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-scene
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-scene",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -22,11 +22,11 @@
|
|||
"author": "xiaoiver",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/l7-component": "^2.1.5",
|
||||
"@antv/l7-core": "^2.1.5",
|
||||
"@antv/l7-maps": "^2.1.5",
|
||||
"@antv/l7-renderer": "^2.1.5",
|
||||
"@antv/l7-utils": "^2.1.5",
|
||||
"@antv/l7-component": "^2.1.7",
|
||||
"@antv/l7-core": "^2.1.7",
|
||||
"@antv/l7-maps": "^2.1.7",
|
||||
"@antv/l7-renderer": "^2.1.7",
|
||||
"@antv/l7-utils": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"inversify": "^5.0.1",
|
||||
"mapbox-gl": "^1.2.1",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,14 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-source
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-source
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-source",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@antv/async-hook": "^2.1.0",
|
||||
"@antv/l7-core": "^2.1.5",
|
||||
"@antv/l7-utils": "^2.1.5",
|
||||
"@antv/l7-core": "^2.1.7",
|
||||
"@antv/l7-utils": "^2.1.7",
|
||||
"@babel/runtime": "^7.7.7",
|
||||
"@mapbox/geojson-rewind": "^0.4.0",
|
||||
"@turf/helpers": "^6.1.4",
|
||||
|
|
|
|||
|
|
@ -17,11 +17,9 @@ export default function json(data: IJsonData, cfg: IParserCfg): IParserData {
|
|||
coords = [parseFloat(col[x]), parseFloat(col[y])];
|
||||
} // 点数据
|
||||
if (x && y && x1 && y1) {
|
||||
// 弧线 或者线段
|
||||
coords = [
|
||||
[parseFloat(col[x]), parseFloat(col[y])],
|
||||
[parseFloat(col[x1]), parseFloat(col[y1])],
|
||||
];
|
||||
const from = [parseFloat(col[x]), parseFloat(col[y])];
|
||||
const to = [parseFloat(col[x1]), parseFloat(col[y1])];
|
||||
coords = [from, to];
|
||||
}
|
||||
if (coordinates) {
|
||||
let type = 'Polygon';
|
||||
|
|
|
|||
|
|
@ -3,6 +3,17 @@
|
|||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [2.1.7](https://github.com/antvis/L7/compare/v2.1.6...v2.1.7) (2020-03-26)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 修复颜色纹理取色问题 & 图片标注默认颜色问题 ([9d6b198](https://github.com/antvis/L7/commit/9d6b198f76b44c55ce0a094c6649c9e4130a398b))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [2.1.5](https://github.com/antvis/L7/compare/v2.1.4...v2.1.5) (2020-03-20)
|
||||
|
||||
**Note:** Version bump only for package @antv/l7-utils
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@antv/l7-utils",
|
||||
"version": "2.1.5",
|
||||
"version": "2.1.7",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ export function generateColorRamp(colorRamp: IColorRamp): ImageData {
|
|||
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
||||
canvas.width = 256;
|
||||
canvas.height = 1;
|
||||
const gradient = ctx.createLinearGradient(0, 0, 256, 0);
|
||||
const gradient = ctx.createLinearGradient(0, 0, 256, 1);
|
||||
let data = null;
|
||||
const min = colorRamp.positions[0];
|
||||
const max = colorRamp.positions[colorRamp.positions.length - 1];
|
||||
|
|
@ -49,5 +49,5 @@ export function generateColorRamp(colorRamp: IColorRamp): ImageData {
|
|||
ctx.fillRect(0, 0, 256, 1);
|
||||
data = new Uint8ClampedArray(ctx.getImageData(0, 0, 256, 1).data);
|
||||
|
||||
return new ImageData(data, 16, 16);
|
||||
return new ImageData(data, 256, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Column from './components/column';
|
|||
import DashLineDemo from './components/dash';
|
||||
import DataUpdate from './components/data_update';
|
||||
import HeatMapDemo from './components/HeatMap';
|
||||
import HeatMapDemo3D from './components/heatmap3d';
|
||||
import HexagonLayerDemo from './components/hexagon';
|
||||
import LightDemo from './components/light';
|
||||
import LineLayer from './components/Line';
|
||||
|
|
@ -39,6 +40,7 @@ storiesOf('图层', module)
|
|||
.add('3D弧线', () => <ArcLineDemo />)
|
||||
.add('2D弧线', () => <Arc2DLineDemo />)
|
||||
.add('热力图', () => <HeatMapDemo />)
|
||||
.add('热力图3D', () => <HeatMapDemo3D />)
|
||||
.add('网格热力图', () => <HexagonLayerDemo />)
|
||||
.add('栅格', () => <RasterLayerDemo />)
|
||||
.add('图片', () => <ImageLayerDemo />)
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export default class ArcLineDemo extends React.Component {
|
|||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/rmsportal/UEXQMifxtkQlYfChpPwT.txt',
|
||||
'https://gw.alipayobjects.com/os/bmw-prod/4ededeaa-f290-46b7-a042-08210433e8f9.csv',
|
||||
);
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
|
|
@ -36,24 +36,17 @@ export default class ArcLineDemo extends React.Component {
|
|||
y1: 'lat2',
|
||||
},
|
||||
})
|
||||
.size(1)
|
||||
.shape('arc3d')
|
||||
// .size(1)
|
||||
.shape('arc')
|
||||
.select({
|
||||
color: 'red',
|
||||
})
|
||||
.active({
|
||||
color: 'red',
|
||||
})
|
||||
.color('rgb(13,64,140)')
|
||||
.animate({
|
||||
enable: true,
|
||||
interval: 0.1,
|
||||
duration: 2,
|
||||
trailLength: 1.0,
|
||||
})
|
||||
// .color('rgb(13,64,140)')
|
||||
.style({
|
||||
lineType: 'dash',
|
||||
opacity: 0.5,
|
||||
opacity: 1,
|
||||
});
|
||||
scene.addLayer(lineLayer);
|
||||
scene.render();
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ export default class HeatMapLayerDemo extends React.Component {
|
|||
const layer = new HeatmapLayer();
|
||||
layer
|
||||
.source(data)
|
||||
.shape('heatmap')
|
||||
.shape('heatmap3D')
|
||||
.size('mag', [0, 1.0]) // weight映射通道
|
||||
.style({
|
||||
intensity: 2,
|
||||
|
|
@ -37,13 +37,13 @@ export default class HeatMapLayerDemo extends React.Component {
|
|||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#FF4818',
|
||||
'#F7B74A',
|
||||
'#FFF598',
|
||||
'#91EABC',
|
||||
'#2EA9A1',
|
||||
'#206C7C',
|
||||
].reverse(),
|
||||
'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.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import { HeatmapLayer, Scene } from '@antv/l7';
|
||||
import { Mapbox,GaodeMap } from '@antv/l7-maps';
|
||||
// @ts-ignore
|
||||
import * as React from 'react';
|
||||
|
||||
export default class HeatMapLayerDemo extends React.Component {
|
||||
// @ts-ignore
|
||||
private scene: Scene;
|
||||
|
||||
public componentWillUnmount() {
|
||||
this.scene.destroy();
|
||||
}
|
||||
|
||||
public async componentDidMount() {
|
||||
const response = await fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||
);
|
||||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
style: 'dark',
|
||||
pitch: 58.5,
|
||||
center: [111.8759, 30.6942],
|
||||
rotation: 0.519,
|
||||
zoom: 3.6116,
|
||||
}),
|
||||
});
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const layer = new HeatmapLayer({})
|
||||
.source(data)
|
||||
.size('capacity', [0, 1])
|
||||
.shape('heatmap3D')
|
||||
// weight映射通道
|
||||
.style({
|
||||
intensity: 10,
|
||||
radius: 5,
|
||||
opacity: 1.0,
|
||||
rampColors: {
|
||||
colors: [
|
||||
'#2E8AE6',
|
||||
'#69D1AB',
|
||||
'#DAF291',
|
||||
'#FFD591',
|
||||
'#FF7A45',
|
||||
'#CF1D49',
|
||||
],
|
||||
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
|
||||
},
|
||||
});
|
||||
scene.addLayer(layer);
|
||||
});
|
||||
});
|
||||
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<div
|
||||
id="map"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue