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