mirror of https://gitee.com/antv-l7/antv-l7
docs: delete light demo
This commit is contained in:
parent
12808f17ee
commit
17e9f5d159
|
@ -220,8 +220,22 @@ export default class Marker extends EventEmitter {
|
||||||
}
|
}
|
||||||
const { element, offsets } = this.markerOption;
|
const { element, offsets } = this.markerOption;
|
||||||
const { lng, lat } = this.lngLat;
|
const { lng, lat } = this.lngLat;
|
||||||
|
const bounds = this.mapsService.getBounds();
|
||||||
|
// if (
|
||||||
|
// lng < bounds[0][0] ||
|
||||||
|
// lng > bounds[1][0] ||
|
||||||
|
// lat < bounds[0][1] ||
|
||||||
|
// lat > bounds[1][1]
|
||||||
|
// ) {
|
||||||
|
// if (element) {
|
||||||
|
// element.style.display = 'none';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
const pos = this.mapsService.lngLatToContainer([lng, lat]);
|
const pos = this.mapsService.lngLatToContainer([lng, lat]);
|
||||||
if (element) {
|
if (element) {
|
||||||
|
element.style.display = 'block';
|
||||||
element.style.left = pos.x + offsets[0] + 'px';
|
element.style.left = pos.x + offsets[0] + 'px';
|
||||||
element.style.top = pos.y - offsets[1] + 'px';
|
element.style.top = pos.y - offsets[1] + 'px';
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,7 +12,6 @@ import HeatMapDemo from './components/HeatMap';
|
||||||
import HeatMap3D_2 from './components/heatmap2';
|
import HeatMap3D_2 from './components/heatmap2';
|
||||||
import HeatMapDemo3D from './components/heatmap3d';
|
import HeatMapDemo3D from './components/heatmap3d';
|
||||||
import HexagonLayerDemo from './components/hexagon';
|
import HexagonLayerDemo from './components/hexagon';
|
||||||
import LightDemo from './components/light';
|
|
||||||
import LineLayer from './components/Line';
|
import LineLayer from './components/Line';
|
||||||
import LineAnimate from './components/lineAnimate';
|
import LineAnimate from './components/lineAnimate';
|
||||||
import PointDemo from './components/Point';
|
import PointDemo from './components/Point';
|
||||||
|
@ -29,7 +28,6 @@ import TextLayerDemo from './components/Text';
|
||||||
storiesOf('图层', module)
|
storiesOf('图层', module)
|
||||||
.add('点图层', () => <PointDemo />)
|
.add('点图层', () => <PointDemo />)
|
||||||
.add('数据更新', () => <DataUpdate />)
|
.add('数据更新', () => <DataUpdate />)
|
||||||
.add('亮度图', () => <LightDemo />)
|
|
||||||
.add('点动画', () => <AnimatePoint />)
|
.add('点动画', () => <AnimatePoint />)
|
||||||
.add('3D点', () => <Point3D />)
|
.add('3D点', () => <Point3D />)
|
||||||
.add('文字', () => <TextLayerDemo />)
|
.add('文字', () => <TextLayerDemo />)
|
||||||
|
|
|
@ -1,90 +0,0 @@
|
||||||
import { PointLayer, Scene } from '@antv/l7';
|
|
||||||
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
|
||||||
import * as dat from 'dat.gui';
|
|
||||||
import * as React from 'react';
|
|
||||||
// @ts-ignore
|
|
||||||
export default class Light extends React.Component {
|
|
||||||
// @ts-ignore
|
|
||||||
private scene: Scene;
|
|
||||||
private gui: dat.GUI;
|
|
||||||
|
|
||||||
public componentWillUnmount() {
|
|
||||||
this.scene.destroy();
|
|
||||||
if (this.gui) {
|
|
||||||
this.gui.destroy();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public async componentDidMount() {
|
|
||||||
const response = await fetch(
|
|
||||||
'https://gw-office.alipayobjects.com/bmw-prod/6698fc37-4fc1-488b-972c-e29c77617a26.csv',
|
|
||||||
);
|
|
||||||
const pointsData = await response.text();
|
|
||||||
|
|
||||||
const scene = new Scene({
|
|
||||||
id: 'map',
|
|
||||||
map: new GaodeMap({
|
|
||||||
pitch: 0,
|
|
||||||
style: 'dark',
|
|
||||||
center: [114.298569, 30.584354],
|
|
||||||
zoom: 11,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
this.scene = scene;
|
|
||||||
const layerConfig = {
|
|
||||||
type: 'bus',
|
|
||||||
};
|
|
||||||
const gui = new dat.GUI();
|
|
||||||
this.gui = gui;
|
|
||||||
const typeControl = this.gui.add(layerConfig, 'type', [
|
|
||||||
'bus',
|
|
||||||
'elm',
|
|
||||||
'bikeriding',
|
|
||||||
'metro',
|
|
||||||
'parking',
|
|
||||||
]);
|
|
||||||
|
|
||||||
scene.on('loaded', async () => {
|
|
||||||
const pointLayer = new PointLayer()
|
|
||||||
.source(pointsData, {
|
|
||||||
parser: {
|
|
||||||
type: 'csv',
|
|
||||||
y: 'latitude',
|
|
||||||
x: 'longitude',
|
|
||||||
},
|
|
||||||
})
|
|
||||||
.size(0.5)
|
|
||||||
.filter('type', (v: string) => {
|
|
||||||
return v === 'bus';
|
|
||||||
})
|
|
||||||
.color('#FF2B1F')
|
|
||||||
.style({
|
|
||||||
opacity: 1,
|
|
||||||
});
|
|
||||||
|
|
||||||
scene.addLayer(pointLayer);
|
|
||||||
typeControl.onChange((type) => {
|
|
||||||
pointLayer.filter('type', (v) => {
|
|
||||||
return v === type;
|
|
||||||
});
|
|
||||||
scene.render();
|
|
||||||
});
|
|
||||||
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