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

fix(popup): react 组件下popuup 不能响应事件处理

This commit is contained in:
thinkinggis 2020-07-28 14:56:46 +08:00
parent ecd6b5cf6f
commit 3a402e7513
16 changed files with 173 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/component/src/popup.ts
View File

@ -177,6 +177,7 @@ export default class Popup extends EventEmitter implements IPopup {
offsets: [0, 0], offsets: [0, 0],
anchor: anchorType.BOTTOM, anchor: anchorType.BOTTOM,
className: '', className: '',
stopPropagation: true,
}; };
} }
@ -208,12 +209,15 @@ export default class Popup extends EventEmitter implements IPopup {
.split(' ') .split(' ')
.forEach((name) => this.container.classList.add(name)); .forEach((name) => this.container.classList.add(name));
} }
if (this.popupOption.stopPropagation) {
['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => { ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
this.container.addEventListener(type, (e) => { this.container.addEventListener(type, (e) => {
e.stopPropagation(); e.stopPropagation();
}); });
}); });
} }
}
if (maxWidth && this.container.style.maxWidth !== maxWidth) { if (maxWidth && this.container.style.maxWidth !== maxWidth) {
this.container.style.maxWidth = maxWidth; this.container.style.maxWidth = maxWidth;
} }

1
packages/core/src/services/component/IPopupService.ts
View File

@ -9,6 +9,7 @@ export interface IPopupOption {
anchor: anchorType[any]; anchor: anchorType[any];
className: string; className: string;
offsets: number[]; offsets: number[];
stopPropagation: boolean;
} }
export interface IPopup { export interface IPopup {
addTo(scene: Container): this; addTo(scene: Container): this;

2
packages/core/src/services/layer/StyleAttributeService.ts
View File

@ -308,7 +308,7 @@ export default class StyleAttributeService implements IStyleAttributeService {
} }
}); });
this.attributesAndIndices.elements.destroy(); this.attributesAndIndices?.elements.destroy();
this.attributes = []; this.attributes = [];
} }
} }

3
packages/core/src/services/renderer/ITexture2D.ts
View File

@ -80,7 +80,8 @@ export interface ITexture2DInitializationOptions {
export interface ITexture2D { export interface ITexture2D {
get(): unknown; get(): unknown;
update(): void; update(options: any): void;
bind(): void;
resize(options: { width: number; height: number }): void; resize(options: { width: number; height: number }): void;
/** /**

85
packages/l7/demo/image.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>L7 IE</title>
<style>
html,
body {
overflow: hidden;
margin: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
cursor:pointer;
}
</style>
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
rel="stylesheet"
/>
</head>
<body>
<div id="map"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.8.3/polyfill.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js"></script>
<script src="../dist/l7-dev.js"></script>
<script>
console.log(L7);
const scene = new L7.Scene({
id: "map",
map: new L7.Mapbox({
style: "blank", // 样式URL
center: [108.6167, 19.1000],
pitch: 0,
zoom: 6
})
});
const data = {"list":[{"w":19.1000,"t":24.6000,"s":"海南","l":11,"m":"东方","j":108.6167,"h":"59838"},{"w":20.0000,"t":23.8000,"s":"海南","l":11,"m":"海口","j":110.2500,"h":"59758"},{"w":22.2750,"t":23.6000,"s":"广东","l":12,"m":"珠海","j":113.5669,"h":"59488"},{"w":20.3372,"t":23.4000,"s":"广东","l":12,"m":"徐闻","j":110.1794,"h":"59754"},{"w":19.2089,"t":23.2000,"s":"海南","l":12,"m":"琼海","j":110.4819,"h":"59855"},{"w":21.7358,"t":23.2000,"s":"广东","l":11,"m":"上川岛","j":112.7731,"h":"59673"},{"w":23.3853,"t":23.0000,"s":"广东","l":11,"m":"汕头","j":116.6792,"h":"59316"},{"w":22.5417,"t":23.0000,"s":"广东","l":12,"m":"深圳","j":114.0033,"h":"59493"},{"w":19.5167,"t":22.9000,"s":"海南","l":12,"m":"儋州","j":109.5833,"h":"59845"},{"w":21.1547,"t":22.7000,"s":"广东","l":12,"m":"湛江","j":110.3022,"h":"59658"},{"w":21.4500,"t":22.7000,"s":"广西","l":12,"m":"北海","j":109.1333,"h":"59644"},{"w":22.5000,"t":22.6000,"s":"广东","l":12,"m":"中山","j":113.4000,"h":"59485"},{"w":21.8453,"t":22.6000,"s":"广东","l":12,"m":"阳江","j":111.9783,"h":"59663"},{"w":22.3469,"t":22.6000,"s":"广东","l":12,"m":"信宜","j":110.9250,"h":"59456"},{"w":22.8000,"t":22.5000,"s":"广东","l":12,"m":"汕尾","j":115.3667,"h":"59501"},{"w":23.4275,"t":22.3000,"s":"广东","l":12,"m":"南澳","j":117.0292,"h":"59324"},{"w":22.7100,"t":22.3000,"s":"广东","l":12,"m":"罗定","j":111.6000,"h":"59462"},{"w":19.0333,"t":22.3000,"s":"海南","l":12,"m":"琼中","j":109.8333,"h":"59849"},{"w":21.5458,"t":22.2000,"s":"广东","l":11,"m":"电白","j":110.9886,"h":"59664"},{"w":22.9661,"t":21.9000,"s":"广东","l":12,"m":"东莞","j":113.7389,"h":"59289"},{"w":22.2472,"t":21.8000,"s":"广东","l":12,"m":"台山","j":112.7858,"h":"59478"},{"w":22.9836,"t":21.6000,"s":"广东","l":12,"m":"惠来","j":116.3014,"h":"59317"},{"w":22.9906,"t":21.0000,"s":"广东","l":12,"m":"高要","j":112.4786,"h":"59278"},{"w":23.9000,"t":20.8000,"s":"广西","l":12,"m":"百色","j":106.6000,"h":"59211"},{"w":23.0711,"t":20.4000,"s":"广东","l":12,"m":"惠阳","j":114.3744,"h":"59298"},{"w":23.4497,"t":20.4000,"s":"广东","l":12,"m":"揭西","j":115.8492,"h":"59306"},{"w":23.3353,"t":20.4000,"s":"广东","l":11,"m":"增城","j":113.8275,"h":"59294"},{"w":23.4167,"t":19.9000,"s":"广西","l":12,"m":"那坡","j":105.8333,"h":"59209"},{"w":24.9000,"t":19.7000,"s":"福建","l":11,"m":"崇武","j":118.9167,"h":"59133"},{"w":24.4833,"t":19.7000,"s":"福建","l":12,"m":"厦门","j":118.0667,"h":"59134"},{"w":23.7936,"t":19.6000,"s":"广东","l":12,"m":"河源","j":114.7297,"h":"59293"},{"w":23.7106,"t":19.4000,"s":"广东","l":12,"m":"清远","j":113.0850,"h":"59280"},{"w":23.1000,"t":19.4000,"s":"广西","l":12,"m":"靖西","j":106.4500,"h":"59218"},{"w":23.6000,"t":19.4000,"s":"广西","l":13,"m":"田东","j":107.1167,"h":"59224"},{"w":25.5167,"t":19.2000,"s":"福建","l":12,"m":"平潭","j":119.7833,"h":"58944"},{"w":25.0500,"t":19.2000,"s":"福建","l":12,"m":"龙岩","j":117.0167,"h":"58927"},{"w":23.2100,"t":19.0000,"s":"广东","l":12,"m":"广州","j":113.4822,"h":"59287"},{"w":21.9833,"t":18.9000,"s":"广西","l":12,"m":"钦州","j":108.6000,"h":"59632"}]}
scene.on('loaded',function(){
scene.addImage(
'00',
'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg'
);
scene.addImage(
'01',
'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg'
);
scene.addImage(
'02',
'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg'
);
const pointLayer = new L7.PointLayer({})
.source(data.list, {
parser: {
type: "json",
x: "j",
y: "w"
}
})
.shape('m', [ '00', '01', '02' ])
.size(20)
.active(true)
.style({
opacity: 1.0
});
scene.addLayer(pointLayer);
pointLayer.on('inited',function(){
console.log('加载完成');
})
scene.render();
})
</script>
</body>
</html>

9
packages/layers/src/point/models/image.ts
View File

@ -21,7 +21,7 @@ export default class ImageModel extends BaseModel {
public getUninforms(): IModelUniform { public getUninforms(): IModelUniform {
const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions; const { opacity } = this.layer.getLayerConfig() as IImageLayerStyleOptions;
if (this.rendererService.getDirty()) { if (this.rendererService.getDirty()) {
this.texture.update(); this.texture.bind();
} }
return { return {
u_opacity: opacity || 1.0, u_opacity: opacity || 1.0,
@ -112,7 +112,11 @@ export default class ImageModel extends BaseModel {
private updateTexture = () => { private updateTexture = () => {
const { createTexture2D } = this.rendererService; const { createTexture2D } = this.rendererService;
if (this.texture) { if (this.texture) {
this.texture.destroy(); this.texture.update({
data: this.iconService.getCanvas(),
});
this.layer.render();
return;
} }
this.texture = createTexture2D({ this.texture = createTexture2D({
data: this.iconService.getCanvas(), data: this.iconService.getCanvas(),
@ -121,6 +125,5 @@ export default class ImageModel extends BaseModel {
width: 1024, width: 1024,
height: this.iconService.canvasHeight || 128, height: this.iconService.canvasHeight || 128,
}); });
this.layer.render();
}; };
} }

5
packages/react/src/component/Popup.tsx
View File

@ -25,7 +25,10 @@ export default class PopupComponet extends React.PureComponent<IPopupProps> {
} }
public componentDidMount() { public componentDidMount() {
const { lnglat, children, option } = this.props; const { lnglat, children, option } = this.props;
const p = new Popup(option); const p = new Popup({
stopPropagation: false,
...option,
});
if (lnglat) { if (lnglat) {
p.setLnglat(lnglat); p.setLnglat(lnglat);

6
packages/renderer/src/regl/ReglTexture2D.ts
View File

@ -73,7 +73,11 @@ export default class ReglTexture2D implements ITexture2D {
public get() { public get() {
return this.texture; return this.texture;
} }
public update() { public update(props: regl.Texture2DOptions = {}) {
this.texture(props);
}
public bind() {
// @ts-ignore // @ts-ignore
this.texture._texture.bind(); this.texture._texture.bind();
} }

6
stories/3D_Model/Components/threeRender.tsx
View File

@ -58,9 +58,9 @@ export default class GlTFThreeJSDemo extends React.Component {
y: 'latitude', y: 'latitude',
}, },
}) })
.shape('name', ['00', '01', '02']) // .shape('name', ['00', '01', '02'])
// .shape('triangle') .shape('triangle')
// .color('red') .color('red')
.active(true) .active(true)
.size(20); .size(20);
scene.addLayer(imageLayer); scene.addLayer(imageLayer);

2
stories/Components/components/Marker.tsx
View File

@ -27,7 +27,7 @@ export default class MarkerComponent extends React.Component {
const popup = new Popup({ const popup = new Popup({
offsets: [0, 20], offsets: [0, 20],
}).setText('hello'); }).setHTML('<h1 onclick= alert("12223")>11111</h1>');
const marker = new Marker({ const marker = new Marker({
offsets: [0, -20], offsets: [0, -20],

3
stories/Layers/components/Point3D.tsx
View File

@ -22,6 +22,9 @@ export default class Point3D extends React.Component {
}), }),
}); });
const pointLayer = new PointLayer(); const pointLayer = new PointLayer();
scene.on('resize',()=>{
console.log('resize')
})
pointLayer pointLayer
.source(data, { .source(data, {
cluster: true, cluster: true,

2
stories/React/components/world_ncov.tsx
View File

@ -70,7 +70,7 @@ export default React.memo(function Map() {
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()), ).then((d) => d.json()),
fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(), d.json(),
), ),
]); ]);

32
stories/React/components/world_ncov_bubble.tsx
View File

@ -85,7 +85,7 @@ export default React.memo(function Map() {
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()), ).then((d) => d.json()),
fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(), d.json(),
), ),
]); ]);
@ -133,7 +133,12 @@ export default React.memo(function Map() {
margin: 0, margin: 0,
}} }}
> >
<li>现有确诊:{popupInfo.feature.currentConfirmedCount}</li> <li>
<button onMouseDown={() => {
alert('test');
}} value="点击">点击</button>
现有确诊:{popupInfo.feature.currentConfirmedCount}
</li>
<li>累计确诊:{popupInfo.feature.confirmedCount}</li> <li>累计确诊:{popupInfo.feature.confirmedCount}</li>
<li>治愈:{popupInfo.feature.curedCount}</li> <li>治愈:{popupInfo.feature.curedCount}</li>
<li>死亡:{popupInfo.feature.deadCount}</li> <li>死亡:{popupInfo.feature.deadCount}</li>
@ -204,22 +209,7 @@ export default React.memo(function Map() {
}, },
}} }}
color={{ color={{
field: 'confirmedCount', values: '#b10026',
values: (count) => {
return count > 10000
? colors[6]
: count > 1000
? colors[5]
: count > 500
? colors[4]
: count > 100
? colors[3]
: count > 10
? colors[2]
: count > 1
? colors[1]
: colors[0];
},
}} }}
shape={{ shape={{
values: 'circle', values: 'circle',
@ -237,8 +227,8 @@ export default React.memo(function Map() {
opacity: 0.6, opacity: 0.6,
}} }}
> >
<LayerEvent type="mousemove" handler={showPopup} /> <LayerEvent type="click" handler={showPopup} />
<LayerEvent type="mouseout" handler={hidePopup} /> {/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
</PointLayer>, </PointLayer>,
<PointLayer <PointLayer
key={'5'} key={'5'}
@ -269,7 +259,7 @@ export default React.memo(function Map() {
opacity: 1, opacity: 1,
}} }}
> >
<LayerEvent type="mousemove" handler={showPopup} /> <LayerEvent type="click" handler={showPopup} />
</PointLayer>, </PointLayer>,
]} ]}
</MapboxScene> </MapboxScene>

2
stories/React/components/world_ncov_bubble_animate.tsx
View File

@ -77,7 +77,7 @@ export default React.memo(function Map() {
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()), ).then((d) => d.json()),
fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(), d.json(),
), ),
]); ]);

2
stories/React/components/world_ncov_column.tsx
View File

@ -72,7 +72,7 @@ export default React.memo(function Map() {
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()), ).then((d) => d.json()),
fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(), d.json(),
), ),
]); ]);

44
stories/React/components/world_ncov_fill.tsx
View File

@ -1,4 +1,5 @@
import { import {
LayerEvent,
LineLayer, LineLayer,
MapboxScene, MapboxScene,
Marker, Marker,
@ -64,15 +65,26 @@ function joinData(geodata: any, ncovData: any) {
export default React.memo(function Map() { export default React.memo(function Map() {
const [data, setData] = React.useState(); const [data, setData] = React.useState();
const [popupInfo, setPopupInfo] = React.useState<{
lnglat: number[];
feature: any;
}>();
function showPopup(args: any): void {
setPopupInfo({
lnglat: args.lngLat,
feature: args.feature,
});
}
React.useEffect(() => { React.useEffect(() => {
const fetchData = async () => { const fetchData = async () => {
const [geoData, ncovData] = await Promise.all([ const [geoData, ncovData] = await Promise.all([
fetch( fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json', 'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()), ).then((d) => d.json()),
fetch('https://lab.isaaclin.cn/nCoV/api/area?latest=1').then((d) => fetch(
d.json(), 'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
), ).then((d) => d.json()),
]); ]);
setData(joinData(geoData, ncovData.results)); setData(joinData(geoData, ncovData.results));
}; };
@ -95,6 +107,26 @@ export default React.memo(function Map() {
bottom: 0, bottom: 0,
}} }}
> >
{popupInfo && (
<Popup lnglat={popupInfo.lnglat}>
{popupInfo.feature.name}
<ul
style={{
margin: 0,
}}
>
<li>
<button onMouseDown={() => {
alert('test');
}} value="点击">点击</button>
现有确诊:{popupInfo.feature.currentConfirmedCount}
</li>
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>
<li>治愈:{popupInfo.feature.curedCount}</li>
<li>死亡:{popupInfo.feature.deadCount}</li>
</ul>
</Popup>
)}
{data && [ {data && [
<PolygonLayer <PolygonLayer
key={'1'} key={'1'}
@ -137,7 +169,11 @@ export default React.memo(function Map() {
style={{ style={{
opacity: 1, opacity: 1,
}} }}
/>, >
<LayerEvent type="click" handler={showPopup} />
{/* <LayerEvent type="mouseout" handler={hidePopup} /> */}
</PolygonLayer>,
,
<LineLayer <LineLayer
key={'2'} key={'2'}
source={{ source={{