mirror of https://gitee.com/antv-l7/antv-l7
Shihui (#978)
* 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
This commit is contained in:
YiQianYao
GitHub
parent
24fe361470
commit
82c9f0339c
|
|
@ -170,7 +170,10 @@ export default class BaseModel<ChildLayerStyleOptions = {}>
|
||||||
// 只有在不支持数据纹理的情况下进行赋值
|
// 只有在不支持数据纹理的情况下进行赋值
|
||||||
if (!this.dataTextureTest) {
|
if (!this.dataTextureTest) {
|
||||||
this.dataTexture = this.createTexture2D({
|
this.dataTexture = this.createTexture2D({
|
||||||
data: new Uint8ClampedArray(4),
|
// data: new Uint8ClampedArray(4),
|
||||||
|
// 使用 Uint8ClampedArray 在 支付宝 环境中可能存在问题 UC 内核对格式有要求 L7 v2.7.18 版本发现
|
||||||
|
// Uint8ClampedArray 和 Uint8Array 没有实质性的区别
|
||||||
|
data: new Uint8Array(4),
|
||||||
mag: gl.NEAREST,
|
mag: gl.NEAREST,
|
||||||
min: gl.NEAREST,
|
min: gl.NEAREST,
|
||||||
width: 1,
|
width: 1,
|
||||||
|
|
|
||||||
|
|
@ -32,117 +32,119 @@ export default class GaodeMapComponent extends React.Component {
|
||||||
// additive = 'additive',
|
// additive = 'additive',
|
||||||
// cylinder circle
|
// cylinder circle
|
||||||
// blend: 'additive'
|
// blend: 'additive'
|
||||||
let line = new LineLayer({ zIndex: 3 })
|
// let line = new LineLayer({ zIndex: 3 })
|
||||||
.source(
|
// .source(
|
||||||
[
|
// [
|
||||||
{
|
// {
|
||||||
lng: aspaceLnglat[0],
|
// lng: aspaceLnglat[0],
|
||||||
lat: aspaceLnglat[1],
|
// lat: aspaceLnglat[1],
|
||||||
lng2: aspaceLnglat[0] + 0.00104,
|
// lng2: aspaceLnglat[0] + 0.00104,
|
||||||
lat2: aspaceLnglat[1],
|
// lat2: aspaceLnglat[1],
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
{
|
// {
|
||||||
parser: {
|
// parser: {
|
||||||
type: 'json',
|
// type: 'json',
|
||||||
x: 'lng',
|
// x: 'lng',
|
||||||
y: 'lat',
|
// y: 'lat',
|
||||||
x1: 'lng2',
|
// x1: 'lng2',
|
||||||
y1: 'lat2',
|
// y1: 'lat2',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
)
|
// )
|
||||||
.shape('line')
|
// .shape('line')
|
||||||
.size(2)
|
// .size(2)
|
||||||
.color('#000');
|
// .color('#000');
|
||||||
|
|
||||||
let text = new PointLayer({ zIndex: 2 })
|
// let text = new PointLayer({ zIndex: 2 })
|
||||||
.source(
|
// .source(
|
||||||
[
|
// [
|
||||||
{
|
// {
|
||||||
lng: aspaceLnglat[0] + 0.0002,
|
// lng: aspaceLnglat[0] + 0.0002,
|
||||||
lat: aspaceLnglat[1],
|
// lat: aspaceLnglat[1],
|
||||||
},
|
// },
|
||||||
],
|
// ],
|
||||||
{
|
// {
|
||||||
parser: {
|
// parser: {
|
||||||
type: 'json',
|
// type: 'json',
|
||||||
x: 'lng',
|
// x: 'lng',
|
||||||
y: 'lat',
|
// y: 'lat',
|
||||||
},
|
// },
|
||||||
},
|
// },
|
||||||
)
|
// )
|
||||||
.shape('100m', 'text')
|
// // .shape('100m', 'text')
|
||||||
.size(25)
|
// .shape('circle')
|
||||||
.color('#000')
|
// .size(25)
|
||||||
.style({
|
// .color('#0f0')
|
||||||
textOffset: [50, 20],
|
// .style({
|
||||||
});
|
// textOffset: [50, 20],
|
||||||
|
// });
|
||||||
|
|
||||||
|
// let layer = new PointLayer({}) // blend: 'additive'
|
||||||
|
// .source(
|
||||||
|
// [
|
||||||
|
// // {
|
||||||
|
// // lng: 120,
|
||||||
|
// // lat: 30.267069,
|
||||||
|
// // name: 'n1'
|
||||||
|
// // },
|
||||||
|
// // {
|
||||||
|
// // lng: 120.1025,
|
||||||
|
// // lat: 30.264701434772807,
|
||||||
|
// // name: 'n2',
|
||||||
|
// // },
|
||||||
|
// {
|
||||||
|
// lng: 120.1019811630249,
|
||||||
|
// lat: 30.264701434772807,
|
||||||
|
// name: 'n3',
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// {
|
||||||
|
// parser: {
|
||||||
|
// type: 'json',
|
||||||
|
// x: 'lng',
|
||||||
|
// y: 'lat',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// )
|
||||||
|
// .shape('circle')
|
||||||
|
// // .shape('cylinder')
|
||||||
|
// // .color('#0f9')
|
||||||
|
// // .color('#4169E1')
|
||||||
|
// // .color('#4cfd47')
|
||||||
|
// .color('name', ['#f00', '#ff0'])
|
||||||
|
// // .size([100, 100, 1000])
|
||||||
|
// // .size([100, 100, 1000])
|
||||||
|
// // .size(10)
|
||||||
|
// .size('name', [20, 40])
|
||||||
|
// // .animate({
|
||||||
|
// // // enable: true,
|
||||||
|
// // enable: false,
|
||||||
|
// // // type: 'www'
|
||||||
|
// // })
|
||||||
|
// // .animate(true)
|
||||||
|
// .select(true)
|
||||||
|
// .active({ color: '#00f' })
|
||||||
|
// .style({
|
||||||
|
// heightfixed: true,
|
||||||
|
// // pickLight: false,
|
||||||
|
// pickLight: true,
|
||||||
|
// // lightEnable: true,
|
||||||
|
// // opacity: 0.5,
|
||||||
|
// stroke: '#f00',
|
||||||
|
// // strokeWidth: 10,
|
||||||
|
// strokeWidth: 0,
|
||||||
|
// strokeOpacity: 1,
|
||||||
|
// // unit: 'meter',
|
||||||
|
// });
|
||||||
|
// // .animate(true)
|
||||||
|
// // .animate({
|
||||||
|
// // enable: true,
|
||||||
|
// // speed: 0.02,
|
||||||
|
// // repeat: 1
|
||||||
|
// // })
|
||||||
|
// // .active({ color: '#00f' });
|
||||||
|
|
||||||
let layer = new PointLayer({}) // blend: 'additive'
|
|
||||||
.source(
|
|
||||||
[
|
|
||||||
// {
|
|
||||||
// lng: 120,
|
|
||||||
// lat: 30.267069,
|
|
||||||
// name: 'n1'
|
|
||||||
// },
|
|
||||||
{
|
|
||||||
lng: 120.1025,
|
|
||||||
lat: 30.264701434772807,
|
|
||||||
name: 'n2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
lng: 120.1019811630249,
|
|
||||||
lat: 30.264701434772807,
|
|
||||||
name: 'n3',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
{
|
|
||||||
parser: {
|
|
||||||
type: 'json',
|
|
||||||
x: 'lng',
|
|
||||||
y: 'lat',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
)
|
|
||||||
.shape('circle')
|
|
||||||
// .shape('cylinder')
|
|
||||||
// .color('#0f9')
|
|
||||||
// .color('#4169E1')
|
|
||||||
// .color('#4cfd47')
|
|
||||||
.color('name', ['#f00', '#ff0'])
|
|
||||||
// .size([100, 100, 1000])
|
|
||||||
// .size([100, 100, 1000])
|
|
||||||
// .size(10)
|
|
||||||
.size('name', [20, 40])
|
|
||||||
// .animate({
|
|
||||||
// // enable: true,
|
|
||||||
// enable: false,
|
|
||||||
// // type: 'www'
|
|
||||||
// })
|
|
||||||
// .animate(true)
|
|
||||||
.select(true)
|
|
||||||
.active({ color: '#00f' })
|
|
||||||
.style({
|
|
||||||
heightfixed: true,
|
|
||||||
// pickLight: false,
|
|
||||||
pickLight: true,
|
|
||||||
// lightEnable: true,
|
|
||||||
// opacity: 0.5,
|
|
||||||
stroke: '#f00',
|
|
||||||
// strokeWidth: 10,
|
|
||||||
strokeWidth: 0,
|
|
||||||
strokeOpacity: 1,
|
|
||||||
// unit: 'meter',
|
|
||||||
});
|
|
||||||
// .animate(true)
|
|
||||||
// .animate({
|
|
||||||
// enable: true,
|
|
||||||
// speed: 0.02,
|
|
||||||
// repeat: 1
|
|
||||||
// })
|
|
||||||
// .active({ color: '#00f' });
|
|
||||||
|
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
|
|
||||||
|
|
@ -170,14 +172,60 @@ export default class GaodeMapComponent extends React.Component {
|
||||||
// })
|
// })
|
||||||
|
|
||||||
scene.on('loaded', () => {
|
scene.on('loaded', () => {
|
||||||
|
// scene.addLayer(layer);
|
||||||
|
|
||||||
|
// let scale = layer.getScale('size');
|
||||||
|
// console.log('scale n2', scale('n2'));
|
||||||
|
// console.log('scale n3', scale('n3'));
|
||||||
|
|
||||||
|
let layer = new PointLayer({}) // blend: 'additive'
|
||||||
|
.source(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
lng: 120.1019811630249,
|
||||||
|
lat: 30.264701434772807,
|
||||||
|
name: 'n3',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
{
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
.shape('circle')
|
||||||
|
.color('#ff0')
|
||||||
|
.size(20);
|
||||||
scene.addLayer(layer);
|
scene.addLayer(layer);
|
||||||
|
|
||||||
let scale = layer.getScale('size');
|
let text = new PointLayer({ zIndex: 2 })
|
||||||
console.log('scale n2', scale('n2'));
|
.source(
|
||||||
console.log('scale n3', scale('n3'));
|
[
|
||||||
|
{
|
||||||
|
lng: aspaceLnglat[0] + 0.0002,
|
||||||
|
lat: aspaceLnglat[1],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
{
|
||||||
|
parser: {
|
||||||
|
type: 'json',
|
||||||
|
x: 'lng',
|
||||||
|
y: 'lat',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
|
// .shape('100m', 'text')
|
||||||
|
.shape('circle')
|
||||||
|
.size(25)
|
||||||
|
.color('#0f0')
|
||||||
|
.style({
|
||||||
|
textOffset: [50, 20],
|
||||||
|
});
|
||||||
|
|
||||||
scene.addLayer(text);
|
scene.addLayer(text);
|
||||||
scene.addLayer(line);
|
// scene.addLayer(line);
|
||||||
|
|
||||||
// scene.addLayer(layer2);
|
// scene.addLayer(layer2);
|
||||||
// scene.addLayer(trufCircle);
|
// scene.addLayer(trufCircle);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue