mirror of https://gitee.com/antv-l7/antv-l7
test: 新增marker测试用例 (#1309)
Co-authored-by: Dreammy23 <echo.cmy@antgroup.com>
This commit is contained in:
Dreammy23
GitHub
parent
893379f0e1
commit
f2a35106cb
|
|
@ -0,0 +1,103 @@
|
||||||
|
### markerLayer
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Marker, MarkerLayer, Scene } from '@antv/l7';
|
||||||
|
import { GaodeMap, GaodeMapV2, Mapbox } from '@antv/l7-maps';
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
useEffect(() => {
|
||||||
|
const gaodeV1Scene = new Scene({
|
||||||
|
id: 'gaodeV1',
|
||||||
|
map: new GaodeMap({
|
||||||
|
center: [105, 30.258134],
|
||||||
|
zoom: 2,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
// const gaodeV2Scene = new Scene({
|
||||||
|
// id: 'gaodeV2',
|
||||||
|
// map: new GaodeMapV2({
|
||||||
|
// center: [105, 30.258134],
|
||||||
|
// zoom: 3,
|
||||||
|
// }),
|
||||||
|
// });
|
||||||
|
const mapboxScene = new Scene({
|
||||||
|
id: 'mapbox',
|
||||||
|
map: new Mapbox({
|
||||||
|
center: [120, 30],
|
||||||
|
zoom: 2,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
addMarkers(gaodeV1Scene);
|
||||||
|
// addMarkers(gaodeV2Scene);
|
||||||
|
addMarkers(mapboxScene);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const addMarkers = (s) => {
|
||||||
|
fetch(
|
||||||
|
'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json',
|
||||||
|
)
|
||||||
|
.then((res) => res.json())
|
||||||
|
.then((nodes) => {
|
||||||
|
const markerLayer = new MarkerLayer();
|
||||||
|
for (let i = 0; i < 400; i++) {
|
||||||
|
const { coordinates } = nodes.features[i].geometry;
|
||||||
|
const el = document.createElement('label');
|
||||||
|
el.textContent = coordinates[1];
|
||||||
|
el.style.background = getColor(coordinates[1]);
|
||||||
|
el.style.borderColor = getColor(coordinates[1]);
|
||||||
|
|
||||||
|
const marker = new Marker({
|
||||||
|
element: el,
|
||||||
|
}).setLnglat({
|
||||||
|
lng: coordinates[0],
|
||||||
|
lat: coordinates[1],
|
||||||
|
});
|
||||||
|
markerLayer.addMarker(marker);
|
||||||
|
}
|
||||||
|
s.addMarkerLayer(markerLayer);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const getColor = (v) => {
|
||||||
|
const colors = [
|
||||||
|
'#ffffe5',
|
||||||
|
'#f7fcb9',
|
||||||
|
'#d9f0a3',
|
||||||
|
'#addd8e',
|
||||||
|
'#78c679',
|
||||||
|
'#41ab5d',
|
||||||
|
'#238443',
|
||||||
|
'#005a32',
|
||||||
|
];
|
||||||
|
return v > 50
|
||||||
|
? colors[7]
|
||||||
|
: v > 40
|
||||||
|
? colors[6]
|
||||||
|
: v > 30
|
||||||
|
? colors[5]
|
||||||
|
: v > 20
|
||||||
|
? colors[4]
|
||||||
|
: v > 10
|
||||||
|
? colors[3]
|
||||||
|
: v > 5
|
||||||
|
? colors[2]
|
||||||
|
: v > 0
|
||||||
|
? colors[1]
|
||||||
|
: colors[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h2>400 个节点测试</h2>
|
||||||
|
|
||||||
|
<h4>高德V1</h4>
|
||||||
|
<div id="gaodeV1" style={{ height: '500px', position: 'relative' }} />
|
||||||
|
|
||||||
|
<h4>Mapbox</h4>
|
||||||
|
<div id="mapbox" style={{ height: '500px', position: 'relative' }} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
### marker
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Marker, PointLayer, PolygonLayer, Popup, Scene } from '@antv/l7';
|
||||||
|
import { GaodeMap, Mapbox } from '@antv/l7-maps';
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
useEffect(() => {
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map-marker',
|
||||||
|
map: new GaodeMap({
|
||||||
|
center: [120.184824, 30.248341],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 18,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const popup = new Popup({
|
||||||
|
offsets: [0, 20],
|
||||||
|
}).setHTML('<h1 onclick= alert("12223")>111111111111</h1>');
|
||||||
|
|
||||||
|
const el = document.createElement('h1');
|
||||||
|
el.innerHTML = '<h1>111111111111</h1>';
|
||||||
|
|
||||||
|
// const marker = new Marker({
|
||||||
|
// element: el,
|
||||||
|
// // offsets: [0, -20],
|
||||||
|
// })
|
||||||
|
const marker = new Marker()
|
||||||
|
.setLnglat({
|
||||||
|
lng: 120.184824,
|
||||||
|
lat: 30.248341,
|
||||||
|
})
|
||||||
|
.setPopup(popup);
|
||||||
|
|
||||||
|
scene.addMarker(marker);
|
||||||
|
|
||||||
|
const arr = [
|
||||||
|
{
|
||||||
|
lng: 120.184824,
|
||||||
|
lat: 30.248341,
|
||||||
|
count: 40,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
// @ts-ignore
|
||||||
|
// marker.on('click', (e) => {
|
||||||
|
// });
|
||||||
|
// const marker1 = new AMap.Marker({
|
||||||
|
// map: scene.map,
|
||||||
|
// position: [120.184824, 30.248341],
|
||||||
|
// shadow: '#000',
|
||||||
|
// label: {
|
||||||
|
// content: '站点',
|
||||||
|
// direction: 'top',
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
// marker1.on('click', () => {
|
||||||
|
// console.log(this.scene.getZoom());
|
||||||
|
// console.log('选中的点', 1111);
|
||||||
|
// });
|
||||||
|
// this.scene = scene;
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
id="map-marker"
|
||||||
|
style={{
|
||||||
|
height: '500px',
|
||||||
|
position: 'relative',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
import Marker from '../src/marker';
|
||||||
|
import Popup from '../src/popup';
|
||||||
|
import { TestScene } from '@antv/l7-test-utils'
|
||||||
|
|
||||||
|
const popup = new Popup({ offsets: [0, 20] })
|
||||||
|
.setHTML('<h1 onclick= alert("123")>111</h1>');
|
||||||
|
|
||||||
|
const marker = new Marker()
|
||||||
|
.setLnglat({ lng: 120, lat: 30 })
|
||||||
|
.setPopup(popup);
|
||||||
|
|
||||||
|
TestScene().addMarker(marker)
|
||||||
|
|
||||||
|
describe('Marker', () => {
|
||||||
|
it('render and remove correctly', () => {
|
||||||
|
expect(document.querySelector('.l7-marker')).toBeTruthy();
|
||||||
|
expect(marker.getDefault().draggable).toEqual(false);
|
||||||
|
expect(marker.getDefault().color).toEqual('#5B8FF9');
|
||||||
|
expect(marker.getOffset()).toEqual([0, 0]);
|
||||||
|
expect(marker.isDraggable()).toEqual(false);
|
||||||
|
marker.remove()
|
||||||
|
expect(document.querySelector('.l7-marker')).toBeFalsy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('open popup and close popup correctly', () => {
|
||||||
|
marker.openPopup();
|
||||||
|
expect(marker.getPopup().isOpen()).toBeTruthy();
|
||||||
|
|
||||||
|
marker.getPopup().close();
|
||||||
|
expect(marker.getPopup().isOpen()).toBeFalsy();
|
||||||
|
|
||||||
|
marker.togglePopup();
|
||||||
|
expect(marker.getPopup().isOpen()).toBeTruthy();
|
||||||
|
|
||||||
|
marker.closePopup();
|
||||||
|
expect(marker.getPopup().isOpen()).toBeFalsy();
|
||||||
|
})
|
||||||
|
|
||||||
|
it('longitude and latitude', () => {
|
||||||
|
const { lng, lat } = marker.getLnglat();
|
||||||
|
expect(lng).toEqual(120);
|
||||||
|
expect(lat).toEqual(30);
|
||||||
|
marker.setLnglat({ lng: 121, lat: 31 })
|
||||||
|
const { lng: newLng, lat: newLat } = marker.getLnglat();
|
||||||
|
expect(newLng).toEqual(121);
|
||||||
|
expect(newLat).toEqual(31);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('element', () => {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.id = 'markerDom';
|
||||||
|
el.innerHTML = '<h1>111</h1>';
|
||||||
|
marker.setElement(el);
|
||||||
|
expect(marker.getElement()).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('extData', () => {
|
||||||
|
marker.setExtData({ test: 1 })
|
||||||
|
expect(marker.getExtData()).toEqual({ test: 1 })
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue