mirror of https://gitee.com/antv-l7/antv-l7
fix(layer): 去除线图层绘制异常的问题
处理线图层数据存在重复点的时候，绘制的线图层粗细表现异常的问题。
This commit is contained in:
ParryQiu
parent
687986a6d5
commit
4323ef5d2f
|
|
@ -1,48 +0,0 @@
|
||||||
import { Scene, PolygonLayer, LineLayer } from '@antv/l7';
|
|
||||||
import { GaodeMap } from '@antv/l7-maps';
|
|
||||||
|
|
||||||
const scene = new Scene({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
pitch: 0,
|
|
||||||
style: 'light',
|
|
||||||
center: [ 107.042225, 37.66565 ],
|
|
||||||
zoom: 3.87
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
fetch('https://gw.alipayobjects.com/os/rmsportal/JToMOWvicvJOISZFCkEI.json')
|
|
||||||
.then(res => res.json())
|
|
||||||
.then(data => {
|
|
||||||
const colors = [
|
|
||||||
'#D7F9F0',
|
|
||||||
'#A6E1E0',
|
|
||||||
'#72BED6',
|
|
||||||
'#5B8FF9',
|
|
||||||
'#3474DB',
|
|
||||||
'#005CBE',
|
|
||||||
'#00419F',
|
|
||||||
'#00287E'
|
|
||||||
];
|
|
||||||
const layer = new PolygonLayer({})
|
|
||||||
.source(data)
|
|
||||||
.color('name', colors)
|
|
||||||
.shape('fill')
|
|
||||||
.active(true)
|
|
||||||
.style({
|
|
||||||
opacity: 0.9
|
|
||||||
});
|
|
||||||
|
|
||||||
const layer2 = new LineLayer({
|
|
||||||
zIndex: 2
|
|
||||||
})
|
|
||||||
.source(data)
|
|
||||||
.color('#fff')
|
|
||||||
.size(0.3)
|
|
||||||
.style({
|
|
||||||
opacity: 1
|
|
||||||
});
|
|
||||||
|
|
||||||
scene.addLayer(layer);
|
|
||||||
scene.addLayer(layer2);
|
|
||||||
});
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
import { Container } from 'inversify';
|
|
||||||
import 'reflect-metadata';
|
|
||||||
import { TYPES } from '../../../index';
|
|
||||||
import GlobalConfigService from '../ConfigService';
|
|
||||||
import { IGlobalConfigService } from '../IConfigService';
|
|
||||||
|
|
||||||
describe('ConfigService', () => {
|
|
||||||
let container: Container;
|
|
||||||
let configService: IGlobalConfigService;
|
|
||||||
|
|
||||||
beforeAll(() => {
|
|
||||||
container = new Container();
|
|
||||||
container
|
|
||||||
.bind<IGlobalConfigService>(TYPES.IGlobalConfigService)
|
|
||||||
.to(GlobalConfigService);
|
|
||||||
configService = container.get<IGlobalConfigService>(
|
|
||||||
TYPES.IGlobalConfigService,
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
afterAll(() => {
|
|
||||||
container.unbind(TYPES.IGlobalConfigService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should validate scene's options according to JSON schema", () => {
|
|
||||||
const { valid, errorText } = configService.validateSceneConfig({
|
|
||||||
id: 0,
|
|
||||||
});
|
|
||||||
expect(valid).toBeFalsy();
|
|
||||||
expect(errorText).toMatch('id should be string');
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateSceneConfig({
|
|
||||||
id: 'map',
|
|
||||||
}).valid,
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should validate map's `zoom` option", () => {
|
|
||||||
const { valid, errorText } = configService.validateMapConfig({
|
|
||||||
zoom: 100,
|
|
||||||
minZoom: 100,
|
|
||||||
maxZoom: -2,
|
|
||||||
});
|
|
||||||
expect(valid).toBeFalsy();
|
|
||||||
expect(errorText).toMatch('zoom should be <= 24');
|
|
||||||
expect(errorText).toMatch('minZoom should be <= 24');
|
|
||||||
expect(errorText).toMatch('maxZoom should be >= -1');
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateMapConfig({
|
|
||||||
zoom: 10,
|
|
||||||
minZoom: 1,
|
|
||||||
maxZoom: 15,
|
|
||||||
}).valid,
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should validate map's `pitch` option", () => {
|
|
||||||
const { valid, errorText } = configService.validateMapConfig({
|
|
||||||
pitch: '1',
|
|
||||||
});
|
|
||||||
expect(valid).toBeFalsy();
|
|
||||||
expect(errorText).toMatch('pitch should be number');
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateMapConfig({
|
|
||||||
pitch: 10,
|
|
||||||
}).valid,
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should validate map's `center` option", () => {
|
|
||||||
const { valid, errorText } = configService.validateMapConfig({
|
|
||||||
center: [1, 2, 3],
|
|
||||||
});
|
|
||||||
expect(valid).toBeFalsy();
|
|
||||||
expect(errorText).toMatch('center should NOT have more than 2 items');
|
|
||||||
|
|
||||||
const { valid: v2, errorText: e2 } = configService.validateMapConfig({
|
|
||||||
center: [1],
|
|
||||||
});
|
|
||||||
expect(v2).toBeFalsy();
|
|
||||||
expect(e2).toMatch('center should NOT have fewer than 2 items');
|
|
||||||
|
|
||||||
const { valid: v3, errorText: e3 } = configService.validateMapConfig({
|
|
||||||
center: 100,
|
|
||||||
});
|
|
||||||
expect(v3).toBeFalsy();
|
|
||||||
expect(e3).toMatch('center should be array');
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateMapConfig({
|
|
||||||
center: [100, 100],
|
|
||||||
}).valid,
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("should validate layer's options according to JSON schema", () => {
|
|
||||||
configService.registerLayerConfigSchemaValidator('testLayer', {
|
|
||||||
properties: {
|
|
||||||
opacity: {
|
|
||||||
type: 'number',
|
|
||||||
minimum: 0,
|
|
||||||
maximum: 1,
|
|
||||||
},
|
|
||||||
enablePicking: {
|
|
||||||
type: 'boolean',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
const { valid, errorText } = configService.validateLayerConfig(
|
|
||||||
'testLayer',
|
|
||||||
{ opacity: 'invalid' },
|
|
||||||
);
|
|
||||||
expect(valid).toBeFalsy();
|
|
||||||
expect(errorText).toMatch('opacity should be number');
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateLayerConfig('testLayer', {
|
|
||||||
opacity: 1.5,
|
|
||||||
}).valid,
|
|
||||||
).toBeFalsy();
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateLayerConfig('testLayer', {
|
|
||||||
enablePicking: 1.5,
|
|
||||||
}).valid,
|
|
||||||
).toBeFalsy();
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateLayerConfig('testLayer', {
|
|
||||||
opacity: 1.0,
|
|
||||||
}).valid,
|
|
||||||
).toBeTruthy();
|
|
||||||
|
|
||||||
expect(
|
|
||||||
configService.validateLayerConfig('testLayer', {
|
|
||||||
opacity: 0.0,
|
|
||||||
}).valid,
|
|
||||||
).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
import { PointLayer, Scene } from '@antv/l7';
|
|
||||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
|
||||||
import * as React from 'react';
|
|
||||||
// @ts-ignore
|
|
||||||
export default class Light extends React.Component {
|
|
||||||
// @ts-ignore
|
|
||||||
private scene: Scene;
|
|
||||||
|
|
||||||
public componentWillUnmount() {
|
|
||||||
this.scene.destroy();
|
|
||||||
}
|
|
||||||
|
|
||||||
public async componentDidMount() {
|
|
||||||
const response = await fetch(
|
|
||||||
'https://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antvdemo/assets/city/bj.csv',
|
|
||||||
);
|
|
||||||
const pointsData = await response.text();
|
|
||||||
|
|
||||||
const scene = new Scene({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
pitch: 0,
|
|
||||||
style: 'dark',
|
|
||||||
center: [116.405289, 39.904987],
|
|
||||||
zoom: 6,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
this.scene = scene;
|
|
||||||
scene.on('loaded', async () => {
|
|
||||||
const pointLayer = new PointLayer({
|
|
||||||
blend: 'normal',
|
|
||||||
})
|
|
||||||
.source(pointsData, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
x: 'lng',
|
|
||||||
y: 'lat',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.size(1)
|
|
||||||
.color('#ffa842')
|
|
||||||
.style({
|
|
||||||
opacity: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
scene.addLayer(pointLayer);
|
|
||||||
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