p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Shihui (#980) 

* 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
This commit is contained in:
YiQianYao 2022-02-24 12:16:47 +08:00 committed by GitHub
parent e72e5b29ee
commit c0d4354e52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 219 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/services/interaction/IInteractionService.ts
View File

@ -16,6 +16,7 @@ export interface IInteractionTarget {
}
export interface IInteractionService {
indragging: boolean;
init(): void;
destroy(): void;
on(

4
packages/core/src/services/interaction/InteractionService.ts
View File

@ -20,6 +20,7 @@ const DragEventMap: { [key: string]: string } = {
@injectable()
export default class InteractionService extends EventEmitter
implements IInteractionService {
public indragging: boolean = false;
@inject(TYPES.IMapService)
private readonly mapService: IMapService;
// @ts-ignore
@ -134,6 +135,9 @@ export default class InteractionService extends EventEmitter
private onDrag = (target: any) => {
const interactionTarget = this.interactionEvent(target);
interactionTarget.type = DragEventMap[interactionTarget.type];
interactionTarget.type === 'dragging'
? (this.indragging = true)
: (this.indragging = false);
this.emit(InteractionEvent.Drag, interactionTarget);
};

4
packages/core/src/services/interaction/PickingService.ts
View File

@ -166,8 +166,8 @@ export default class PickingService implements IPickingService {
this.alreadyInPicking ||
// TODO: this.layerService.alreadyInRendering 一个渲染序列中只进行一次拾取操作
this.layerService.alreadyInRendering ||
// TODO: this.layerService.isMapDragging() 如果地图正在拖拽 则不进行拾取操作
this.layerService.isMapDragging() ||
// Tip: this.interactionService.dragging amap2 在点击操作的时候同时会触发 dragging 的情况（避免舍去）
this.interactionService.indragging ||
// TODO: 判断当前 是都进行 shader pick 拾取判断
!this.layerService.getShaderPickStat()
) {

1
packages/core/src/services/layer/ILayerService.ts
View File

@ -419,7 +419,6 @@ export interface ILayerService {
renderLayers(type?: string): void;
setEnableRender(flag: boolean): void;
getOESTextureFloat(): boolean;
isMapDragging(): boolean;
destroy(): void;
}

5
packages/core/src/services/layer/LayerService.ts
View File

@ -200,11 +200,6 @@ export default class LayerService implements ILayerService {
return this.renderService.extensionObject.OES_texture_float;
}
// TODO: 判断地图是否正在被拖动
public isMapDragging() {
return this.mapService.dragging;
}
// 控制着色器颜色拾取计算
public enableShaderPick() {
this.shaderPicking = true;

1
packages/core/src/services/map/IMapService.ts
View File

@ -37,7 +37,6 @@ export interface IMapWrapper {
export interface IMapService<RawMap = {}> {
version?: string;
map: RawMap;
dragging: boolean;
bgColor: string;
setBgColor(color: string): void;
init(): void;

13
packages/maps/src/amap/map.ts
View File

@ -61,9 +61,6 @@ export default class AMapService
*/
public map: AMap.Map & IAMapInstance;
// TODO: 判断地图是否正在拖拽
public dragging: boolean = false;
// 背景色
public bgColor: string = 'rgba(0, 0, 0, 0)';
@ -412,16 +409,6 @@ export default class AMapService
}
});
// TODO: 判断地图是否正在被拖拽
this.map.on('dragstart', () => {
this.dragging = true;
return '';
});
this.map.on('dragend', () => {
this.dragging = false;
return '';
});
this.viewport = new Viewport();
}

13
packages/maps/src/amap2/map.ts
View File

@ -64,9 +64,6 @@ export default class AMapService
*/
public map: AMap.Map & IAMapInstance;
// TODO: 判断地图是否正在拖拽
public dragging: boolean = false;
/**
* 用于 customCooords 数据的计算
*/
@ -505,16 +502,6 @@ export default class AMapService
}
}
});
// TODO: 判断地图是否正在被拖拽
this.map.on('dragstart', () => {
this.dragging = true;
return '';
});
this.map.on('dragend', () => {
this.dragging = false;
return '';
});
}
public meterToCoord(center: [number, number], outer: [number, number]) {

13
packages/maps/src/map/map.ts
View File

@ -42,9 +42,6 @@ export default class L7MapService implements IMapService<Map> {
public version: string = Version.L7MAP;
public map: Map;
// TODO: 判断地图是否正在拖拽
public dragging: boolean = false;
// 背景色
public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
@ -282,16 +279,6 @@ export default class L7MapService implements IMapService<Map> {
this.map.on('load', this.handleCameraChanged);
this.map.on('move', this.handleCameraChanged);
// TODO: 判断地图是否正在被拖拽
this.map.on('dragstart', () => {
this.dragging = true;
return '';
});
this.map.on('dragend', () => {
this.dragging = false;
return '';
});
// 不同于高德地图，需要手动触发首次渲染
this.handleCameraChanged();
}

13
packages/maps/src/mapbox/map.ts
View File

@ -50,9 +50,6 @@ export default class MapboxService
public version: string = Version.MAPBOX;
public map: Map & IMapboxInstance;
// TODO: 判断地图是否正在拖拽
public dragging: boolean = false;
// 背景色
public bgColor: string = 'rgba(0.0, 0.0, 0.0, 0.0)';
@ -366,16 +363,6 @@ export default class MapboxService
this.map.on('load', this.handleCameraChanged);
this.map.on('move', this.handleCameraChanged);
// TODO: 判断地图是否正在被拖拽
this.map.on('dragstart', () => {
this.dragging = true;
return '';
});
this.map.on('dragend', () => {
this.dragging = false;
return '';
});
// 不同于高德地图，需要手动触发首次渲染
this.handleCameraChanged();
}

84
stories/Map/components/amap2demo_text.tsx
View File

@ -22,16 +22,16 @@ export default class Amap2demo_text extends React.Component {
// src: url('${fontpath}') format('woff2')
// }`
// document.getElementsByTagName('head')[0].appendChild(style)
var mask = [
[
[
[110, 40],
[130, 40],
[130, 20],
[110, 20],
],
],
];
// var mask = [
// [
// [
// [110, 40],
// [130, 40],
// [130, 20],
// [110, 20],
// ],
// ],
// ];
const scene = new Scene({
id: 'map',
@ -45,7 +45,7 @@ export default class Amap2demo_text extends React.Component {
}),
});
this.scene = scene;
scene.addIconFont('icon1', '&#xe98c;');
// scene.addIconFont('icon1', '&#xe98c;');
// scene.addIconFont("icon2", "&#xe64c;")
// scene.addIconFonts([
@ -55,37 +55,37 @@ export default class Amap2demo_text extends React.Component {
scene.addFontFace(fontFamily, fontPath);
scene.on('loaded', () => {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
)
.then((res) => res.json())
.then((data) => {
const pointLayer = new PointLayer({})
.source(data.list, {
parser: {
type: 'json',
x: 'j',
y: 'w',
},
})
.shape('icon', 'text')
.size(12)
.color('w', ['#f00', '#f00', '#0f0'])
.style({
textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
spacing: 2, // 字符间距
padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
stroke: '#ffffff', // 描边颜色
strokeWidth: 0.3, // 描边宽度
strokeOpacity: 1.0,
fontFamily,
// fontFamily: "Times New Roman",
iconfont: true,
// textAllowOverlap: true,
});
scene.addLayer(pointLayer);
});
// fetch(
// 'https://gw.alipayobjects.com/os/bmw-prod/70408903-80db-4278-a318-461604acb2df.json',
// )
// .then((res) => res.json())
// .then((data) => {
// const pointLayer = new PointLayer({})
// .source(data.list, {
// parser: {
// type: 'json',
// x: 'j',
// y: 'w',
// },
// })
// .shape('icon', 'text')
// .size(12)
// .color('w', ['#f00', '#f00', '#0f0'])
// .style({
// textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
// textOffset: [-10, 0], // 文本相对锚点的偏移量 [水平, 垂直]
// spacing: 2, // 字符间距
// padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
// stroke: '#ffffff', // 描边颜色
// strokeWidth: 0.3, // 描边宽度
// strokeOpacity: 1.0,
// fontFamily,
// // fontFamily: "Times New Roman",
// iconfont: true,
// // textAllowOverlap: true,
// });
// // scene.addLayer(pointLayer);
// });
fetch(
'https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json',

152
stories/Map/components/bugfix.tsx Normal file
View File

@ -0,0 +1,152 @@
// @ts-nocheck
import React from 'react';
import { Scene, GaodeMap, GaodeMapV2, PointLayer } from '@antv/l7';
const data = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {
s: '海南',
m: '东方',
},
geometry: {
type: 'Point',
coordinates: [120.218258, 30.298216],
},
},
{
type: 'Feature',
properties: {
s: '海南',
m: '海口',
},
geometry: {
type: 'Point',
coordinates: [120.137195, 30.304203],
},
},
{
type: 'Feature',
properties: {
s: '广东',
m: '珠海',
},
geometry: {
type: 'Point',
coordinates: [120.052108, 30.296719],
},
},
{
type: 'Feature',
properties: {
s: '广东',
m: '徐闻',
},
geometry: {
type: 'Point',
coordinates: [120.20906, 30.201379],
},
},
{
type: 'Feature',
properties: {
s: '海南',
m: '琼海',
},
geometry: {
type: 'Point',
coordinates: [120.119373, 30.1824],
},
},
],
};
const img = {
海南:
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
广东:
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg',
};
export default class Amap2demo extends React.Component {
// @ts-ignore
private scene: Scene;
public componentWillUnmount() {
this.scene.destroy();
}
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMapV2({
center: [120.2, 30.2],
zoom: 9,
}),
});
this.scene = scene;
scene.on('loaded', () => {
Object.keys(img).forEach((key) => {
scene.addImage(key, img[key]);
});
const imageLayer = new PointLayer({
name: 'image',
});
imageLayer
.source(data)
// @ts-ignore
.size(20)
// @ts-ignore
.shape('s', (s) => s)
.fitBounds();
const textLayer = new PointLayer({
name: 'image',
});
textLayer
.source(data)
// @ts-ignore
.size(20)
.color('#000000')
// @ts-ignore
.shape('m', 'text')
.style({
stroke: '#ffffff',
strokeWidth: 2,
textOffset: [0, -40],
});
scene.addLayer(textLayer);
scene.addLayer(imageLayer);
[textLayer, imageLayer].forEach((layer) => {
layer.on('click', () => {
alert();
});
});
});
}
public render() {
return (
<>
<div
id="map"
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
></div>
</>
);
}
}

18
stories/Map/components/mapCenter.tsx
View File

@ -170,6 +170,11 @@ export default class GaodeMapComponent extends React.Component {
// opacity: 0.5
// })
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg',
);
scene.on('loaded', () => {
// scene.addLayer(layer);
@ -205,6 +210,7 @@ export default class GaodeMapComponent extends React.Component {
{
lng: aspaceLnglat[0] + 0.0002,
lat: aspaceLnglat[1],
name: '00',
},
],
{
@ -216,13 +222,19 @@ export default class GaodeMapComponent extends React.Component {
},
)
// .shape('100m', 'text')
.shape('circle')
// .shape('circle')
.shape('name', ['00'])
.size(25)
.color('#0f0')
// .color('#0f0')
// .select(true)
.style({
textOffset: [50, 20],
// textOffset: [50, 20],
});
text.on('click', () => {
alert('***');
});
scene.addLayer(text);
// scene.addLayer(line);

3
stories/Map/map.stories.tsx
View File

@ -78,6 +78,7 @@ import Cluster from './components/cluster'
import Hot from './components/hot'
import Hot2 from './components/hot2'
import Mask from './components/mask'
import BugFix from './components/bugfix'
// @ts-ignore
storiesOf('地图方法', module)
@ -160,3 +161,5 @@ storiesOf('地图方法', module)
.add('Hot1', () => <Hot/>)
.add('Hot2', () => <Hot2/>)
.add('Mask', () => <Mask/>)
.add('BugFix', () => <BugFix/>)