fix: 默认source 配置 (#1331)

* fix: 修改source 为空的问题

* chore: 添加默认渲染
This commit is contained in:
@thinkinggis 2022-09-08 14:34:13 +08:00 committed by GitHub
parent 177d0f48cc
commit 1081a15e11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 32 additions and 163 deletions

View File

@ -84,8 +84,16 @@ export default class BaseLayer<ChildLayerStyleOptions = {}>
public defaultSourceConfig: {
data: any[];
options: ISourceCFG | undefined;
}={
data: [],
options: {
parser: {
type: 'json',
},
},
};
public dataState: IDataState = {
dataSourceNeedUpdate: false,
dataMappingNeedUpdate: false,

View File

@ -2,6 +2,7 @@ import BaseLayer from '../core/BaseLayer';
import EarthAtomSphereModel from './models/atmosphere';
import BaseEarthModel from './models/base';
import EarthBloomSphereModel from './models/bloomsphere';
import { ISourceCFG } from '@antv/l7-core';
interface IEarthLayerStyleOptions {
opacity: number;
@ -20,6 +21,17 @@ const earthLayerTypes = ['base', 'atomSphere', 'bloomSphere'];
export default class EarthLayer extends BaseLayer<IEarthLayerStyleOptions> {
public type: string = 'EarthLayer';
public defaultSourceConfig: {
data: any[];
options: ISourceCFG | undefined;
} = {
data: [],
options: {
parser: {
type: 'json',
},
},
};
public buildModels() {
const shape = this.getModelType();

View File

@ -1,74 +0,0 @@
import { Scene, PointLayer, EarthLayer } from '@antv/l7';
import { Earth } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Earth({})
});
const earthlayer = new EarthLayer()
.source(
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image'
}
}
)
.shape('fill')
.style({
opacity: 1.0,
radius: 40,
globelOtions: {
ambientRatio: 0.6, // 环境光
diffuseRatio: 0.4, // 漫反射
specularRatio: 0.1 // 高光反射
}
})
.animate(true);
const atomLayer = new EarthLayer()
.color('#2E8AE6')
.shape('atomSphere')
.style({
opacity: 1
});
const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
.style({
opacity: 0.6
});
scene.on('loaded', () => {
scene.addLayer(earthlayer);
fetch('https://gw.alipayobjects.com/os/bmw-prod/efef6c2b-2922-4c03-b9e0-d3743f68eaf2.json')
.then(res => res.json())
.then(data => {
const pointlayer = new PointLayer()
.source(data,
{
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
}
)
.shape('cylinder')
.color('#f00')
.size('', () => [ 1, 1, 10 ])
.active(true);
scene.addLayer(pointlayer);
});
scene.addLayer(atomLayer);
scene.addLayer(bloomLayer);
earthlayer.setEarthTime(4.0);
});
// {
// "filename": "cylinder.js",
// "title": "圆柱图层",
// "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*v26ESpAZd1AAAAAAAAAAAAAAARQnAQ"
// }

View File

@ -1,4 +0,0 @@
---
title: PointLayer
order: 0
---

View File

@ -1,4 +0,0 @@
---
title: 点图层
order: 0
---

View File

@ -1,73 +0,0 @@
import { Scene, PointLayer, EarthLayer } from '@antv/l7';
import { Earth } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new Earth({})
});
const earthlayer = new EarthLayer()
.source(
'https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*3-3NSpqRqUoAAAAAAAAAAAAAARQnAQ',
{
parser: {
type: 'image'
}
}
)
.shape('base')
.style({
opacity: 1.0,
radius: 40,
globelOtions: {
ambientRatio: 0.6, // 环境光
diffuseRatio: 0.4, // 漫反射
specularRatio: 0.1 // 高光反射
}
})
.animate(true);
const atomLayer = new EarthLayer()
.color('#2E8AE6')
.shape('atomSphere')
.style({
opacity: 1
});
const bloomLayer = new EarthLayer().color('#fff').shape('bloomSphere')
.style({
opacity: 0.6
});
scene.on('loaded', () => {
scene.addLayer(earthlayer);
fetch('https://gw.alipayobjects.com/os/bmw-prod/efef6c2b-2922-4c03-b9e0-d3743f68eaf2.json')
.then(res => res.json())
.then(data => {
const pointlayer = new PointLayer()
.source(data,
{
parser: {
type: 'json',
x: 'lng',
y: 'lat'
}
}
)
.shape('circle')
.color('#f00')
.size(10)
.active(true);
scene.addLayer(pointlayer);
});
scene.addLayer(atomLayer);
scene.addLayer(bloomLayer);
earthlayer.setEarthTime(4.0);
});
// {
// "filename": "point.js",
// "title": "点图层",
// "screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*-kG0TIHBfvgAAAAAAAAAAAAAARQnAQ"
// },

View File

@ -1,7 +0,0 @@
{
"title": {
"zh": "地球模式 - 点图层",
"en": "Earth Mode - pointLayer"
},
"demos": []
}

View File

@ -1,4 +1,4 @@
import { ILayer, IMercator } from '@antv/l7-core';
import { ILayer, IMercator, ISourceCFG } from '@antv/l7-core';
import { BaseLayer } from '@antv/l7-layers';
import {
AnimationMixer,
@ -28,6 +28,17 @@ export default class ThreeJSLayer
private animateMixer: AnimationMixer[] = [];
// 地图中点墨卡托坐标
private center: IMercator;
public defaultSourceConfig: {
data: any[];
options: ISourceCFG | undefined;
} = {
data: [],
options: {
parser: {
type: 'json',
},
},
};
public setUpdate(callback: () => void) {
this.update = callback;