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 ( -
- ); - } -}