From 300a8a790c56ec0ce9a8f9d5e14fdf74afb2380e Mon Sep 17 00:00:00 2001 From: YiQianYao <42212176+2912401452@users.noreply.github.com> Date: Fri, 26 Nov 2021 14:22:03 +0800 Subject: [PATCH] Shihui dev (#853) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 完善高德地图和 Mapbox 不同地图之间层级和大小表现相同 * style: lint style --- lerna.json | 2 +- packages/component/package.json | 6 +- packages/core/package.json | 4 +- packages/l7/package.json | 14 ++--- packages/l7/src/version.ts | 2 +- packages/layers/package.json | 8 +-- packages/map/package.json | 4 +- packages/maps/package.json | 8 +-- packages/maps/src/amap/map.ts | 14 +++-- packages/maps/src/amap2/map.ts | 16 +++-- packages/mini/package.json | 12 ++-- packages/renderer/package.json | 4 +- packages/scene/package.json | 14 ++--- packages/source/package.json | 6 +- packages/three/package.json | 8 +-- packages/utils/package.json | 2 +- stories/React/React.stories.tsx | 2 + stories/React/components/worldLayer.tsx | 81 +++++++++++++++++++++++++ stories/customMap/components/Map.tsx | 3 + 19 files changed, 155 insertions(+), 55 deletions(-) create mode 100644 stories/React/components/worldLayer.tsx diff --git a/lerna.json b/lerna.json index fb3299d9e8..f07dd27ef5 100644 --- a/lerna.json +++ b/lerna.json @@ -14,7 +14,7 @@ "message": "chore: publish" } }, - "version": "2.5.59", + "version": "2.5.60", "npmClient": "yarn", "useWorkspaces": true, "publishConfig": { diff --git a/packages/component/package.json b/packages/component/package.json index 9720cd7338..dd5e280098 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-component", - "version": "2.5.59", + "version": "2.5.60", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -25,8 +25,8 @@ "author": "lzxue", "license": "ISC", "dependencies": { - "@antv/l7-core": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.5.60", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7", "eventemitter3": "^4.0.0", "inversify": "^5.0.1", diff --git a/packages/core/package.json b/packages/core/package.json index 804a971d83..86852967fc 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-core", - "version": "2.5.59", + "version": "2.5.60", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -24,7 +24,7 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7", "ajv": "^6.10.2", "element-resize-event": "^3.0.3", diff --git a/packages/l7/package.json b/packages/l7/package.json index f06e56f99b..4342a211ed 100644 --- a/packages/l7/package.json +++ b/packages/l7/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7", - "version": "2.5.59", + "version": "2.5.60", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,12 +25,12 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-component": "^2.5.59", - "@antv/l7-core": "^2.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-maps": "^2.5.59", - "@antv/l7-scene": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-component": "^2.5.60", + "@antv/l7-core": "^2.5.60", + "@antv/l7-layers": "^2.5.60", + "@antv/l7-maps": "^2.5.60", + "@antv/l7-scene": "^2.5.60", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/l7/src/version.ts b/packages/l7/src/version.ts index b3cd251d29..bbe483b474 100644 --- a/packages/l7/src/version.ts +++ b/packages/l7/src/version.ts @@ -1,2 +1,2 @@ -const version = '2.5.59'; +const version = '2.5.60'; export { version }; diff --git a/packages/layers/package.json b/packages/layers/package.json index 534f34e0ca..bb005a3e19 100644 --- a/packages/layers/package.json +++ b/packages/layers/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-layers", - "version": "2.5.59", + "version": "2.5.60", "description": "L7's collection of built-in layers", "main": "lib/index.js", "module": "es/index.js", @@ -24,9 +24,9 @@ "license": "ISC", "dependencies": { "@antv/geo-coord": "^1.0.8", - "@antv/l7-core": "^2.5.59", - "@antv/l7-source": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.5.60", + "@antv/l7-source": "^2.5.60", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7", "@mapbox/martini": "^0.2.0", "@turf/meta": "^6.0.2", diff --git a/packages/map/package.json b/packages/map/package.json index c00fa048d7..c7e7bee266 100644 --- a/packages/map/package.json +++ b/packages/map/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-map", - "version": "2.5.59", + "version": "2.5.60", "description": "l7 map", "keywords": [], "author": "thinkinggis ", @@ -37,7 +37,7 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-utils": "^2.5.59", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7", "@mapbox/point-geometry": "^0.1.0", "@mapbox/unitbezier": "^0.0.0", diff --git a/packages/maps/package.json b/packages/maps/package.json index a2c81bd0b0..605e20a1c2 100644 --- a/packages/maps/package.json +++ b/packages/maps/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-maps", - "version": "2.5.59", + "version": "2.5.60", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -27,9 +27,9 @@ "license": "ISC", "dependencies": { "@amap/amap-jsapi-loader": "^0.0.3", - "@antv/l7-core": "^2.5.59", - "@antv/l7-map": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.5.60", + "@antv/l7-map": "^2.5.60", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7", "@types/amap-js-api": "^1.4.6", "@types/mapbox-gl": "^1.11.2", diff --git a/packages/maps/src/amap/map.ts b/packages/maps/src/amap/map.ts index 1260b0fec5..d830bec554 100644 --- a/packages/maps/src/amap/map.ts +++ b/packages/maps/src/amap/map.ts @@ -142,7 +142,8 @@ export default class AMapService } public setZoom(zoom: number): void { - return this.map.setZoom(zoom); + // 统一设置 Mapbox 缩放等级 + return this.map.setZoom(zoom + 1); } public getCenter(options?: ICameraOptions): ILngLat { @@ -359,13 +360,18 @@ export default class AMapService this.$mapContainer = this.creatAmapContainer( id as string | HTMLDivElement, ); - - const map = new AMap.Map(this.$mapContainer, { + const mapConstructorOptions = { mapStyle: this.getMapStyle(style as string), zooms: [minZoom, maxZoom], viewMode: '3D', ...rest, - }); + }; + if (mapConstructorOptions.zoom) { + // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级 + mapConstructorOptions.zoom += 1; + } + // @ts-ignore + const map = new AMap.Map(this.$mapContainer, mapConstructorOptions); // 监听地图相机事件 map.on('camerachange', this.handleCameraChanged); // @ts-ignore diff --git a/packages/maps/src/amap2/map.ts b/packages/maps/src/amap2/map.ts index ed3e137e11..b0c615da00 100644 --- a/packages/maps/src/amap2/map.ts +++ b/packages/maps/src/amap2/map.ts @@ -207,11 +207,13 @@ export default class AMapService return 'amap2'; } public getZoom(): number { - return this.map.getZoom(); + // 统一返回 Mapbox 缩放等级 + return this.map.getZoom() - 1; } public setZoom(zoom: number): void { - return this.map.setZoom(zoom); + // 统一设置 Mapbox 缩放等级 + return this.map.setZoom(zoom + 1); } public getCenter(options?: ICameraOptions): ILngLat { @@ -445,12 +447,18 @@ export default class AMapService this.$mapContainer = this.creatAmapContainer( id as string | HTMLDivElement, ); - const map = new AMap.Map(this.$mapContainer, { + const mapConstructorOptions = { mapStyle: this.getMapStyle(style as string), zooms: [minZoom, maxZoom], viewMode: '3D', ...rest, - }); + }; + if (mapConstructorOptions.zoom) { + // TODO: 高德地图在相同大小下需要比 MapBox 多一个 zoom 层级 + mapConstructorOptions.zoom += 1; + } + // @ts-ignore + const map = new AMap.Map(this.$mapContainer, mapConstructorOptions); // @ts-ignore this.map = map; // 在使用 map.customCoords 的时候必须使用 diff --git a/packages/mini/package.json b/packages/mini/package.json index c883df06c3..09e0f53b14 100644 --- a/packages/mini/package.json +++ b/packages/mini/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-mini", - "version": "2.5.59", + "version": "2.5.60", "description": "A Large-scale WebGL-powered Geospatial Data Visualization", "main": "lib/index.js", "module": "es/index.js", @@ -25,11 +25,11 @@ "author": "antv", "license": "MIT", "dependencies": { - "@antv/l7-core": "^2.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-maps": "^2.5.59", - "@antv/l7-scene": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.5.60", + "@antv/l7-layers": "^2.5.60", + "@antv/l7-maps": "^2.5.60", + "@antv/l7-scene": "^2.5.60", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7" }, "gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31", diff --git a/packages/renderer/package.json b/packages/renderer/package.json index eebd2772aa..0a7fd5b05b 100644 --- a/packages/renderer/package.json +++ b/packages/renderer/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-renderer", - "version": "2.5.59", + "version": "2.5.60", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,7 +26,7 @@ "gl": "^4.4.0" }, "dependencies": { - "@antv/l7-core": "^2.5.59", + "@antv/l7-core": "^2.5.60", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "l7regl": "^0.0.16", diff --git a/packages/scene/package.json b/packages/scene/package.json index ef40985bb4..0e6dba4897 100644 --- a/packages/scene/package.json +++ b/packages/scene/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-scene", - "version": "2.5.59", + "version": "2.5.60", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -23,12 +23,12 @@ "author": "xiaoiver", "license": "ISC", "dependencies": { - "@antv/l7-component": "^2.5.59", - "@antv/l7-core": "^2.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-maps": "^2.5.59", - "@antv/l7-renderer": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-component": "^2.5.60", + "@antv/l7-core": "^2.5.60", + "@antv/l7-layers": "^2.5.60", + "@antv/l7-maps": "^2.5.60", + "@antv/l7-renderer": "^2.5.60", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "mapbox-gl": "^1.2.1", diff --git a/packages/source/package.json b/packages/source/package.json index c8c50b02bd..b0694fbbca 100644 --- a/packages/source/package.json +++ b/packages/source/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-source", - "version": "2.5.59", + "version": "2.5.60", "description": "", "main": "lib/index.js", "module": "es/index.js", @@ -26,8 +26,8 @@ "license": "ISC", "dependencies": { "@antv/async-hook": "^2.1.0", - "@antv/l7-core": "^2.5.59", - "@antv/l7-utils": "^2.5.59", + "@antv/l7-core": "^2.5.60", + "@antv/l7-utils": "^2.5.60", "@babel/runtime": "^7.7.7", "@mapbox/geojson-rewind": "^0.4.0", "@turf/helpers": "^6.1.4", diff --git a/packages/three/package.json b/packages/three/package.json index 6ea2f9b69e..871136de34 100644 --- a/packages/three/package.json +++ b/packages/three/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-three", - "version": "2.5.59", + "version": "2.5.60", "description": "three for L7 ", "keywords": [ "3D", @@ -44,9 +44,9 @@ }, "homepage": "https://github.com/antvis/L7#readme", "dependencies": { - "@antv/l7-core": "^2.5.59", - "@antv/l7-layers": "^2.5.59", - "@antv/l7-scene": "^2.5.59", + "@antv/l7-core": "^2.5.60", + "@antv/l7-layers": "^2.5.60", + "@antv/l7-scene": "^2.5.60", "@babel/runtime": "^7.7.7", "inversify": "^5.0.1", "reflect-metadata": "^0.1.13", diff --git a/packages/utils/package.json b/packages/utils/package.json index a7abbff68f..a2dac69f6e 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -1,6 +1,6 @@ { "name": "@antv/l7-utils", - "version": "2.5.59", + "version": "2.5.60", "description": "", "main": "lib/index.js", "module": "es/index.js", diff --git a/stories/React/React.stories.tsx b/stories/React/React.stories.tsx index 63233a1756..2bfa67c89a 100644 --- a/stories/React/React.stories.tsx +++ b/stories/React/React.stories.tsx @@ -2,6 +2,7 @@ import { storiesOf } from '@storybook/react'; import * as React from 'react'; import GaodeMapScene from './components/Scene'; import WorldMap from './components/world'; +import WorldLayer from './components/worldLayer'; import WorldExtrueMap from './components/world_ncov'; import WorldBubbleMap from './components/world_ncov_bubble'; import WorldBubbleAnimateMap from './components/world_ncov_bubble_animate'; @@ -11,6 +12,7 @@ import WorldFillMap from './components/world_ncov_fill'; // @ts-ignore storiesOf('React', module).add('高德地图', () => ); storiesOf('React', module).add('世界地图', () => ); +storiesOf('React', module).add('WorldLayer', () => ); storiesOf('React', module).add('疫情地图-填充图', () => ); storiesOf('React', module).add('疫情地图-气泡图', () => ); storiesOf('React', module).add('疫情地图-3D柱图', () => ); diff --git a/stories/React/components/worldLayer.tsx b/stories/React/components/worldLayer.tsx new file mode 100644 index 0000000000..576dd41eb3 --- /dev/null +++ b/stories/React/components/worldLayer.tsx @@ -0,0 +1,81 @@ +import { Scene } from '@antv/l7'; +import { WorldLayer } from '@antv/l7-district'; +import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps'; +import * as React from 'react'; + +export default class Country 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({ + pitch: 0, + style: 'dark', + center: [116.2825, 39.9], + // zoom: 0, + zoom: 3, + // minZoom: 0, + maxZoom: 24, + }), + }); + scene.on('loaded', () => { + const Layer = new WorldLayer(scene, { + autoFit: false, + data: [], + geoDataLevel: 2, + joinBy: ['SOC', 'SOC'], + fill: { + color: { + field: 'NAME_CHN', + values: ['rgba(1.0, 0.0, 0.0, 0.5)'], + }, + }, + stroke: '#ccc', + label: { + enable: true, + textAllowOverlap: false, + field: 'NAME_ENG', + padding: [5, 5], + }, + popup: { + // enable: true, + enable: false, + Html: (props) => { + return `${props.NAME_CHN}`; + }, + }, + }); + // @ts-ignore + // window.onresize = () => Layer.fillLayer.fitBounds() + + // scene.setZoom(4) + // console.log(scene.getZoom()) + setTimeout(() => { + console.log('***', scene.getZoom()); + }, 1500); + }); + + this.scene = scene; + } + + public render() { + return ( +
+ ); + } +} diff --git a/stories/customMap/components/Map.tsx b/stories/customMap/components/Map.tsx index df6e993d04..d8b086d4f6 100644 --- a/stories/customMap/components/Map.tsx +++ b/stories/customMap/components/Map.tsx @@ -107,6 +107,7 @@ export default class ScaleComponent extends React.Component { const layer = new PolygonLayer({ name: '01', + autoFit: true, }) .source(data) .size('name', [0, 10000, 50000, 30000, 100000]) @@ -124,6 +125,8 @@ export default class ScaleComponent extends React.Component { opacity: 1.0, }); scene.addLayer(layer); + + window.onresize = () => layer.fitBounds(); }); scene.on('loaded', () => {