From 2fff09ca2dd0df0cf23ed6cc0b3d8bccc2fed1a4 Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Wed, 30 Mar 2022 16:05:05 +0800 Subject: [PATCH] Shihui (#1027) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复 layer 在触发 dataUpdate 时映射没有完成的问题 * style: lint style * feat: lineLayer 支持动态配置 depth （是否开始深度） * feat: 各个图层开启背面剔除，提高运行性能 * feat: 增加 getCullFace 方法统一处理 cull * style: lint style --- packages/layers/src/Geometry/models/plane.ts | 8 + .../layers/src/citybuliding/models/build.ts | 4 + packages/layers/src/core/BaseLayer.ts | 4 +- packages/layers/src/core/interface.ts | 1 + packages/layers/src/heatmap/models/heatmap.ts | 11 +- packages/layers/src/line/models/line.ts | 6 +- .../layers/src/plugins/DataMappingPlugin.ts | 2 + packages/layers/src/point/models/extrude.ts | 4 +- packages/layers/src/point/models/fill.ts | 8 +- packages/layers/src/point/models/fillmage.ts | 6 +- packages/layers/src/point/models/radar.ts | 6 +- packages/layers/src/polygon/models/fill.ts | 5 +- packages/utils/src/cull.ts | 33 ++++ packages/utils/src/index.ts | 1 + .../Map/components/amap2demo_citybuilding.tsx | 28 ++-- stories/Map/components/amap2demo_heatmap.tsx | 4 +- stories/Map/components/amap2demo_image.tsx | 4 +- stories/Map/components/amap2demo_polygon.tsx | 4 +- stories/Map/components/amap2demo_styleMap.tsx | 4 +- stories/Map/components/bugfix.tsx | 152 ++++-------------- stories/Map/components/mapCenter.tsx | 2 +- stories/Object/components/radar.tsx | 4 +- stories/Object/components/taifeng.tsx | 2 +- stories/customMap/components/Map.tsx | 16 +- 24 files changed, 154 insertions(+), 165 deletions(-) create mode 100644 packages/utils/src/cull.ts diff --git a/packages/layers/src/Geometry/models/plane.ts b/packages/layers/src/Geometry/models/plane.ts index 3344b4969e..27bef9f4b9 100644 --- a/packages/layers/src/Geometry/models/plane.ts +++ b/packages/layers/src/Geometry/models/plane.ts @@ -172,6 +172,10 @@ export default class PlaneModel extends BaseModel { depth: { enable: true }, blend: this.getBlend(), stencil: getMask(mask, maskInside), + cull: { + enable: true, + face: gl.BACK, // gl.FRONT | gl.BACK; + }, }), ]; } @@ -245,6 +249,10 @@ export default class PlaneModel extends BaseModel { depth: { enable: true }, blend: this.getBlend(), stencil: getMask(mask, maskInside), + cull: { + enable: true, + face: gl.BACK, + }, }), ]; this.layerService.renderLayers(); diff --git a/packages/layers/src/citybuliding/models/build.ts b/packages/layers/src/citybuliding/models/build.ts index 68a05387c1..8102bc8039 100644 --- a/packages/layers/src/citybuliding/models/build.ts +++ b/packages/layers/src/citybuliding/models/build.ts @@ -85,6 +85,10 @@ export default class CityBuildModel extends BaseModel { vertexShader: buildVert, fragmentShader: buildFrag, triangulation: PolygonExtrudeTriangulation, + cull: { + enable: true, + face: gl.BACK, + }, }), ]; } diff --git a/packages/layers/src/core/BaseLayer.ts b/packages/layers/src/core/BaseLayer.ts index 903d2dfc49..6c51f91825 100644 --- a/packages/layers/src/core/BaseLayer.ts +++ b/packages/layers/src/core/BaseLayer.ts @@ -1197,8 +1197,8 @@ export default class BaseLayer extends EventEmitter if (autoFit) { this.fitBounds(fitBoundsOptions); } - // 对外暴露事件 - this.emit('dataUpdate'); + // 对外暴露事件 迁移到 DataMappingPlugin generateMapping，保证在重新重新映射后触发 + // this.emit('dataUpdate'); this.reRender(); }; diff --git a/packages/layers/src/core/interface.ts b/packages/layers/src/core/interface.ts index 45881e2223..705da7c37f 100644 --- a/packages/layers/src/core/interface.ts +++ b/packages/layers/src/core/interface.ts @@ -13,6 +13,7 @@ export interface ILineLayerStyleOptions { dashArray?: [number, number]; // 可选参数、虚线间隔 segmentNumber?: number; + depth?: boolean; forward?: boolean; // 可选参数、是否反向(arcLine) lineTexture?: boolean; // 可选参数、是否开启纹理贴图功能(all) iconStep?: number; // 可选参数、纹理贴图步长(all) diff --git a/packages/layers/src/heatmap/models/heatmap.ts b/packages/layers/src/heatmap/models/heatmap.ts index 7dd1ba3cdd..0f7f3e3726 100644 --- a/packages/layers/src/heatmap/models/heatmap.ts +++ b/packages/layers/src/heatmap/models/heatmap.ts @@ -7,7 +7,12 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { generateColorRamp, getMask, IColorRamp } from '@antv/l7-utils'; +import { + generateColorRamp, + getCullFace, + getMask, + IColorRamp, +} from '@antv/l7-utils'; import { mat4 } from 'gl-matrix'; import { inject, injectable } from 'inversify'; import 'reflect-metadata'; @@ -158,6 +163,10 @@ export default class HeatMapModel extends BaseModel { depth: { enable: false, }, + cull: { + enable: true, + face: getCullFace(this.mapService.version), + }, blend: { enable: true, func: { diff --git a/packages/layers/src/line/models/line.ts b/packages/layers/src/line/models/line.ts index 1db717f5c3..a8f0b4e041 100644 --- a/packages/layers/src/line/models/line.ts +++ b/packages/layers/src/line/models/line.ts @@ -147,17 +147,19 @@ export default class LineModel extends BaseModel { const { mask = false, maskInside = true, + depth = false, } = this.layer.getLayerConfig() as ILineLayerStyleOptions; const { frag, vert, type } = this.getShaders(); return [ this.layer.buildLayerModel({ - moduleName: 'line' + type, + moduleName: 'line_' + type, vertexShader: vert, fragmentShader: frag, triangulation: LineTriangulation, primitive: gl.TRIANGLES, blend: this.getBlend(), - depth: { enable: false }, + depth: { enable: depth }, + // depth: { enable: true }, stencil: getMask(mask, maskInside), }), ]; diff --git a/packages/layers/src/plugins/DataMappingPlugin.ts b/packages/layers/src/plugins/DataMappingPlugin.ts index 4157458a51..6cfebbbbb2 100644 --- a/packages/layers/src/plugins/DataMappingPlugin.ts +++ b/packages/layers/src/plugins/DataMappingPlugin.ts @@ -106,6 +106,8 @@ export default class DataMappingPlugin implements ILayerPlugin { layer.setEncodedData( this.mapping(attributes, filterData, undefined, bottomColor), ); + // 对外暴露事件 + layer.emit('dataUpdate', null); } private mapping( diff --git a/packages/layers/src/point/models/extrude.ts b/packages/layers/src/point/models/extrude.ts index 68205bd395..5eab539eb9 100644 --- a/packages/layers/src/point/models/extrude.ts +++ b/packages/layers/src/point/models/extrude.ts @@ -5,7 +5,7 @@ import { ILayerConfig, IModel, } from '@antv/l7-core'; -import { rgb2arr } from '@antv/l7-utils'; +import { getCullFace, rgb2arr } from '@antv/l7-utils'; import { isNumber } from 'lodash'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; @@ -153,7 +153,7 @@ export default class ExtrudeModel extends BaseModel { blend: this.getBlend(), cull: { enable: true, - face: this.mapService.version === 'MAPBOX' ? gl.FRONT : gl.BACK, + face: getCullFace(this.mapService.version), }, depth: { enable: depth, diff --git a/packages/layers/src/point/models/fill.ts b/packages/layers/src/point/models/fill.ts index 3d3353f087..e0c079ed64 100644 --- a/packages/layers/src/point/models/fill.ts +++ b/packages/layers/src/point/models/fill.ts @@ -9,7 +9,7 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; +import { getCullFace, getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; import { @@ -198,7 +198,7 @@ export default class FillModel extends BaseModel { const isGlobel = this.mapService.version === 'GLOBEL'; return [ this.layer.buildLayerModel({ - moduleName: 'pointfill-' + type, + moduleName: 'pointfill_' + type, vertexShader: vert, fragmentShader: frag, triangulation: isGlobel @@ -208,6 +208,10 @@ export default class FillModel extends BaseModel { depth: { enable: isGlobel }, blend: this.getBlend(), stencil: getMask(mask, maskInside), + cull: { + enable: true, + face: getCullFace(this.mapService.version), + }, }), ]; } diff --git a/packages/layers/src/point/models/fillmage.ts b/packages/layers/src/point/models/fillmage.ts index ddbe9ffbba..9097157374 100644 --- a/packages/layers/src/point/models/fillmage.ts +++ b/packages/layers/src/point/models/fillmage.ts @@ -8,7 +8,7 @@ import { IModelUniform, ITexture2D, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; +import { getCullFace, getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; import { PointFillTriangulation } from '../../core/triangulation'; @@ -218,6 +218,10 @@ export default class FillImageModel extends BaseModel { depth: { enable: false }, blend: this.getBlend(), stencil: getMask(mask, maskInside), + cull: { + enable: true, + face: getCullFace(this.mapService.version), + }, }), ]; } diff --git a/packages/layers/src/point/models/radar.ts b/packages/layers/src/point/models/radar.ts index 4ac57cddd2..8eaedada81 100644 --- a/packages/layers/src/point/models/radar.ts +++ b/packages/layers/src/point/models/radar.ts @@ -9,7 +9,7 @@ import { IModel, IModelUniform, } from '@antv/l7-core'; -import { getMask } from '@antv/l7-utils'; +import { getCullFace, getMask } from '@antv/l7-utils'; import BaseModel from '../../core/BaseModel'; import { IPointLayerStyleOptions } from '../../core/interface'; import { PointFillTriangulation } from '../../core/triangulation'; @@ -192,6 +192,10 @@ export default class RadarModel extends BaseModel { depth: { enable: false }, blend: this.getBlend(), stencil: getMask(mask, maskInside), + cull: { + enable: true, + face: getCullFace(this.mapService.version), + }, }), ]; } diff --git a/packages/layers/src/polygon/models/fill.ts b/packages/layers/src/polygon/models/fill.ts index 48f65b3900..894cc7611e 100644 --- a/packages/layers/src/polygon/models/fill.ts +++ b/packages/layers/src/polygon/models/fill.ts @@ -86,7 +86,10 @@ export default class FillModel extends BaseModel { : polygonTriangulation, blend: this.getBlend(), depth: { enable: false }, - + cull: { + enable: true, + face: gl.BACK, // gl.FRONT | gl.BACK; + }, stencil: getMask(mask, maskInside), }), ]; diff --git a/packages/utils/src/cull.ts b/packages/utils/src/cull.ts new file mode 100644 index 0000000000..3900162e51 --- /dev/null +++ b/packages/utils/src/cull.ts @@ -0,0 +1,33 @@ +import { gl } from '@antv/l7-core'; +export function getCullFace( + mapVersion: string | undefined, +): gl.FRONT | gl.BACK { + // 'GAODE1.x' = 'GAODE1.x', + // 'GAODE2.x' = 'GAODE2.x', + // 'MAPBOX' = 'MAPBOX', + // 'L7MAP' = 'L7MAP', + // 'SIMPLE' = 'SIMPLE', + // 'GLOBEL' = 'GLOBEL', + switch (mapVersion) { + case 'GAODE1.x': + return gl.BACK; + break; + case 'GAODE2.x': + return gl.BACK; + break; + case 'MAPBOX': + return gl.FRONT; + break; + case 'SIMPLE': + return gl.FRONT; + break; + case 'GLOBEL': + return gl.BACK; + break; + case 'L7MAP': + return gl.FRONT; + break; + default: + return gl.FRONT; + } +} diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 6244a1e964..d8207b8e83 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -9,5 +9,6 @@ export * from './event'; export * from './color'; export * from './anchor'; export * from './stencli'; +export * from './cull'; import * as Satistics from './statistics'; export { DOM, Satistics }; diff --git a/stories/Map/components/amap2demo_citybuilding.tsx b/stories/Map/components/amap2demo_citybuilding.tsx index 4a638bd67b..9e96d65da5 100644 --- a/stories/Map/components/amap2demo_citybuilding.tsx +++ b/stories/Map/components/amap2demo_citybuilding.tsx @@ -1,5 +1,5 @@ import { CityBuildingLayer, Scene, LineLayer } from '@antv/l7'; -import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; +import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_citybuilding extends React.Component { @@ -13,7 +13,7 @@ export default class Amap2demo_citybuilding extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ style: 'dark', center: [120.160514, 30.243209], pitch: 45, @@ -29,24 +29,24 @@ export default class Amap2demo_citybuilding extends React.Component { .source(await res.json()) .size('floor', [0, 500]) .color('rgba(242,246,250,1.0)') - .animate({ - enable: true, - }) + // .animate({ + // enable: true, + // }) .active({ color: '#0ff', mix: 0.5, }) .style({ - opacity: 0.7, + // opacity: 0.7, baseColor: 'rgb(16, 16, 16)', windowColor: 'rgb(30, 60, 89)', brightColor: 'rgb(255, 176, 38)', - sweep: { - enable: true, - sweepRadius: 2, - sweepColor: '#1990FF', - sweepSpeed: 0.5, - }, + // sweep: { + // enable: true, + // sweepRadius: 2, + // sweepColor: '#1990FF', + // sweepSpeed: 0.5, + // }, }); scene.addLayer(pointLayer); }); @@ -58,11 +58,15 @@ export default class Amap2demo_citybuilding extends React.Component { .then((data) => { const layer = new LineLayer({ zIndex: 0, + // depth: true }) .source(data) .size(1) .shape('line') .color('#1990FF') + .style({ + depth: true, + }) .animate({ interval: 1, // 间隔 duration: 2, // 持续时间，延时 diff --git a/stories/Map/components/amap2demo_heatmap.tsx b/stories/Map/components/amap2demo_heatmap.tsx index 3a8b162542..89d92807e1 100644 --- a/stories/Map/components/amap2demo_heatmap.tsx +++ b/stories/Map/components/amap2demo_heatmap.tsx @@ -1,5 +1,5 @@ import { Scene, HeatmapLayer } from '@antv/l7'; -import { GaodeMap, Mapbox } from '@antv/l7-maps'; +import { GaodeMap, Mapbox, Map } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_heatmap extends React.Component { @@ -13,7 +13,7 @@ export default class Amap2demo_heatmap extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new Mapbox({ + map: new Map({ // pitch: 0, // center: [127.5671666579043, 7.445038892195569], // zoom: 2.632456779444394, diff --git a/stories/Map/components/amap2demo_image.tsx b/stories/Map/components/amap2demo_image.tsx index 5599c2866f..b94bd87f88 100644 --- a/stories/Map/components/amap2demo_image.tsx +++ b/stories/Map/components/amap2demo_image.tsx @@ -1,5 +1,5 @@ import { PointLayer, Scene, LineLayer, PolygonLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, Mapbox, Map } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_image extends React.Component { // @ts-ignore @@ -13,7 +13,7 @@ export default class Amap2demo_image extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ pitch: 0, style: 'light', center: [121.434765, 31.256735], diff --git a/stories/Map/components/amap2demo_polygon.tsx b/stories/Map/components/amap2demo_polygon.tsx index e119255c73..e1c6e6d8ac 100644 --- a/stories/Map/components/amap2demo_polygon.tsx +++ b/stories/Map/components/amap2demo_polygon.tsx @@ -1,5 +1,5 @@ import { PolygonLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_polygon extends React.Component { @@ -17,7 +17,7 @@ export default class Amap2demo_polygon extends React.Component { ); const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ pitch: 0, // style: 'dark', center: [-44.40673828125, -18.375379094031825], diff --git a/stories/Map/components/amap2demo_styleMap.tsx b/stories/Map/components/amap2demo_styleMap.tsx index 6c30bfb37a..8c9d7137e5 100644 --- a/stories/Map/components/amap2demo_styleMap.tsx +++ b/stories/Map/components/amap2demo_styleMap.tsx @@ -1,5 +1,5 @@ import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_styleMap extends React.Component { // @ts-ignore @@ -12,7 +12,7 @@ export default class Amap2demo_styleMap extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new GaodeMapV2({ center: [112, 30.267069], pitch: 0, style: 'dark', diff --git a/stories/Map/components/bugfix.tsx b/stories/Map/components/bugfix.tsx index eb32ec1f84..2dd6527ad8 100644 --- a/stories/Map/components/bugfix.tsx +++ b/stories/Map/components/bugfix.tsx @@ -1,96 +1,6 @@ // @ts-nocheck import React from 'react'; import { Scene, GaodeMap, GaodeMapV2, Mapbox, Map, PointLayer } from '@antv/l7'; -const data = { - type: 'FeatureCollection', - features: [ - { - type: 'Feature', - properties: { - w: 19.1, - t: 24.6, - s: '海南', - l: 11, - m: '东方', - j: 108.6167, - h: '59838', - id: 1, - }, - geometry: { - type: 'Point', - coordinates: [108.6167, 19.1], - }, - }, - { - type: 'Feature', - properties: { - w: 20, - t: 23.8, - s: '海南', - l: 11, - m: '海口', - j: 110.25, - h: '59758', - id: 2, - }, - geometry: { - type: 'Point', - coordinates: [110.25, 20], - }, - }, - { - type: 'Feature', - properties: { - w: 22.275, - t: 23.6, - s: '广东', - l: 12, - m: '珠海', - j: 113.5669, - h: '59488', - id: 3, - }, - geometry: { - type: 'Point', - coordinates: [113.5669, 22.275], - }, - }, - { - type: 'Feature', - properties: { - w: 20.3372, - t: 23.4, - s: '广东', - l: 12, - m: '徐闻', - j: 110.1794, - h: '59754', - id: 4, - }, - geometry: { - type: 'Point', - coordinates: [110.1794, 20.3372], - }, - }, - { - type: 'Feature', - properties: { - w: 19.2089, - t: 23.2, - s: '海南', - l: 12, - m: '琼海', - j: 110.4819, - h: '59855', - id: 5, - }, - geometry: { - type: 'Point', - coordinates: [110.4819, 19.2089], - }, - }, - ], -}; export default class Amap2demo extends React.Component { // @ts-ignore @@ -108,43 +18,43 @@ export default class Amap2demo extends React.Component { // zoom: 14.83, pitch: 0, style: 'light', - center: [121.434765, 31.256735], - zoom: 14.83, + center: [122.5, 30], + zoom: 4, }), }); this.scene = scene; - scene.addImage( - '00', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - - scene.addImage( - '广东', - 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg', - ); - scene.addImage( - '海南', - 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg', - ); + const layer = new PointLayer() + .source( + [ + { lng: 120, lat: 30, c: '#ff0' }, + { lng: 125, lat: 30, c: '#0f0' }, + ], + { + parser: { + type: 'json', + x: 'lng', + y: 'lat', + }, + }, + ) + .shape('circle') + .size(20) + .color('c'); scene.on('loaded', () => { - const imageLayer = new PointLayer({ layerType: 'fillImage' }) - .source(data) - // .shape('fillImage', s => s) - .shape('s', (s) => s) - // .color('#f00') - .size(100) - .active({ - color: '#f00', - mix: 0.5, - }) - .style({ - // rotation: 90 - }) - .fitBounds(); - - scene.addLayer(imageLayer); + scene.addLayer(layer); + // layer.on('dataUpdate', (e) => { + // const le = layer.getLegendItems('color') + // console.log(le) + // }) + layer.on('dataUpdate', (e) => { + const le = layer.getLegendItems('color'); + console.log('scale', le); + }); + layer.setData([{ lng: 121, lat: 30, c: '#000' }]); + // layer.color('#f00') + scene.render(); }); } diff --git a/stories/Map/components/mapCenter.tsx b/stories/Map/components/mapCenter.tsx index b504c9918b..ba7f34a682 100644 --- a/stories/Map/components/mapCenter.tsx +++ b/stories/Map/components/mapCenter.tsx @@ -1,6 +1,6 @@ // @ts-ignore import { PointLayer, Scene, LineLayer, PolygonLayer, ILayer } from '@antv/l7'; -import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; +import { GaodeMap, GaodeMapV2, Mapbox, Map } from '@antv/l7-maps'; import * as React from 'react'; import * as turf from '@turf/turf'; diff --git a/stories/Object/components/radar.tsx b/stories/Object/components/radar.tsx index 8e12d7e4b5..b8226f277c 100644 --- a/stories/Object/components/radar.tsx +++ b/stories/Object/components/radar.tsx @@ -1,5 +1,5 @@ import { PointLayer, Scene } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, Mapbox, Map } from '@antv/l7-maps'; import * as React from 'react'; export default class Amap2demo_polygon extends React.Component { @@ -10,7 +10,7 @@ export default class Amap2demo_polygon extends React.Component { public async componentDidMount() { const scene = new Scene({ id: 'map', - map: new GaodeMap({ + map: new Mapbox({ pitch: 0, center: [120, 30], zoom: 13, diff --git a/stories/Object/components/taifeng.tsx b/stories/Object/components/taifeng.tsx index 990f2ac2fa..6947c04ac6 100644 --- a/stories/Object/components/taifeng.tsx +++ b/stories/Object/components/taifeng.tsx @@ -1,6 +1,6 @@ // @ts-ignore import { PointLayer, Scene, ILayer, LineLayer } from '@antv/l7'; -import { GaodeMap } from '@antv/l7-maps'; +import { GaodeMap, Mapbox, Map } from '@antv/l7-maps'; import * as React from 'react'; import { animate, easeInOut, linear } from 'popmotion'; diff --git a/stories/customMap/components/Map.tsx b/stories/customMap/components/Map.tsx index aa34b5e597..13e60432b2 100644 --- a/stories/customMap/components/Map.tsx +++ b/stories/customMap/components/Map.tsx @@ -10,20 +10,20 @@ export default class ScaleComponent extends React.Component { const scene = new Scene({ id: 'map', map: new Map({ - // center: [0, 0], - center: [5000, 5000], + center: [120, 30], + // center: [5000, 5000], pitch: 0, - zoom: 0, - version: 'SIMPLE', + zoom: 1, + // version: 'SIMPLE', // zoom: 13, // zoom: 10, }), }); // scene.setBgColor('#000'); const data = [ - { x: 5000, y: 5000 }, + // { x: 5000, y: 5000 }, - // { lng: 120, lat: 30 }, + { lng: 120, lat: 30 }, // { lng: 0, lat: 0 }, // { lng: 0, lat: 85.05112 }, @@ -48,8 +48,8 @@ export default class ScaleComponent extends React.Component { .source(data, { parser: { type: 'json', - x: 'x', - y: 'y', + x: 'lng', + y: 'lat', }, }) .shape('circle')