diff --git a/packages/core/src/services/layer/ILayerService.ts b/packages/core/src/services/layer/ILayerService.ts index 7f70b4223e..ad9efc2f64 100644 --- a/packages/core/src/services/layer/ILayerService.ts +++ b/packages/core/src/services/layer/ILayerService.ts @@ -209,7 +209,7 @@ export interface ILayer { getMinZoom(): number; getMaxZoom(): number; get(name: string): number; - setBlend(type: keyof typeof BlendType): void; + setBlend(type: keyof typeof BlendType): ILayer; // animate(field: string, option: any): ILayer; renderLayers(): void; render(): ILayer; diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 03aed17c94..0a0135a97b 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -117,6 +117,11 @@ export default class BaseLayer extends EventEmitter public layerModel: ILayerModel; + public shapeOption: { + field: any; + values: any; + }; + // TODO: 记录 sceneContainer 供创建子图层的时候使用 如 imageTileLayer public sceneContainer: Container | undefined; // TODO: 用于保存子图层对象 @@ -449,6 +454,10 @@ export default class BaseLayer extends EventEmitter 'shape', )?.scale?.field; const currentShape = field; + this.shapeOption = { + field, + values, + }; this.updateStyleAttribute('shape', field, values, updateOptions); // TODO: 根据 shape 判断是否需要更新 model updateShape(this, lastShape, currentShape); @@ -692,12 +701,13 @@ export default class BaseLayer extends EventEmitter }); } } - public setBlend(type: keyof typeof BlendType): void { + public setBlend(type: keyof typeof BlendType): ILayer { this.updateLayerConfig({ blend: type, }); this.layerModelNeedUpdate = true; this.reRender(); + return this; } public show(): ILayer { this.updateLayerConfig({ diff --git a/packages/layers/src/point/index.ts b/packages/layers/src/point/index.ts index 5ccb8a7492..5989642d73 100644 --- a/packages/layers/src/point/index.ts +++ b/packages/layers/src/point/index.ts @@ -13,6 +13,32 @@ export default class PointLayer extends BaseLayer { public rebuildModels() { this.models = this.layerModel.buildModels(); } + + /** + * 在未传入数据的时候判断点图层的 shape 类型 + * @returns + */ + public getModelTypeWillEmptyData(): PointType { + if (this.shapeOption) { + const { field, values } = this.shapeOption; + const { shape2d, shape3d } = this.getLayerConfig(); + + const iconMap = this.iconService.getIconMap(); + + if (field && shape2d?.indexOf(field as string) !== -1) { + return 'fill'; + } + + if (values) { + for (const v of values) { + if (iconMap.hasOwnProperty(values as string)) { + return 'image'; + } + } + } + } + return 'normal'; + } protected getConfigSchema() { return { properties: { @@ -52,7 +78,8 @@ export default class PointLayer extends BaseLayer { return fe.hasOwnProperty('shape'); }); if (!item) { - return 'normal'; + // return 'normal'; + return this.getModelTypeWillEmptyData(); } else { const shape = item.shape; if (shape === 'dot') { diff --git a/stories/Map/components/bugfix.tsx b/stories/Map/components/bugfix.tsx index 588ccf652f..d12e77c291 100644 --- a/stories/Map/components/bugfix.tsx +++ b/stories/Map/components/bugfix.tsx @@ -2,74 +2,6 @@ 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; @@ -81,55 +13,64 @@ export default class Amap2demo extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMapV2({ - center: [120.2, 30.2], - zoom: 9, + map: new GaodeMap({ + center: [121.434765, 31.256735], + zoom: 14.83, }), }); this.scene = scene; + scene.addImage( + '00', + 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', + ); + scene.on('loaded', () => { - Object.keys(img).forEach((key) => { - scene.addImage(key, img[key]); - }); - const imageLayer = new PointLayer({ - name: 'image', - }); + fetch( + 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json', + ) + .then((res) => res.json()) + .then((data) => { + const imageLayer = new PointLayer() + .source(data, { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .shape('name', ['00']) + .size(10); - imageLayer - .source(data) - // @ts-ignore - .size(20) - // @ts-ignore - .shape('s', (s) => s) - .fitBounds(); + let d = { + coordinates: (2)[(121.4318415, 31.25682515)], + count: 2, + id: '5011000005647', + latitude: 31.25682515, + longitude: 121.4318415, + name: '石泉路140弄', + unit_price: 52256.3, + }; + const imageLayer1 = new PointLayer() + .source([], { + parser: { + type: 'json', + x: 'longitude', + y: 'latitude', + }, + }) + .shape('name', ['00']) + .size(25); - const textLayer = new PointLayer({ - name: 'image', - }); + scene.addLayer(imageLayer); + scene.addLayer(imageLayer1); - textLayer - .source(data) - // @ts-ignore - .size(20) - .color('#000000') - // @ts-ignore - .shape('m', 'text') - .style({ - stroke: '#ffffff', - strokeWidth: 2, - textOffset: [0, -40], + imageLayer.on('click', (e) => { + // console.log(e); + // imageLayer1.setBlend('normal') + imageLayer1.setData([e.feature]); + }); }); - - scene.addLayer(textLayer); - - scene.addLayer(imageLayer); - - [textLayer, imageLayer].forEach((layer) => { - layer.on('click', () => { - alert(); - }); - }); }); }