mirror of https://gitee.com/antv-l7/antv-l7
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:
parent
7bfdb4b7c1
commit
fa9101ed04
|
@ -14,7 +14,7 @@
|
|||
"message": "chore: publish"
|
||||
}
|
||||
},
|
||||
"version": "2.5.33",
|
||||
"version": "2.5.34",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"publishConfig": {
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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'];
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
const version = '2.5.33';
|
||||
const version = '2.5.34';
|
||||
export { version };
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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, // 漫反射
|
||||
|
|
|
@ -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, // 漫反射
|
||||
|
|
Loading…
Reference in New Issue