mirror of https://gitee.com/antv-l7/antv-l7
Shihui (#985)
* feat: 增加 bloomPass1.0、修改渲染流程，让 multiPass 有正确的渲染顺序 * style: lint style * feat: 取消 bloom 在 postprocessor 中的多次渲染（没有明显优化） * feat: polygon extrude 模式支持配置固定高度 * style: lint style * feat: 优化后处理 bloom 的效果 * feat: 修改交替绘制 bloom 的写法 * style: lint style * feat: 完善 iconService 加载渲染和销毁 * style: lint style * feat: 补全 mapbox 模式下等面积点 * style: lint style * fix: 修复 pointLayer animate 模式 opacity 失效 * style: lint style * feat: 拆分 pointLayer 的 shader * style: lint sytle * feat: 拆分 lineLayer 的 linear 模式 * style: lint style * feat: 优化点击的拾取判断 * style: lint style * feat: 取消圆柱 shader 中的三元表达式、增强健壮性 * feat: 点图层圆柱体支持固定高度配置 heightfixed * feat: 点图层圆柱体支持拾取高亮颜色的光照计算 * style: lint style * style: lint style * feat: 拆分 lintLayer line 模式下的 dash line * style: lint style * feat: lineLayer simpleline 的 linear shader 代码拆分 * style: lint style * feat: 拆分 lineLayer arcLine linear shader 代码 * style: line style * feat: lineLayer arc line 在 shader 中移除 linear 部分计算 * feat: 拆分 lineLayer arc dash 虚线的 shader 代码 * style: lint style * feat: 拆分 lineLayer arc3d linear 部分的 shader 代码 * style: lint style * style: lint style * feat: 完善 isMiniAli 的判断，兼容 smallfish H5+ 的模式 * style: lint style * style: adjust mulpass demo * feat: 提供 getScale 方法 * style: lint style * feat: 修复支付宝小程序h5+开发模式下引入l7样式失效问题 * feat: 修改 l7hammerjs 的导入 * fix: 恢复原有的 picking shader 代码，解决移动端高亮存在冲突破面的情况 * feat: 重新设置 l7hammerjs 的导入方式 * fix: 修复 createTexture 的数据类型在 支付宝 环境中使用 Uint8ClampedArray 存在数据类型不兼容的现象 * style: lint style * feat: 兼容高德地图 2.x 在部分安卓手机上点击拾取失效的情况 * style: lint style * feat: 优化经典热力图显示效果 * style: lint style * feat: 修改 setBlend 方法、返回当前的 layer 对象 * feat: 完善在点图层未传入数据的情况下判断 shape 类型 * style: lint style * feat: 修复 MultiPassRender 在高德1.x 底图下，缩放地图时存在可视化层不同步的现象 * fix: 修复 getModelTypeWillEmptyData 的 bug * feat: 提供图层空数据的情况下提前指定 layer 类型的参数方法(暂时只在 pointlayer) * style: lint style
This commit is contained in:
YiQianYao
GitHub
parent
a64c685d33
commit
b9ef553c1b
|
|
@ -141,6 +141,8 @@ export interface ILayer {
|
|||
options?: ISourceCFG;
|
||||
};
|
||||
multiPassRenderer: IMultiPassRenderer;
|
||||
// 初始化 layer 的时候指定 layer type 类型（）兼容空数据的情况
|
||||
layerType?: string | undefined;
|
||||
|
||||
/**
|
||||
* threejs 适配兼容相关的方法
|
||||
|
|
@ -341,6 +343,7 @@ export interface ILayerConfig {
|
|||
enableMultiPassRenderer: boolean;
|
||||
passes: Array<string | [string, { [key: string]: unknown }]>;
|
||||
|
||||
layerType?: string | undefined;
|
||||
forward: boolean; // 正方向
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
public styleNeedUpdate: boolean = false;
|
||||
public rendering: boolean;
|
||||
public clusterZoom: number = 0; // 聚合等级标记
|
||||
public layerType?: string | undefined;
|
||||
|
||||
public dataState: IDataState = {
|
||||
dataSourceNeedUpdate: false,
|
||||
|
|
@ -278,6 +279,7 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
|
|||
// enableMultiPassRenderer,
|
||||
// });
|
||||
this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
|
||||
this.layerType = this.rawConfig.layerType;
|
||||
|
||||
// 全局容器服务
|
||||
|
||||
|
|
|
|||
|
|
@ -69,6 +69,18 @@ export default class PointLayer extends BaseLayer<IPointLayerStyleOptions> {
|
|||
}
|
||||
|
||||
protected getModelType(): PointType {
|
||||
const PointTypes = [
|
||||
'fill',
|
||||
'image',
|
||||
'normal',
|
||||
'simplePoint',
|
||||
'extrude',
|
||||
'text',
|
||||
'icon',
|
||||
];
|
||||
if (this.layerType && PointTypes.includes(this.layerType)) {
|
||||
return this.layerType as PointType;
|
||||
}
|
||||
// pointlayer
|
||||
// 2D、 3d、 shape、image、text、normal、
|
||||
const layerData = this.getEncodedData();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,96 @@
|
|||
// @ts-nocheck
|
||||
import React from 'react';
|
||||
import { Scene, GaodeMap, GaodeMapV2, PointLayer } from '@antv/l7';
|
||||
const data = {
|
||||
type: 'FeatureCollection',
|
||||
features: [
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
w: 19.1,
|
||||
t: 24.6,
|
||||
s: '海南',
|
||||
l: 11,
|
||||
m: '东方',
|
||||
j: 108.6167,
|
||||
h: '59838',
|
||||
id: 1,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [108.6167, 19.1],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
w: 20,
|
||||
t: 23.8,
|
||||
s: '海南',
|
||||
l: 11,
|
||||
m: '海口',
|
||||
j: 110.25,
|
||||
h: '59758',
|
||||
id: 2,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [110.25, 20],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
w: 22.275,
|
||||
t: 23.6,
|
||||
s: '广东',
|
||||
l: 12,
|
||||
m: '珠海',
|
||||
j: 113.5669,
|
||||
h: '59488',
|
||||
id: 3,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [113.5669, 22.275],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
w: 20.3372,
|
||||
t: 23.4,
|
||||
s: '广东',
|
||||
l: 12,
|
||||
m: '徐闻',
|
||||
j: 110.1794,
|
||||
h: '59754',
|
||||
id: 4,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [110.1794, 20.3372],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'Feature',
|
||||
properties: {
|
||||
w: 19.2089,
|
||||
t: 23.2,
|
||||
s: '海南',
|
||||
l: 12,
|
||||
m: '琼海',
|
||||
j: 110.4819,
|
||||
h: '59855',
|
||||
id: 5,
|
||||
},
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: [110.4819, 19.2089],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default class Amap2demo extends React.Component {
|
||||
// @ts-ignore
|
||||
|
|
@ -14,6 +104,10 @@ export default class Amap2demo extends React.Component {
|
|||
const scene = new Scene({
|
||||
id: 'map',
|
||||
map: new GaodeMap({
|
||||
// center: [121.434765, 31.256735],
|
||||
// zoom: 14.83,
|
||||
pitch: 0,
|
||||
style: 'light',
|
||||
center: [121.434765, 31.256735],
|
||||
zoom: 14.83,
|
||||
}),
|
||||
|
|
@ -25,52 +119,87 @@ export default class Amap2demo extends React.Component {
|
|||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
|
||||
scene.addImage(
|
||||
'广东',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
|
||||
);
|
||||
scene.addImage(
|
||||
'海南',
|
||||
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
|
||||
);
|
||||
|
||||
scene.on('loaded', () => {
|
||||
fetch(
|
||||
'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
|
||||
)
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data, {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude',
|
||||
},
|
||||
})
|
||||
.shape('name', ['00'])
|
||||
.size(10);
|
||||
// fetch(
|
||||
// 'https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json',
|
||||
// )
|
||||
// .then((res) => res.json())
|
||||
// .then((data) => {
|
||||
// const imageLayer = new PointLayer()
|
||||
// .source(data, {
|
||||
// parser: {
|
||||
// type: 'json',
|
||||
// x: 'longitude',
|
||||
// y: 'latitude',
|
||||
// },
|
||||
// })
|
||||
// .shape('name', ['00'])
|
||||
// .size(10);
|
||||
|
||||
let d = {
|
||||
coordinates: (2)[(121.4318415, 31.25682515)],
|
||||
count: 2,
|
||||
id: '5011000005647',
|
||||
latitude: 31.25682515,
|
||||
longitude: 121.4318415,
|
||||
name: '石泉路140弄',
|
||||
unit_price: 52256.3,
|
||||
};
|
||||
const imageLayer1 = new PointLayer()
|
||||
.source([], {
|
||||
parser: {
|
||||
type: 'json',
|
||||
x: 'longitude',
|
||||
y: 'latitude',
|
||||
},
|
||||
})
|
||||
.shape('name', ['00'])
|
||||
.size(25);
|
||||
// let d = {
|
||||
// coordinates: (2)[(121.4318415, 31.25682515)],
|
||||
// count: 2,
|
||||
// id: '5011000005647',
|
||||
// latitude: 31.25682515,
|
||||
// longitude: 121.4318415,
|
||||
// name: '石泉路140弄',
|
||||
// unit_price: 52256.3,
|
||||
// };
|
||||
// const imageLayer1 = new PointLayer()
|
||||
// .source([], {
|
||||
// parser: {
|
||||
// type: 'json',
|
||||
// x: 'longitude',
|
||||
// y: 'latitude',
|
||||
// },
|
||||
// })
|
||||
// .shape('name', ['00'])
|
||||
// .size(25);
|
||||
|
||||
scene.addLayer(imageLayer);
|
||||
scene.addLayer(imageLayer1);
|
||||
// scene.addLayer(imageLayer);
|
||||
// scene.addLayer(imageLayer1);
|
||||
|
||||
imageLayer.on('click', (e) => {
|
||||
// console.log(e);
|
||||
// imageLayer1.setBlend('normal')
|
||||
imageLayer1.setData([e.feature]);
|
||||
});
|
||||
// imageLayer.on('click', (e) => {
|
||||
// // console.log(e);
|
||||
// // imageLayer1.setBlend('normal')
|
||||
// imageLayer1.setData([e.feature]);
|
||||
// });
|
||||
// });
|
||||
|
||||
const imageLayer = new PointLayer()
|
||||
.source(data)
|
||||
.shape('s', (s) => s)
|
||||
.size(10)
|
||||
.fitBounds();
|
||||
|
||||
const imageLayer1 = new PointLayer({ layerType: 'image' })
|
||||
.source({
|
||||
features: [],
|
||||
type: 'FeatureCollection',
|
||||
})
|
||||
.shape('s', (s) => s)
|
||||
.size(20);
|
||||
|
||||
scene.addLayer(imageLayer);
|
||||
scene.addLayer(imageLayer1);
|
||||
|
||||
imageLayer.on('click', (e) => {
|
||||
console.log(e.feature);
|
||||
|
||||
imageLayer1.setData({
|
||||
features: [e.feature],
|
||||
type: 'FeatureCollection',
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue