antv-l7/dev-demos/component/control/navigation.tsx

48 lines
1.0 KiB
TypeScript

import { GaodeMap, GeoLocate, Scene } from '@antv/l7';
import gcoord from 'gcoord';
import React from 'react';
// tslint:disable-next-line:no-duplicate-imports
import { FunctionComponent, useEffect } from 'react';
const Demo: FunctionComponent = () => {
useEffect(() => {
const newScene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'normal',
center: [120, 30],
pitch: 0,
zoom: 6.45,
preserveDrawingBuffer: true,
// WebGLParams: {
// preserveDrawingBuffer: true,
// },
}),
// logoVisible: false,
});
newScene.on('loaded', () => {
const newControl = new GeoLocate({
transform: (position) => {
return gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02);
},
});
newScene.addControl(newControl);
});
}, []);
return (
<>
<div
id="map"
style={{
height: '500px',
position: 'relative',
}}
/>
</>
);
};
export default Demo;