Shihui dev (#798)

* feat: add getModelMatrix into viewport

* feat: 新增地球模式 (初步构建)

* feat: 完善地球交互

* style: lint style

* feat: 调整地球图层缩放的方向

* style: lint style

* feat: 增加地球模式的 pointLayer/fill 图层

* style: lint style

* feat: 增加地球、太阳的简单运动系统,优化部分代码结构

* fix: 修复时间点击出错

* style: lint style

* fix: 修复地图 panBy 方法参数错误

* style: lint style

* feat: pointLayer/cylinder 圆柱兼容地球模式

* style: lint style

* feat: 修复 pointLayer/fill 在拾取是破面严重的情况

* style: lint style

* feat: 增加 arc 弧度调节

* feat: 增加 lineLayer/arc3d 兼容地球模式

* style: lint style

* feat: 增加地球图层 - 大气层

* style: lint style

* feat: 增加设置可视化层背景色的能力

* style: lint style

* feat: 增加地球外发光效果

* style: lint style

* feat: 允许用户不使用 layer 的 source 方法 - 地球模式下光晕图层不需要传数据

* style: lint style

* feat: 调整光晕的 shader 计算

* chore: update version 2.5.32 -> 2.5.33

* feat: 调整地球大气层的渲染层级

* style: lint style

* feat: 调整案例

* style: lint style

* chore: update version 2.5.34 -> 2.5.35

* feat: 增加地球图层的默认参数、调整部分代码

* style: lint style
This commit is contained in:
YiQianYao 2021-10-13 16:21:42 +08:00 committed by GitHub
parent 7bfdb4b7c1
commit fa9101ed04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 132 additions and 101 deletions

View File

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

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-component",
"version": "2.5.33",
"version": "2.5.34",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -25,8 +25,8 @@
"author": "lzxue",
"license": "ISC",
"dependencies": {
"@antv/l7-core": "^2.5.33",
"@antv/l7-utils": "^2.5.33",
"@antv/l7-core": "^2.5.34",
"@antv/l7-utils": "^2.5.34",
"@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.33",
"version": "2.5.34",
"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.33",
"@antv/l7-utils": "^2.5.34",
"@babel/runtime": "^7.7.7",
"@mapbox/tiny-sdf": "^1.1.1",
"ajv": "^6.10.2",

View File

@ -106,7 +106,85 @@ export interface IMapService<RawMap = {}> {
}
| undefined,
): void;
clearColor?(): void;
}
export interface IEarthService<RawMap = {}> {
version?: string;
map: RawMap;
bgColor: string;
setBgColor(color: string): void;
init(): void;
initViewPort?(): void;
destroy(): void;
onCameraChanged(callback: (viewport: IViewport) => void): void;
// init map
addMarkerContainer(): void;
getMarkerContainer(): HTMLElement;
// MapEvent // 定义事件类型
on(type: string, handler: (...args: any[]) => void): void;
off(type: string, handler: (...args: any[]) => void): void;
once(type: string, handler: (...args: any[]) => void): void;
// get dom
getContainer(): HTMLElement | null;
getSize(): [number, number];
// get map status method
getMinZoom(): number;
getMaxZoom(): number;
// get map params
getType(): string;
getZoom(): number;
getCenter(option?: ICameraOptions): ILngLat;
getPitch(): number;
getRotation(): number;
getBounds(): Bounds;
getMapContainer(): HTMLElement | null;
getMapCanvasContainer(): HTMLElement;
// control with raw map
setRotation(rotation: number): void;
zoomIn(option?: any, eventData?: any): void;
zoomOut(option?: any, eventData?: any): void;
panTo(p: Point): void;
panBy(x: number, y: number): void;
fitBounds(bound: Bounds, fitBoundsOptions?: unknown): void;
setZoomAndCenter(zoom: number, center: Point): void;
setCenter(center: [number, number], option?: ICameraOptions): void;
setPitch(pitch: number): void;
setZoom(zoom: number): void;
setMapStyle(style: any): void;
setMapStatus(option: Partial<IStatusOptions>): void;
// coordinates methods
pixelToLngLat(pixel: Point): ILngLat;
lngLatToPixel(lnglat: Point): IPoint;
containerToLngLat(pixel: Point): ILngLat;
lngLatToContainer(lnglat: Point): IPoint;
lngLatToMercator(lnglat: [number, number], altitude: number): IMercator;
getModelMatrix(
lnglat: [number, number],
altitude: number,
rotate: [number, number, number],
scale: [number, number, number],
origin: IMercator,
): number[];
lngLatToCoord?(lnglat: [number, number]): [number, number];
lngLatToCoords?(
lnglatArray: number[][][] | number[][],
): number[][][] | number[][] | number[][][] | number[][];
// lngLatToCoords?(lnglatArray: any): any;
getCustomCoordCenter?(): [number, number];
exportMap(type: 'jpg' | 'png'): string;
// 地球模式下的地图方法/属性
rotateY?(
option:
| {
force?: boolean;
reg?: number;
}
| undefined,
): void;
}
export const MapServiceEvent = ['mapload'];

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7",
"version": "2.5.33",
"version": "2.5.34",
"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.33",
"@antv/l7-core": "^2.5.33",
"@antv/l7-layers": "^2.5.33",
"@antv/l7-maps": "^2.5.33",
"@antv/l7-scene": "^2.5.33",
"@antv/l7-utils": "^2.5.33",
"@antv/l7-component": "^2.5.34",
"@antv/l7-core": "^2.5.34",
"@antv/l7-layers": "^2.5.34",
"@antv/l7-maps": "^2.5.34",
"@antv/l7-scene": "^2.5.34",
"@antv/l7-utils": "^2.5.34",
"@babel/runtime": "^7.7.7"
},
"gitHead": "684ba4eb806a798713496d3fc0b4d1e17517dc31",

View File

@ -1,2 +1,2 @@
const version = '2.5.33';
const version = '2.5.34';
export { version };

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-layers",
"version": "2.5.33",
"version": "2.5.34",
"description": "L7's collection of built-in layers",
"main": "lib/index.js",
"module": "es/index.js",
@ -24,9 +24,9 @@
"license": "ISC",
"dependencies": {
"@antv/async-hook": "^2.1.0",
"@antv/l7-core": "^2.5.33",
"@antv/l7-source": "^2.5.33",
"@antv/l7-utils": "^2.5.33",
"@antv/l7-core": "^2.5.34",
"@antv/l7-source": "^2.5.34",
"@antv/l7-utils": "^2.5.34",
"@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.33",
"version": "2.5.34",
"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.33",
"@antv/l7-utils": "^2.5.34",
"@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.33",
"version": "2.5.34",
"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.33",
"@antv/l7-map": "^2.5.33",
"@antv/l7-utils": "^2.5.33",
"@antv/l7-core": "^2.5.34",
"@antv/l7-map": "^2.5.34",
"@antv/l7-utils": "^2.5.34",
"@babel/runtime": "^7.7.7",
"@types/amap-js-api": "^1.4.6",
"@types/mapbox-gl": "^1.11.2",

View File

@ -2,6 +2,11 @@ import { IMapCamera, IViewport } from '@antv/l7-core';
import { mat4, vec3 } from 'gl-matrix';
import WebMercatorViewport from 'viewport-mercator-project';
export interface IEarthCamera {
viewportHeight: number;
viewportWidth: number;
}
export default class Viewport implements IViewport {
// TODO: 初始化相机的姿态 看向地球
private xzReg: number = -Math.PI * 0.6;
@ -21,7 +26,7 @@ export default class Viewport implements IViewport {
private ViewProjectionMatrixUncentered: mat4 = mat4.create();
private viewUncenteredMatrix: mat4 = mat4.create();
public syncWithMapCamera(mapCamera: Partial<IMapCamera>) {
public syncWithMapCamera(mapCamera: Partial<IEarthCamera>) {
const { viewportHeight = 1, viewportWidth = 1 } = mapCamera;
const aspect = viewportWidth / viewportHeight;
const near = 0.1;

View File

@ -5,13 +5,12 @@ import {
Bounds,
CoordinateSystem,
ICoordinateSystemService,
IEarthService,
IGlobalConfigService,
ILngLat,
IMapConfig,
IMapService,
IMercator,
IPoint,
IRendererService,
IStatusOptions,
IViewport,
MapServiceEvent,
@ -39,7 +38,7 @@ const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
* AMapService
*/
@injectable()
export default class L7MapService implements IMapService<Map> {
export default class L7EarthService implements IEarthService<Map> {
public version: string = Version.GLOBEL;
public map: Map;
@ -55,9 +54,6 @@ export default class L7MapService implements IMapService<Map> {
@inject(TYPES.ICoordinateSystemService)
private readonly coordinateSystemService: ICoordinateSystemService;
@inject(TYPES.IRendererService)
private readonly renderService: IRendererService;
@inject(TYPES.IEventEmitter)
private eventEmitter: any;
private viewport: Viewport;
@ -332,23 +328,14 @@ export default class L7MapService implements IMapService<Map> {
this.viewport.rotateY(reg);
this.viewport.syncWithMapCamera({
bearing: this.map.getBearing(),
viewportHeight: this.map.transform.height,
pitch: this.map.getPitch(),
viewportWidth: this.map.transform.width,
zoom: this.map.getZoom(),
// mapbox 中固定相机高度为 viewport 高度的 1.5 倍
cameraHeight: 0,
});
this.cameraChangedCallback(this.viewport);
}
}
public clearColor() {
this.renderService.clear({ color: [0.0, 0.0, 0.0, 1.0] });
}
private handleCameraChanged = (e: any) => {
const DELAY_TIME = 2000;
this.handleCameraChanging = true;
@ -389,13 +376,8 @@ export default class L7MapService implements IMapService<Map> {
// resync
this.viewport.syncWithMapCamera({
bearing: this.map.getBearing(),
viewportHeight: this.map.transform.height,
pitch: this.map.getPitch(),
viewportWidth: this.map.transform.width,
zoom: this.map.getZoom(),
// mapbox 中固定相机高度为 viewport 高度的 1.5 倍
cameraHeight: 0,
});
// set coordinate system
if (

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-renderer",
"version": "2.5.33",
"version": "2.5.34",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -26,7 +26,7 @@
"gl": "^4.4.0"
},
"dependencies": {
"@antv/l7-core": "^2.5.33",
"@antv/l7-core": "^2.5.34",
"@babel/runtime": "^7.7.7",
"inversify": "^5.0.1",
"l7regl": "^0.0.14",

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-scene",
"version": "2.5.33",
"version": "2.5.34",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",
@ -23,12 +23,12 @@
"author": "xiaoiver",
"license": "ISC",
"dependencies": {
"@antv/l7-component": "^2.5.33",
"@antv/l7-core": "^2.5.33",
"@antv/l7-layers": "^2.5.33",
"@antv/l7-maps": "^2.5.33",
"@antv/l7-renderer": "^2.5.33",
"@antv/l7-utils": "^2.5.33",
"@antv/l7-component": "^2.5.34",
"@antv/l7-core": "^2.5.34",
"@antv/l7-layers": "^2.5.34",
"@antv/l7-maps": "^2.5.34",
"@antv/l7-renderer": "^2.5.34",
"@antv/l7-utils": "^2.5.34",
"@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.33",
"version": "2.5.34",
"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.33",
"@antv/l7-utils": "^2.5.33",
"@antv/l7-core": "^2.5.34",
"@antv/l7-utils": "^2.5.34",
"@babel/runtime": "^7.7.7",
"@mapbox/geojson-rewind": "^0.4.0",
"@turf/helpers": "^6.1.4",

View File

@ -7,7 +7,8 @@ export default function image(
data: string | string[],
cfg: IImageCfg,
): IParserData {
const { extent } = cfg;
// TODO: 为 extent 赋默认值
const { extent = [121.168, 30.2828, 121.384, 30.4219] } = cfg;
const images = new Promise((resolve) => {
loadData(data, (res: any) => {
resolve(res);

View File

@ -1,6 +1,6 @@
{
"name": "@antv/l7-three",
"version": "2.5.33",
"version": "2.5.34",
"description": "three for L7 ",
"keywords": [
"3D",
@ -44,9 +44,9 @@
},
"homepage": "https://github.com/antvis/L7#readme",
"dependencies": {
"@antv/l7-core": "^2.5.33",
"@antv/l7-layers": "^2.5.33",
"@antv/l7-scene": "^2.5.33",
"@antv/l7-core": "^2.5.34",
"@antv/l7-layers": "^2.5.34",
"@antv/l7-scene": "^2.5.34",
"@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.33",
"version": "2.5.34",
"description": "",
"main": "lib/index.js",
"module": "es/index.js",

View File

@ -385,43 +385,17 @@ export default class ScaleComponent extends React.Component {
// .animate(true)
.active(true);
// scene.addLayer(pointlayer);
// let pointlayer = new PointLayer()
// .source(
// [
// {
// lng: 120,
// lat: 30,
// },
// ],
// {
// parser: {
// type: 'json',
// x: 'lng',
// y: 'lat',
// },
// },
// )
// .shape('circle')
// .color('rgba(255, 0, 0, 1.0)')
// .size(200);
const earthlayer = new EarthLayer()
.source(
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image',
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
)
.color('#2E8AE6')
.shape('fill')
.shape('base')
.style({
opacity: 1.0,
radius: 40,
globelOtions: {
ambientRatio: 0.6, // 环境光
diffuseRatio: 0.4, // 漫反射

View File

@ -14,11 +14,7 @@ export default class ScaleComponent extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new Earth({
center: [120, 30],
pitch: 0,
zoom: 3,
}),
map: new Earth({}),
});
scene.setBgColor('#333');
@ -70,16 +66,11 @@ export default class ScaleComponent extends React.Component {
{
parser: {
type: 'image',
extent: [121.168, 30.2828, 121.384, 30.4219],
},
},
)
// .color('#2E8AE6')
.color('#f00')
.shape('fill')
.style({
opacity: 1.0,
radius: 40,
globelOtions: {
ambientRatio: 0.6, // 环境光
diffuseRatio: 0.4, // 漫反射