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

chore(popup): 更改 popup 所在dom 容器的位置 

修复react popup 高德地下不能正常显示
This commit is contained in:
thinkinggis 2020-07-28 17:23:11 +08:00
parent 3a402e7513
commit e93e99daad
12 changed files with 90 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/api/district/baselayer.en.md
View File

@ -55,10 +55,11 @@ order: 2
- strokeWidth 填充描边宽度 `ProvinceLayer, CityLayer, CountyLayer`
- autoFit 是否自动缩放到图层范围 `boolean`
- popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html 字符串，支持回调函数 (properties: any) => string;
- openTriggerEvent 触发事件 例如 'mousemove' | 'click';
- closeTriggerEvent 触发事件 例如 'mousemove' | 'click';
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html 字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色 `CountryLayer`
- chinaNationalWidth 中国国界线宽度 `CountryLayer`

3
docs/api/district/baselayer.zh.md
View File

@ -62,7 +62,8 @@ order: 2
- popup 信息窗口
- enable 是否开启 `boolean`
- triggerEvent 触发事件 例如 'mousemove' | 'click';
- openTriggerEvent 触发事件 例如 'mousemove' | 'click';
- closeTriggerEvent 触发事件 例如 'mousemove' | 'click';
- Html popup html 字符串，支持回调函数 (properties: any) => string;
- chinaNationalStroke 中国国界线颜色 `CountryLayer`

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

@ -4,6 +4,7 @@ import {
IPoint,
IPopup,
IPopupOption,
ISceneService,
TYPES,
} from '@antv/l7-core';
import {
@ -21,6 +22,7 @@ import { Container } from 'inversify';
export default class Popup extends EventEmitter implements IPopup {
private popupOption: IPopupOption;
private mapsService: IMapService<unknown>;
private sceneSerive: ISceneService;
private lngLat: ILngLat;
private content: HTMLElement;
private closeButton: HTMLElement;
@ -40,6 +42,7 @@ export default class Popup extends EventEmitter implements IPopup {
public addTo(scene: Container) {
this.mapsService = scene.get<IMapService>(TYPES.IMapService);
this.sceneSerive = scene.get<ISceneService>(TYPES.ISceneService);
this.mapsService.on('camerachange', this.update);
this.scene = scene;
this.update();
@ -194,12 +197,12 @@ export default class Popup extends EventEmitter implements IPopup {
if (!this.mapsService || !hasPosition || !this.content) {
return;
}
const markerContainer = this.mapsService.getMarkerContainer();
if (!this.container && markerContainer) {
const popupContainer = this.sceneSerive.getSceneContainer();
if (!this.container && popupContainer) {
this.container = this.creatDom(
'div',
'l7-popup',
markerContainer.parentNode as HTMLElement,
popupContainer as HTMLElement,
);
this.tip = this.creatDom('div', 'l7-popup-tip', this.container);
@ -210,13 +213,11 @@ export default class Popup extends EventEmitter implements IPopup {
.forEach((name) => this.container.classList.add(name));
}
if (this.popupOption.stopPropagation) {
['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
this.container.addEventListener(type, (e) => {
e.stopPropagation();
});
});
}
// ['mousemove', 'mousedown', 'mouseup', 'click'].forEach((type) => {
// this.container.addEventListener(type, (e) => {
// e.stopPropagation();
// });
// });
}
if (maxWidth && this.container.style.maxWidth !== maxWidth) {
this.container.style.maxWidth = maxWidth;

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

@ -37,7 +37,7 @@ const EventMap: {
dragging: 'drag',
};
import { MapTheme } from './theme';
let mapdivCount = 0;
const LNGLAT_OFFSET_ZOOM_THRESHOLD = 12;
const MAPBOX_API_KEY =
'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
@ -405,12 +405,28 @@ export default class MapboxService
this.cameraChangedCallback(this.viewport);
};
// private creatAmapContainer(id: string | HTMLDivElement) {
// let $wrapper = id as HTMLDivElement;
// if (typeof id === 'string') {
// $wrapper = document.getElementById(id) as HTMLDivElement;
// }
// return $wrapper;
// }
private creatAmapContainer(id: string | HTMLDivElement) {
let $wrapper = id as HTMLDivElement;
if (typeof id === 'string') {
$wrapper = document.getElementById(id) as HTMLDivElement;
}
return $wrapper;
const $amapdiv = document.createElement('div');
$amapdiv.style.cssText += `
position: absolute;
top: 0;
height: 100%;
width: 100%;
`;
$amapdiv.id = 'l7_mapbox_div' + mapdivCount++;
$wrapper.appendChild($amapdiv);
return $amapdiv;
}
private getMapStyle(name: MapStyle) {
if (typeof name !== 'string') {

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

@ -12,7 +12,7 @@ import { createPortal } from 'react-dom';
import { SceneContext } from './SceneContext';
interface IPopupProps {
option?: Partial<IPopupOption>;
lnglat: number[];
lnglat: number[] | { lng: number; lat: number };
children?: React.ReactNode;
}
export default class PopupComponet extends React.PureComponent<IPopupProps> {
@ -26,8 +26,8 @@ export default class PopupComponet extends React.PureComponent<IPopupProps> {
public componentDidMount() {
const { lnglat, children, option } = this.props;
const p = new Popup({
stopPropagation: false,
...option,
stopPropagation: false,
});
if (lnglat) {
@ -41,12 +41,21 @@ export default class PopupComponet extends React.PureComponent<IPopupProps> {
}
public componentDidUpdate(prevProps: IPopupProps) {
const positionChanged =
prevProps?.lnglat?.toString() !== this.props?.lnglat?.toString();
// @ts-ignore
const preLnglat = Array.isArray(prevProps.lnglat)
? prevProps.lnglat
: [prevProps?.lnglat?.lng, prevProps?.lnglat?.lat];
const nowLnglat = Array.isArray(this.props.lnglat)
? this.props.lnglat
: [this.props?.lnglat?.lng, this.props?.lnglat?.lat];
const positionChanged = preLnglat.toString() !== nowLnglat.toString();
if (positionChanged) {
this.popup.remove();
this.popup = new Popup(this.props.option);
this.popup = new Popup({
...this.props.option,
stopPropagation: false,
});
this.popup.setLnglat(this.props.lnglat);
this.popup.setDOMContent(this.el);
this.scene.addPopup(this.popup);

7
stories/District/Layer/world.tsx
View File

@ -14,7 +14,7 @@ export default class Country extends React.Component {
public async componentDidMount() {
const scene = new Scene({
id: 'map',
map: new GaodeMap({
map: new Mapbox({
center: [116.2825, 39.9],
pitch: 0,
style: 'blank',
@ -50,8 +50,11 @@ export default class Country extends React.Component {
},
popup: {
enable: true,
openTriggerEvent: 'click',
Html: (props: any) => {
return `<span>${props.NAME_CHN + ':' + props.value}</span>`;
return `<span><button onclick='alert(11111)'>点击</button>${props.NAME_CHN +
':' +
props.value}</span>`;
},
},
});

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

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

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

@ -70,9 +70,9 @@ export default React.memo(function Map() {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(),
),
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
setData(joinData(geoData, ncovData.results));
};

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

@ -85,9 +85,9 @@ export default React.memo(function Map() {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(),
),
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
const worldData = joinData(geoData, ncovData.results);
const pointdata = worldData.features.map((feature: any) => {
@ -134,9 +134,14 @@ export default React.memo(function Map() {
}}
>
<li>
<button onMouseDown={() => {
alert('test');
}} value="点击">点击</button>
<button
onMouseDown={() => {
alert('test');
}}
value="点击"
>
点击
</button>
现有确诊:{popupInfo.feature.currentConfirmedCount}
</li>
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>

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

@ -77,9 +77,9 @@ export default React.memo(function Map() {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(),
),
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
const worldData = joinData(geoData, ncovData.results);
const pointdata = worldData.features.map((feature: any) => {

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

@ -72,9 +72,9 @@ export default React.memo(function Map() {
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/e62a2f3b-ea99-4c98-9314-01d7c886263d.json',
).then((d) => d.json()),
fetch('https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json').then((d) =>
d.json(),
),
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/55a7dd2e-3fb4-4442-8899-900bb03ee67a.json',
).then((d) => d.json()),
]);
const worldData = joinData(geoData, ncovData.results);
const pointdata = worldData.features.map((feature: any) => {

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

@ -2,6 +2,7 @@ import {
LayerEvent,
LineLayer,
MapboxScene,
AMapScene,
Marker,
PolygonLayer,
Popup,
@ -71,6 +72,7 @@ export default React.memo(function Map() {
}>();
function showPopup(args: any): void {
console.log(args.lngLat);
setPopupInfo({
lnglat: args.lngLat,
feature: args.feature,
@ -92,7 +94,7 @@ export default React.memo(function Map() {
}, []);
return (
<>
<MapboxScene
<AMapScene
map={{
center: [110.19382669582967, 50.258134],
pitch: 0,
@ -116,9 +118,14 @@ export default React.memo(function Map() {
}}
>
<li>
<button onMouseDown={() => {
alert('test');
}} value="点击">点击</button>
<button
onClick={() => {
alert('test');
}}
value="点击"
>
点击
</button>
现有确诊:{popupInfo.feature.currentConfirmedCount}
</li>
<li>累计确诊:{popupInfo.feature.confirmedCount}</li>
@ -193,7 +200,7 @@ export default React.memo(function Map() {
}}
/>,
]}
</MapboxScene>
</AMapScene>
</>
);
});