Shihui dev (#853)

* feat: 完善高德地图和 Mapbox 不同地图之间层级和大小表现相同

* style: lint style
This commit is contained in:
YiQianYao 2021-11-26 14:22:03 +08:00 committed by GitHub
parent f5fc6c7cc7
commit 300a8a790c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 155 additions and 55 deletions

View File

@ -14,7 +14,7 @@
"message": "chore: publish"
}
},
"version": "2.5.59",
"version": "2.5.60",
"npmClient": "yarn",
"useWorkspaces": true,
"publishConfig": {

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -1,2 +1,2 @@
const version = '2.5.59';
const version = '2.5.60';
export { version };

View File

@ -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",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-map",
"version": "2.5.59",
"version": "2.5.60",
"description": "l7 map",
"keywords": [],
"author": "thinkinggis <lzx199065@gmail.com>",
@ -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",

View File

@ -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",

View File

@ -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

View File

@ -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 的时候必须使用

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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('高德地图', () => <GaodeMapScene />);
storiesOf('React', module).add('世界地图', () => <WorldMap />);
storiesOf('React', module).add('WorldLayer', () => <WorldLayer />);
storiesOf('React', module).add('疫情地图-填充图', () => <WorldFillMap />);
storiesOf('React', module).add('疫情地图-气泡图', () => <WorldBubbleMap />);
storiesOf('React', module).add('疫情地图-3D柱图', () => <WorldColumnMap />);

View File

@ -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 `<span>${props.NAME_CHN}</span>`;
},
},
});
// @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 (
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
);
}
}

View File

@ -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', () => {