p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Shihui (#1020) 

* feat: 图层支持配置 cursor

* style: lint style
This commit is contained in:
YiQianYao 2022-03-28 15:59:02 +08:00 committed by GitHub
parent e666c043e7
commit fe300a4c9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 166 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/core/src/services/interaction/PickingService.ts
View File

@ -15,13 +15,16 @@ import {
InteractionEvent,
} from '../interaction/IInteractionService';
import { ILayer, ILayerService } from '../layer/ILayerService';
import { ILngLat } from '../map/IMapService';
import { ILngLat, IMapService } from '../map/IMapService';
import { gl } from '../renderer/gl';
import { IFramebuffer } from '../renderer/IFramebuffer';
import { IRendererService } from '../renderer/IRendererService';
import { IPickingService } from './IPickingService';
@injectable()
export default class PickingService implements IPickingService {
@inject(TYPES.IMapService)
private readonly mapService: IMapService;
@inject(TYPES.IRendererService)
private rendererService: IRendererService;
@ -149,6 +152,20 @@ export default class PickingService implements IPickingService {
return features;
}
// 动态设置鼠标光标
public handleCursor(layer: ILayer, type: string) {
const { cursor = '', cursorEnabled } = layer.getLayerConfig();
if (cursorEnabled) {
const domContainer = this.mapService.getMarkerContainer();
const defaultCursor = domContainer?.style.getPropertyValue('cursor');
if (type === 'unmousemove' && defaultCursor !== '') {
domContainer?.style.setProperty('cursor', '');
} else if (type === 'mousemove') {
domContainer?.style.setProperty('cursor', cursor);
}
}
}
// 获取容器的大小 - 兼容小程序环境
private getContainerSize(container: HTMLCanvasElement | HTMLElement) {
if (!!(container as HTMLCanvasElement).getContext) {
@ -370,6 +387,9 @@ export default class PickingService implements IPickingService {
// layer.emit(target.type, target);
// 判断是否发生事件冲突
if (isEventCrash(target)) {
// Tip: 允许用户动态设置鼠标光标
this.handleCursor(layer, target.type);
layer.emit(target.type, target);
}
}

2
packages/core/src/services/layer/ILayerService.ts
View File

@ -352,6 +352,8 @@ export interface ILayerConfig {
// layerType 指定 shape 的类型
layerType?: string | undefined;
cursorEnabled?: boolean;
cursor?: string;
forward: boolean; // 正方向
/**

119
stories/Object/components/cursor.tsx Normal file
View File

@ -0,0 +1,119 @@
import { GeometryLayer, PointLayer, Scene, IMapService } from '@antv/l7';
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
import * as React from 'react';
export default class Demo extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
// map: new GaodeMapV2({
// map: new Mapbox({
pitch: 0,
// style: 'dark',
center: [120, 30],
zoom: 5,
}),
});
this.scene = scene;
let pointLayer = new PointLayer()
.source([{ lng: 120, lat: 33 }], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.size(20)
.color('#f00')
.active(true)
.style({
cursor: 'move',
cursorEnabled: true,
});
let layer0 = new GeometryLayer()
.style({
width: 2,
height: 2,
opacity: 0.8,
widthSegments: 3,
heightSegments: 3,
center: [115, 30],
cursor:
"url('https://gw.alipayobjects.com/zos/bmw-prod/e2421e49-87b0-4b4d-aef7-03f4f93f0b54.ico'),pointer",
cursorEnabled: true,
})
.active({
color: '#00f',
mix: 0.5,
})
.color('#ff0');
let layer = new GeometryLayer()
.style({
width: 2,
height: 2,
opacity: 0.8,
widthSegments: 3,
heightSegments: 3,
center: [120, 30],
cursor: 'pointer',
cursorEnabled: true,
})
.active({
color: '#00f',
mix: 0.5,
})
.color('#ff0');
let layer2 = new GeometryLayer()
.style({
width: 2,
height: 2,
opacity: 0.8,
widthSegments: 3,
heightSegments: 3,
center: [125, 30],
cursor: 'wait',
cursorEnabled: true,
})
.active({
color: '#00f',
mix: 0.5,
})
.color('#ff0');
scene.on('loaded', () => {
scene.addLayer(pointLayer);
scene.addLayer(layer0);
scene.addLayer(layer);
scene.addLayer(layer2);
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
</>
);
}
}

28
stories/Object/components/plane.tsx
View File

@ -25,13 +25,6 @@ export default class Demo extends React.Component {
this.scene = scene;
let layer = new GeometryLayer()
.source([{ lng: 120, lat: 30 }], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.style({
width: 2,
height: 2,
@ -39,6 +32,26 @@ export default class Demo extends React.Component {
widthSegments: 3,
heightSegments: 3,
center: [120, 30],
cursor: 'pointer',
cursorEnabled: true,
// mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FG4fT7h5AYMAAAAAAAAAAAAAARQnAQ'
})
.active({
color: '#00f',
mix: 0.5,
})
.color('#ff0');
let layer2 = new GeometryLayer()
.style({
width: 2,
height: 2,
opacity: 0.8,
widthSegments: 3,
heightSegments: 3,
center: [125, 30],
cursor: 'wait',
cursorEnabled: true,
// mapTexture: 'https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*FG4fT7h5AYMAAAAAAAAAAAAAARQnAQ'
})
.active({
@ -49,6 +62,7 @@ export default class Demo extends React.Component {
scene.on('loaded', () => {
scene.addLayer(layer);
scene.addLayer(layer2);
// setTimeout(() => {
// // layer.style({

4
stories/Object/map.stories.tsx
View File

@ -7,6 +7,7 @@ import Radar from './components/radar';
import CanvasDemo from './components/canvas';
import Plane from './components/plane';
import PlaneTerrain from './components/planeTerrain';
import Cursor from './components/cursor';
storiesOf('Object', module)
.add('water', () => <Water />)
@ -15,4 +16,5 @@ storiesOf('Object', module)
.add('Radar', () => <Radar/>)
.add('CanvasDemo', () => <CanvasDemo/>)
.add('Plane', () => <Plane/>)
.add('PlaneTerrain', () => <PlaneTerrain/>)
.add('PlaneTerrain', () => <PlaneTerrain/>)
.add('Cursor', () => <Cursor/>)