diff --git a/packages/core/src/services/interaction/IInteractionService.ts b/packages/core/src/services/interaction/IInteractionService.ts index b7d4a2df77..21c95324f1 100644 --- a/packages/core/src/services/interaction/IInteractionService.ts +++ b/packages/core/src/services/interaction/IInteractionService.ts @@ -16,6 +16,7 @@ export interface IInteractionTarget { } export interface IInteractionService { + indragging: boolean; init(): void; destroy(): void; on( diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts index 214bd63905..c6cd147a01 100644 --- a/packages/core/src/services/interaction/InteractionService.ts +++ b/packages/core/src/services/interaction/InteractionService.ts @@ -20,6 +20,7 @@ const DragEventMap: { [key: string]: string } = { @injectable() export default class InteractionService extends EventEmitter implements IInteractionService { + public indragging: boolean = false; @inject(TYPES.IMapService) private readonly mapService: IMapService; // @ts-ignore @@ -134,6 +135,9 @@ export default class InteractionService extends EventEmitter private onDrag = (target: any) => { const interactionTarget = this.interactionEvent(target); interactionTarget.type = DragEventMap[interactionTarget.type]; + interactionTarget.type === 'dragging' + ? (this.indragging = true) + : (this.indragging = false); this.emit(InteractionEvent.Drag, interactionTarget); }; diff --git a/packages/core/src/services/interaction/PickingService.ts b/packages/core/src/services/interaction/PickingService.ts index cc33fb3b38..38a302923f 100644 --- a/packages/core/src/services/interaction/PickingService.ts +++ b/packages/core/src/services/interaction/PickingService.ts @@ -166,8 +166,8 @@ export default class PickingService implements IPickingService { this.alreadyInPicking || // TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作 this.layerService.alreadyInRendering || - // TODO: this.layerService.isMapDragging() 如果地图正在拖拽 则不进行拾取操作 - this.layerService.isMapDragging() || + // Tip: this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去） + this.interactionService.indragging || // TODO: 判断当前 是都进行 shader pick 拾取判断 !this.layerService.getShaderPickStat() ) { diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 185d5b55b4..7f70b4223e 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -419,7 +419,6 @@ export interface ILayerService { renderLayers(type?: string): void; setEnableRender(flag: boolean): void; getOESTextureFloat(): boolean; - isMapDragging(): boolean; destroy(): void; } diff --git a/packages/core/src/services/layer/LayerService.ts b/packages/core/src/services/layer/LayerService.ts index f098d69e76..05334a9b9f 100644 --- a/packages/core/src/services/layer/LayerService.ts +++ b/packages/core/src/services/layer/LayerService.ts @@ -200,11 +200,6 @@ export default class LayerService implements ILayerService { return this.renderService.extensionObject.OES_texture_float; } - // TODO: 判断地图是否正在被拖动 - public isMapDragging() { - return this.mapService.dragging; - } - // 控制着色器颜色拾取计算 public enableShaderPick() { this.shaderPicking = true; diff --git a/packages/core/src/services/map/IMapService.ts b/packages/core/src/services/map/IMapService.ts index 282f746b30..2f5362327b 100644 --- a/packages/core/src/services/map/IMapService.ts +++ b/packages/core/src/services/map/IMapService.ts @@ -37,7 +37,6 @@ export interface IMapWrapper { export interface IMapService { version?: string; map: RawMap; - dragging: boolean; bgColor: string; setBgColor(color: string): void; init(): void; diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index 5809fd047a..8acb159fff 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -61,9 +61,6 @@ export default class AMapService */ public map: AMap.Map & IAMapInstance; - // TODO: 判断地图是否正在拖拽 - public dragging: boolean = false; - // 背景色 public bgColor: string = 'rgba(0, 0, 0, 0)'; @@ -412,16 +409,6 @@ export default class AMapService } }); - // TODO: 判断地图是否正在被拖拽 - this.map.on('dragstart', () => { - this.dragging = true; - return ''; - }); - this.map.on('dragend', () => { - this.dragging = false; - return ''; - }); - this.viewport = new Viewport(); } diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index 813dedadba..6c6c0b4f62 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -64,9 +64,6 @@ export default class AMapService */ public map: AMap.Map & IAMapInstance; - // TODO: 判断地图是否正在拖拽 - public dragging: boolean = false; - /** * 用于 customCooords 数据的计算 */ @@ -505,16 +502,6 @@ export default class AMapService } } }); - - // TODO: 判断地图是否正在被拖拽 - this.map.on('dragstart', () => { - this.dragging = true; - return ''; - }); - this.map.on('dragend', () => { - this.dragging = false; - return ''; - }); } public meterToCoord(center: [number, number], outer: [number, number]) { diff --git a/packages/maps/src/map/map.ts b/packages/maps/src/map/map.ts index 8eb319348f..9ed84ae380 100644 --- a/packages/maps/src/map/map.ts +++ b/packages/maps/src/map/map.ts @@ -42,9 +42,6 @@ export default class L7MapService implements IMapService { public version: string = Version.L7MAP; public map: Map; - // TODO: 判断地图是否正在拖拽 - public dragging: boolean = false; - // 背景色 public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)'; @@ -282,16 +279,6 @@ export default class L7MapService implements IMapService { this.map.on('load', this.handleCameraChanged); this.map.on('move', this.handleCameraChanged); - // TODO: 判断地图是否正在被拖拽 - this.map.on('dragstart', () => { - this.dragging = true; - return ''; - }); - this.map.on('dragend', () => { - this.dragging = false; - return ''; - }); - // 不同于高德地图，需要手动触发首次渲染 this.handleCameraChanged(); } diff --git a/packages/maps/src/mapbox/map.ts b/packages/maps/src/mapbox/map.ts index 5e40f8a378..b2953fbc63 100644 --- a/packages/maps/src/mapbox/map.ts +++ b/packages/maps/src/mapbox/map.ts @@ -50,9 +50,6 @@ export default class MapboxService public version: string = Version.MAPBOX; public map: Map & IMapboxInstance; - // TODO: 判断地图是否正在拖拽 - public dragging: boolean = false; - // 背景色 public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)'; @@ -366,16 +363,6 @@ export default class MapboxService this.map.on('load', this.handleCameraChanged); this.map.on('move', this.handleCameraChanged); - // TODO: 判断地图是否正在被拖拽 - this.map.on('dragstart', () => { - this.dragging = true; - return ''; - }); - this.map.on('dragend', () => { - this.dragging = false; - return ''; - }); - // 不同于高德地图，需要手动触发首次渲染 this.handleCameraChanged(); } diff --git a/stories/Map/components/amap2demo_text.tsx b/stories/Map/components/amap2demo_text.tsx index d0ccec170d..f354c2bea7 100644 --- a/stories/Map/components/amap2demo_text.tsx +++ b/stories/Map/components/amap2demo_text.tsx @@ -22,16 +22,16 @@ export default class Amap2demo_text extends React.Component { // src: url('${fontpath}') format('woff2') // }` // document.getElementsByTagName('head')[0].appendChild(style) - var mask = [ - [ - [ - [110, 40], - [130, 40], - [130, 20], - [110, 20], - ], - ], - ]; + // var mask = [ + // [ + // [ + // [110, 40], + // [130, 40], + // [130, 20], + // [110, 20], + // ], + // ], + // ]; const scene = new Scene({ id: 'map', @@ -45,7 +45,7 @@ export default class Amap2demo_text extends React.Component { }), }); this.scene = scene; - scene.addIconFont('icon1', ''); + // scene.addIconFont('icon1', ''); // scene.addIconFont("icon2", "") // scene.addIconFonts([ @@ -55,37 +55,37 @@ export default class Amap2demo_text extends React.Component { scene.addFontFace(fontFamily, fontPath); scene.on('loaded', () => { - fetch( - 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json', - ) - .then((res) => res.json()) - .then((data) => { - const pointLayer = new PointLayer({}) - .source(data.list, { - parser: { - type: 'json', - x: 'j', - y: 'w', - }, - }) - .shape('icon', 'text') - .size(12) - .color('w', ['#f00', '#f00', '#0f0']) - .style({ - textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left - textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直] - spacing: 2, // 字符间距 - padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 - stroke: '#ffffff', // 描边颜色 - strokeWidth: 0.3, // 描边宽度 - strokeOpacity: 1.0, - fontFamily, - // fontFamily: "Times New Roman", - iconfont: true, - // textAllowOverlap: true, - }); - scene.addLayer(pointLayer); - }); + // fetch( + // 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json', + // ) + // .then((res) => res.json()) + // .then((data) => { + // const pointLayer = new PointLayer({}) + // .source(data.list, { + // parser: { + // type: 'json', + // x: 'j', + // y: 'w', + // }, + // }) + // .shape('icon', 'text') + // .size(12) + // .color('w', ['#f00', '#f00', '#0f0']) + // .style({ + // textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left + // textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直] + // spacing: 2, // 字符间距 + // padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 + // stroke: '#ffffff', // 描边颜色 + // strokeWidth: 0.3, // 描边宽度 + // strokeOpacity: 1.0, + // fontFamily, + // // fontFamily: "Times New Roman", + // iconfont: true, + // // textAllowOverlap: true, + // }); + // // scene.addLayer(pointLayer); + // }); fetch( 'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', diff --git a/stories/Map/components/bugfix.tsx b/stories/Map/components/bugfix.tsx new file mode 100644 index 0000000000..588ccf652f --- /dev/null +++ b/stories/Map/components/bugfix.tsx @@ -0,0 +1,152 @@ +// @ts-nocheck +import React from 'react'; +import { Scene, GaodeMap, GaodeMapV2, PointLayer } from '@antv/l7'; + +const data = { + type: 'FeatureCollection', + features: [ + { + type: 'Feature', + properties: { + s: '海南', + m: '东方', + }, + geometry: { + type: 'Point', + coordinates: [120.218258, 30.298216], + }, + }, + { + type: 'Feature', + properties: { + s: '海南', + m: '海口', + }, + geometry: { + type: 'Point', + coordinates: [120.137195, 30.304203], + }, + }, + { + type: 'Feature', + properties: { + s: '广东', + m: '珠海', + }, + geometry: { + type: 'Point', + coordinates: [120.052108, 30.296719], + }, + }, + { + type: 'Feature', + properties: { + s: '广东', + m: '徐闻', + }, + geometry: { + type: 'Point', + coordinates: [120.20906, 30.201379], + }, + }, + { + type: 'Feature', + properties: { + s: '海南', + m: '琼海', + }, + geometry: { + type: 'Point', + coordinates: [120.119373, 30.1824], + }, + }, + ], +}; + +const img = { + 海南: + 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', + 广东: + 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg', +}; + +export default class Amap2demo extends React.Component { + // @ts-ignore + private scene: Scene; + + public componentWillUnmount() { + this.scene.destroy(); + } + + public async componentDidMount() { + const scene = new Scene({ + id: 'map', + map: new GaodeMapV2({ + center: [120.2, 30.2], + zoom: 9, + }), + }); + this.scene = scene; + + scene.on('loaded', () => { + Object.keys(img).forEach((key) => { + scene.addImage(key, img[key]); + }); + const imageLayer = new PointLayer({ + name: 'image', + }); + + imageLayer + .source(data) + // @ts-ignore + .size(20) + // @ts-ignore + .shape('s', (s) => s) + .fitBounds(); + + const textLayer = new PointLayer({ + name: 'image', + }); + + textLayer + .source(data) + // @ts-ignore + .size(20) + .color('#000000') + // @ts-ignore + .shape('m', 'text') + .style({ + stroke: '#ffffff', + strokeWidth: 2, + textOffset: [0, -40], + }); + + scene.addLayer(textLayer); + + scene.addLayer(imageLayer); + + [textLayer, imageLayer].forEach((layer) => { + layer.on('click', () => { + alert(); + }); + }); + }); + } + + public render() { + return ( + <> +
+ + ); + } +} diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index e4d7f5b488..899928ccdf 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -170,6 +170,11 @@ export default class GaodeMapComponent extends React.Component { // opacity: 0.5 // }) + scene.addImage( + '00', + 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', + ); + scene.on('loaded', () => { // scene.addLayer(layer); @@ -205,6 +210,7 @@ export default class GaodeMapComponent extends React.Component { { lng: aspaceLnglat[0] + 0.0002, lat: aspaceLnglat[1], + name: '00', }, ], { @@ -216,13 +222,19 @@ export default class GaodeMapComponent extends React.Component { }, ) // .shape('100m', 'text') - .shape('circle') + // .shape('circle') + .shape('name', ['00']) .size(25) - .color('#0f0') + // .color('#0f0') + // .select(true) .style({ - textOffset: [50, 20], + // textOffset: [50, 20], }); + text.on('click', () => { + alert('***'); + }); + scene.addLayer(text); // scene.addLayer(line); diff --git a/stories/Map/map.stories.tsx b/stories/Map/map.stories.tsx index 76a2f0d788..bcf92ea2bc 100644 --- a/stories/Map/map.stories.tsx +++ b/stories/Map/map.stories.tsx @@ -78,6 +78,7 @@ import Cluster from './components/cluster' import Hot from './components/hot' import Hot2 from './components/hot2' import Mask from './components/mask' +import BugFix from './components/bugfix' // @ts-ignore storiesOf('地图方法', module) @@ -160,3 +161,5 @@ storiesOf('地图方法', module) .add('Hot1', () => ) .add('Hot2', () => ) .add('Mask', () => ) + + .add('BugFix', () => )