diff --git a/packages/component/src/marker.ts b/packages/component/src/marker.ts
index e721a852af..050cf2595b 100644
--- a/packages/component/src/marker.ts
+++ b/packages/component/src/marker.ts
@@ -220,8 +220,22 @@ export default class Marker extends EventEmitter {
}
const { element, offsets } = this.markerOption;
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]);
if (element) {
+ element.style.display = 'block';
element.style.left = pos.x + offsets[0] + 'px';
element.style.top = pos.y - offsets[1] + 'px';
}
diff --git a/stories/Layers/Layers.stories.tsx b/stories/Layers/Layers.stories.tsx
index 88dc18470a..6ab9ac190d 100644
--- a/stories/Layers/Layers.stories.tsx
+++ b/stories/Layers/Layers.stories.tsx
@@ -12,7 +12,6 @@ import HeatMapDemo from './components/HeatMap';
import HeatMap3D_2 from './components/heatmap2';
import HeatMapDemo3D from './components/heatmap3d';
import HexagonLayerDemo from './components/hexagon';
-import LightDemo from './components/light';
import LineLayer from './components/Line';
import LineAnimate from './components/lineAnimate';
import PointDemo from './components/Point';
@@ -29,7 +28,6 @@ import TextLayerDemo from './components/Text';
storiesOf('图层', module)
.add('点图层', () => )
.add('数据更新', () => )
- .add('亮度图', () => )
.add('点动画', () => )
.add('3D点', () => )
.add('文字', () => )
diff --git a/stories/Layers/components/light.tsx b/stories/Layers/components/light.tsx
deleted file mode 100644
index 2c8449344c..0000000000
--- a/stories/Layers/components/light.tsx
+++ /dev/null
@@ -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 (
-
- );
- }
-}