fix(demo): bugs

This commit is contained in:
thinkinggis 2019-11-14 23:32:45 +08:00
parent 8ef32ac590
commit 83684a2c07
30 changed files with 287 additions and 86 deletions

View File

@ -6,11 +6,13 @@
"demos": [
{
"filename": "grid.js",
"title": "网格热力图"
"title": "网格热力图",
"screenshot":""
},
{
"filename": "world.js",
"title": "世界电厂热力图"
"title": "世界电厂热力图",
"screenshot":""
}
]
}

View File

@ -6,11 +6,13 @@
"demos": [
{
"filename": "world3d.js",
"title": "经典热力图3D"
"title": "经典热力图3D",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*NxFPSrd9oscAAAAAAAAAAABkARQnAQ"
},
{
"filename": "world.js",
"title": "经典热力图2D"
"title": "经典热力图2D",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*9zUcSK07PHgAAAAAAAAAAABkARQnAQ"
}
]
}

View File

@ -4,11 +4,10 @@ const scene = new Scene({
id: 'map',
style: 'dark',
pitch: 0,
center: [103.693879, 34.38704],
center: [127.5671666579043,7.445038892195569],
type: 'mapbox',
zoom: 3.69,
zoom: 2.632456779444394
});
fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json')
.then((res) => res.json())
.then((data) => {
@ -21,7 +20,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842
radius: 20,
opacity: 1.0,
rampColors: {
colors: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
colors: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ].reverse(),
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
}
})

View File

@ -24,7 +24,7 @@ fetch('https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64
radius: 5,
opacity: 1.0,
rampColors: {
colors: [
colors:[
'#2E8AE6',
'#69D1AB',
'#DAF291',

View File

@ -65,9 +65,15 @@ const colorObj = {
'#5B8EF8', '#FCF6FA',
'#F5E4EF', '#F7CDDF',
'#ED9CBE', '#D1749B'
]
],
color4: [ '#421EB2', '#8C1EB2', '#F27DEB', '#FFF598', '#F7B74A', '#FF4818' ],
colors6: [ '#FBE0B2', '#F6BB91', '#F88E8B', '#5C6CE5', '#110A6C', '#0D0943' ],
colors5: [ '#F86A7E', '#F79794', '#D0A8AD', '#8596A4', '#0D7D9E', '#07485B' ],
colors11: [ '#005F6D', '#0F9EA3', '#B9CDC5', '#DF881C', '#AE571E', '#6C2C03' ],
colors7: [ '#D66A74', '#EF808B', '#F09FAF', '#B1C987', '#789676', '#636C58' ],
colors8: [ '#5E023A', '#C52C6A', '#F0C4E8', '#F7CAB8', '#7EBCA9', '#117D8D' ],
colors9: [ '#FF4818', '#F7B74A', '#FFF598', '#91EABC', '#2EA9A1', '#206C7C' ]
}
fetch(
'https://gw.alipayobjects.com/os/basement_prod/a1a8158d-6fe3-424b-8e50-694ccf61c4d7.csv',
)

View File

@ -5,7 +5,7 @@ const scene = new Scene({
pitch: 0,
type: 'mapbox',
style: 'dark',
center: [102.602992, 23.107329],
center: [0., 23.107329],
zoom: 0,
});

View File

@ -11,13 +11,14 @@
},
{
"filename": "arcCircle.js",
"title": "大圆弧线"
"filename": "arc.js",
"title": "弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
},
{
"filename": "arc.js",
"title": "弧线"
"filename": "arcCircle.js",
"title": "大圆弧线",
"screenshot": "https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*gdcqTa6UCsYAAAAAAAAAAABkARQnAQ"
}
]

View File

@ -0,0 +1,42 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [102.602992, 23.107329],
zoom: 14,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.size('ELEV', (h) => {
return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.color(
'ELEV',
[ '#E4682F',
'#FF8752',
'#FFA783',
'#FFBEA8',
'#FFDCD6',
'#EEF3FF',
'#C8D7F5',
'#A5C1FC',
'#7FA7F9',
'#5F8AE5' ].reverse()
)
scene.addLayer(layer);
console.log(layer);
});

View File

@ -0,0 +1,42 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'dark',
center: [102.602992, 23.107329],
zoom: 14,
});
fetch('https://gw.alipayobjects.com/os/rmsportal/ZVfOvhVCzwBkISNsuKCc.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.size('ELEV', (h) => {
return [h % 50 === 0 ? 1.0 : 0.5, (h -1300) *20 ];
})
.shape('line')
.scale('ELEV', {
type: 'quantize'
})
.color(
'ELEV',
[ '#E4682F',
'#FF8752',
'#FFA783',
'#FFBEA8',
'#FFDCD6',
'#EEF3FF',
'#C8D7F5',
'#A5C1FC',
'#7FA7F9',
'#5F8AE5' ].reverse()
)
scene.addLayer(layer);
console.log(layer);
});

View File

@ -0,0 +1,28 @@
import { Scene } from '@l7/scene';
import { LineLayer } from '@l7/layers'
const scene = new Scene({
id: 'map',
pitch: 0,
type: 'amap',
style: 'light',
center: [102.602992, 33.107329],
zoom: 3.5,
});
fetch('https://gw.alipayobjects.com/os/basement_prod/9f6afbcd-3aec-4a26-bd4a-2276d3439e0d.json')
.then((res) => res.json())
.then((data) => {
const layer =
new LineLayer({
})
.source(data)
.scale('value',{
type: 'quantile'
})
.size('value', [0.5, 1, 1.5, 2])
.shape('line')
.color('value', ['#FFF2E8', '#FFCEA7', '#F0A66C', '#CC464B', '#8A191A'])
scene.addLayer(layer);
console.log(layer);
});

View File

@ -0,0 +1,24 @@
{
"title": {
"zh": "线图层",
"en": "line"
},
"demos": [
{
"filename": "ele.js",
"title": "等高线",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*FGliTJ7eSBIAAAAAAAAAAABkARQnAQ"
},
{
"filename": "ele_dark.js",
"title": "等高线",
"screenshot":""
},
{
"filename": "linedash.js",
"title": "等高线",
"screenshot":""
}
]
}

View File

@ -0,0 +1,6 @@
---
title: 等值线
order: 0
redirect_from:
- /zh/examples/line/
---

View File

@ -7,8 +7,8 @@
{
"filename": "normal.js",
"title": "海量点",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
"screenshot":""
}
]
}

View File

@ -8,7 +8,16 @@
"filename": "normal.js",
"title": "海量点",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*Kva7R7AimzsAAAAAAAAAAABkARQnAQ"
},
{
"filename": "scatter.js",
"title": "定点图",
"screenshot":"https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*s5lpTYp2hZYAAAAAAAAAAABkARQnAQ"
}
]
}

View File

@ -1,4 +1,4 @@
---
title: "散点地图"
title: "等值线"
order: 1
---

View File

@ -4,7 +4,7 @@ import { gl } from '../renderer/gl';
import { IAttribute } from '../renderer/IAttribute';
import { IElements } from '../renderer/IElements';
import { IRendererService } from '../renderer/IRendererService';
import { IParseDataItem } from '../source/ISourceService'
import { IParseDataItem } from '../source/ISourceService';
import { ILayer } from './ILayerService';
import {
IEncodeFeature,
@ -216,10 +216,11 @@ export default class StyleAttributeService implements IStyleAttributeService {
) {
descriptors.forEach((descriptor, attributeIdx) => {
if (descriptor && descriptor.update) {
const normal = normalsForCurrentFeature?.slice(
vertexIdx * 3,
vertexIdx * 3 + 3,
)|| [];
const normal =
normalsForCurrentFeature?.slice(
vertexIdx * 3,
vertexIdx * 3 + 3,
) || [];
(descriptor.buffer.data as number[]).push(
...descriptor.update(
feature,

View File

@ -24,7 +24,8 @@ function decodePickingColor(color: Uint8Array): number {
* @see https://github.com/antvis/L7/blob/next/dev-docs/PixelPickingEngine.md
*/
@injectable()
export default class PixelPickingPass<InitializationOptions = {}> implements IPass<InitializationOptions> {
export default class PixelPickingPass<InitializationOptions = {}>
implements IPass<InitializationOptions> {
@lazyInject(TYPES.IRendererService)
protected readonly rendererService: IRendererService;
@ -132,7 +133,12 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
const xInDevicePixel = x * window.devicePixelRatio;
const yInDevicePixel = y * window.devicePixelRatio;
if (xInDevicePixel > width || xInDevicePixel < 0 || yInDevicePixel > height || yInDevicePixel < 0) {
if (
xInDevicePixel > width ||
xInDevicePixel < 0 ||
yInDevicePixel > height ||
yInDevicePixel < 0
) {
return;
}
@ -214,7 +220,9 @@ export default class PixelPickingPass<InitializationOptions = {}> implements IPa
const { clear, useFramebuffer } = this.rendererService;
// 先输出到 PostProcessor
const readFBO = this.layer.multiPassRenderer.getPostProcessor().getReadFBO();
const readFBO = this.layer.multiPassRenderer
.getPostProcessor()
.getReadFBO();
this.layer.hooks.beforeRender.call();
useFramebuffer(readFBO, () => {
clear({

View File

@ -141,10 +141,11 @@ vec4 project_common_position_to_clipspace(vec4 position) {
vec4 unproject_clipspace_to_position(vec4 clipspacePos, mat4 u_InverseViewProjectionMatrix) {
vec4 pos = u_InverseViewProjectionMatrix * (clipspacePos - u_ViewportCenterProjection);
if (u_CoordinateSystem == COORDINATE_SYSTEM_METER_OFFSET ||
u_CoordinateSystem == COORDINATE_SYSTEM_LNGLAT_OFFSET) {
// Needs to be divided with project_uCommonUnitsPerMeter
pos.w /= u_PixelsPerMeter.z;
pos.w = pos.w / u_PixelsPerMeter.z;
}
return pos;
}

View File

@ -85,7 +85,12 @@ export function packCircleVertex(
packUint8ToFloat(strokeColor[2], strokeColor[3]),
];
[[-1, -1], [1, -1], [1, 1], [-1, 1]].forEach(([extrudeX, extrudeY]) => {
[
[-1, -1],
[1, -1],
[1, 1],
[-1, 1],
].forEach(([extrudeX, extrudeY]) => {
// vec4(
// color,
// color,

View File

@ -53,9 +53,7 @@ let layerIdCounter = 0;
/**
* Layer
*/
const defaultLayerInitializationOptions: Partial<
ILayerInitializationOptions
> = {
const defaultLayerInitializationOptions: Partial<ILayerInitializationOptions> = {
minZoom: 0,
maxZoom: 20,
visible: true,
@ -378,7 +376,10 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
public fitBounds(): void {
const source = this.getSource();
const extent = source.extent;
this.map.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]]);
this.map.fitBounds([
[extent[0], extent[1]],
[extent[2], extent[3]],
]);
}
public destroy() {

View File

@ -79,7 +79,10 @@ export function LineTriangulation(feature: IEncodeFeature) {
export function PolygonExtrudeTriangulation(feature: IEncodeFeature) {
const coordinates = feature.coordinates as IPosition[][];
const { positions, index, normals } = extrude_PolygonNormal(coordinates, true);
const { positions, index, normals } = extrude_PolygonNormal(
coordinates,
true,
);
return {
vertices: positions, // [ x, y, z ]
@ -92,9 +95,9 @@ export function PolygonExtrudeTriangulation(feature: IEncodeFeature) {
export function HeatmapGridTriangulation(feature: IEncodeFeature) {
const { shape } = feature;
const { positions, index } = getHeatmapGeometry(shape as
| ShapeType2D
| ShapeType3D);
const { positions, index } = getHeatmapGeometry(
shape as ShapeType2D | ShapeType3D,
);
return {
vertices: positions, // [ x, y, z ] 多边形顶点
indices: index,

View File

@ -56,7 +56,9 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
protected renderModels() {
const { clear, useFramebuffer } = this.rendererService;
const shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
const shapeAttr = this.styleAttributeService.getLayerStyleAttribute(
'shape',
);
const shapeType = shapeAttr?.scale?.field || 'heatmap';
useFramebuffer(this.heatmapFramerBuffer, () => {
clear({
@ -68,18 +70,23 @@ export default class HeatMapLayer extends BaseLayer<IHeatMapLayerStyleOptions> {
this.drawIntensityMode();
});
// this.draw3DHeatMap();
shapeType === 'heatmap' ? this.drawColorMode(): this.draw3DHeatMap();
shapeType === 'heatmap' ? this.drawColorMode() : this.draw3DHeatMap();
// this.drawIntensityMode();
return this;
}
protected buildModels() {
const shapeAttr = this.styleAttributeService.getLayerStyleAttribute('shape');
const shapeAttr = this.styleAttributeService.getLayerStyleAttribute(
'shape',
);
const shapeType = shapeAttr?.scale?.field || 'heatmap';
this.registerBuiltinAttributes(this);
this.intensityModel = this.buildHeatMapIntensity();
this.models = [this.intensityModel];
this.colorModel = shapeType === 'heatmap' ? this.buildHeatmapColor(): this.build3dHeatMap();
this.colorModel =
shapeType === 'heatmap'
? this.buildHeatmapColor()
: this.build3dHeatMap();
this.models.push(this.colorModel);
const { rampColors } = this.getStyleOptions();
const imageData = generateColorRamp(rampColors as IColorRamp);

View File

@ -89,7 +89,10 @@ export default class DataMappingPlugin implements ILayerPlugin {
const params: unknown[] = [];
scalers.forEach(({ field }) => {
if (record.hasOwnProperty(field) || attribute.scale?.type ==='variable') {
if (
record.hasOwnProperty(field) ||
attribute.scale?.type === 'variable'
) {
params.push(record[field]);
}
});

View File

@ -43,12 +43,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
@inject(TYPES.ILogService)
private readonly logger: ILogService;
// key = field_attribute name
// key = field_attribute name
private scaleCache: {
[field: string]: IStyleScale;
} = {};
private scaleOptions: IScaleOptions = {}
private scaleOptions: IScaleOptions = {};
public apply(layer: ILayer) {
layer.hooks.init.tap('FeatureScalePlugin', () => {
@ -73,9 +73,8 @@ export default class FeatureScalePlugin implements ILayerPlugin {
}
});
}
private isNumber(n:any) {
private isNumber(n: any) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
private caculateScalesForAttributes(
@ -88,11 +87,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
// 创建Scale
const attributeScale = attribute.scale;
const type = attribute.name;
attributeScale.names= this.parseFields(attribute!.scale!.field || []);
const scales: IStyleScale[] = attributeScale.names
.map((field:string) => {
return this.getOrCreateScale(field, attribute, dataArray);
})
attributeScale.names = this.parseFields(attribute!.scale!.field || []);
const scales: IStyleScale[] = attributeScale.names.map(
(field: string) => {
return this.getOrCreateScale(field, attribute, dataArray);
},
);
// 为scales 设置值区间
if (scales.some((scale) => scale.type === StyleScaleType.VARIABLE)) {
@ -100,22 +100,21 @@ export default class FeatureScalePlugin implements ILayerPlugin {
scales.forEach((scale) => {
// 如果设置了回调, 这不需要设置让range
if (!attributeScale.callback) {
if(attributeScale.values) {
if(scale.option?.type==='linear' && attributeScale.values.length > 2) {
const tick =scale.scale.ticks(attributeScale.values.length);
if(type === 'color'){
scale.scale.domain(tick)
if (attributeScale.values) {
if (
scale.option?.type === 'linear' &&
attributeScale.values.length > 2
) {
const tick = scale.scale.ticks(attributeScale.values.length);
if (type === 'color') {
scale.scale.domain(tick);
}
}
scale.scale.range(attributeScale.values);
} else if(scale.option?.type==='cat') {
} else if (scale.option?.type === 'cat') {
// 如果没有设置初值且 类型为catrange ==domain;
scale.scale.range(scale.option.domain);
}
}
});
} else {
@ -125,16 +124,15 @@ export default class FeatureScalePlugin implements ILayerPlugin {
return scale.scale(attributeScale.names[index]);
});
}
attributeScale.scalers = scales.map((scale: IStyleScale)=> {
attributeScale.scalers = scales.map((scale: IStyleScale) => {
return {
field: scale.field,
func: scale.scale,
}
};
});
attribute.needRescale = false;
}
});
}
private getOrCreateScale(
@ -142,7 +140,7 @@ export default class FeatureScalePlugin implements ILayerPlugin {
attribute: IStyleAttribute,
dataArray: IParseDataItem[],
) {
const scalekey = [field,attribute.name].join('_')
const scalekey = [field, attribute.name].join('_');
if (this.scaleCache[scalekey]) {
return this.scaleCache[scalekey];
}
@ -157,7 +155,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
// styleScale.scale.range(attribute.scale?.values);
// }
return this.scaleCache[scalekey];
}
@ -180,13 +177,12 @@ export default class FeatureScalePlugin implements ILayerPlugin {
// 首先查找全局默认配置例如 color
const scaleOption: IScale | undefined = this.scaleOptions[field];
const styleScale: IStyleScale = {
field,
scale: undefined,
type: StyleScaleType.VARIABLE,
option: scaleOption,
};
if (!data || !data.length) {
field,
scale: undefined,
type: StyleScaleType.VARIABLE,
option: scaleOption,
};
if (!data || !data.length) {
if (scaleOption && scaleOption.type) {
styleScale.scale = this.createDefaultScale(scaleOption);
} else {
@ -195,8 +191,8 @@ export default class FeatureScalePlugin implements ILayerPlugin {
}
return styleScale;
}
const firstValue = (data!.find((d) => !isNil(d[field])))?.[field]
const firstValue = data!.find((d) => !isNil(d[field]))?.[field];
// 常量 Scale
if (this.isNumber(field) || (isNil(firstValue) && !scaleOption)) {
styleScale.scale = d3.scaleOrdinal([field]);
@ -210,7 +206,6 @@ export default class FeatureScalePlugin implements ILayerPlugin {
Object.assign(cfg, scaleOption);
styleScale.scale = this.createDefaultScale(cfg);
styleScale.option = cfg;
}
return styleScale;
}
@ -237,8 +232,8 @@ export default class FeatureScalePlugin implements ILayerPlugin {
cfg.domain = extent(values);
} else if (type === ScaleTypes.CAT) {
cfg.domain = uniq(values);
} else if(type === ScaleTypes.QUANTILE) {
cfg.domain = values
} else if (type === ScaleTypes.QUANTILE) {
cfg.domain = values;
}
return cfg;
}

View File

@ -4,7 +4,14 @@ import { polygonTriangulation } from '..';
describe('PolygonTriangulation', () => {
it('should do triangulation with a polygon correctly', () => {
const mockFeature: IEncodeFeature = {
coordinates: [[[0, 0], [1, 0], [1, 1], [0, 1]]],
coordinates: [
[
[0, 0],
[1, 0],
[1, 1],
[0, 1],
],
],
color: [1, 0, 0, 0],
};
const { indices, vertices, size } = polygonTriangulation(mockFeature);

View File

@ -105,7 +105,10 @@ export default class AMapService implements IMapService {
const amapBound = this.map.getBounds().toBounds();
const NE = amapBound.getNorthEast();
const SW = amapBound.getSouthWest();
return [[NE.getLng(), NE.getLat()], [SW.getLng(), SW.getLat()]];
return [
[NE.getLng(), NE.getLat()],
[SW.getLng(), SW.getLat()],
];
}
public getMinZoom(): number {

View File

@ -1,7 +1,7 @@
export const MapTheme: {
[key: string]: any;
} = {
light: 'mapbox://styles/mapbox/light-v10',
dark: 'mapbox://styles/mapbox/dark-v10',
light: 'mapbox://styles/zcxduo/ck233y3ru1di71cnulo9jdg2v',
dark: 'mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7',
normal: 'mapbox://styles/mapbox/streets-v11',
};

View File

@ -19,7 +19,10 @@ export default function image(
dataArray: [
{
_id: 0,
coordinates: [[extent[0], extent[1]], [extent[2], extent[3]]],
coordinates: [
[extent[0], extent[1]],
[extent[2], extent[3]],
],
},
],
};

View File

@ -11,7 +11,10 @@ export default function raster(data: number[], cfg: IRasterCfg): IParserData {
height,
min,
max,
coordinates: [[extent[0], extent[1]], [extent[2], extent[3]]],
coordinates: [
[extent[0], extent[1]],
[extent[2], extent[3]],
],
},
],
};