GeoLocate
using browser environmentnagigatorofgetlocationMethod, use the browser to turn on the location sensing capability to obtain the longitude and latitude of the current user.
illustrate
Notice:
- When using this capability, the user will be required to authenticate the browser to enable location awareness.
- The coordinates currently obtained by the browser are
WGS84The geographical coordinate system will be biased when used on the Gaode map, so it can be usedtransformConfigure the coordinate system conversion.
use
import { Scene, GeoLocate } from '@antv/l7';
import gcoord from 'gcoord';
const scene = new Scene({
// ...
});
scene.on('loaded', () => {
const geoLocate = new GeoLocate({
transform: (position) => {
//Convert the coordinates obtained based on the WGS84 geographical coordinate system into the GCJ02 coordinate system
return gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02);
},
});
scene.addControl(geoLocate);
});
Configuration
| name | illustrate | type |
|---|---|---|
| transform | Format passedgetlocationThe function of the obtained longitude and latitude can be used to convert the geographical coordinate system |
(position: [number, number]) => [number, number] |
| name | illustrate | type |
|---|---|---|
| btnIcon | button icon | HTMLElement|SVGElement |
| btnText | Button content text | string |
| title | buttontitleAttributes |
string |
| vertical | When btnIcon has a value, whether the icons and text in the button are arranged vertically | boolean |
| name | illustrate | type |
|---|---|---|
| position | The location and arrangement of controls when they are added to the map, see detailscontrol slot | Position |
| className | Custom style name | string |
| style | Custom style | string |
Position
export type Position =
| 'topleft' // ↖ upper left corner, vertical arrangement
| 'lefttop' // ↖ Upper left corner, arranged horizontally
| 'topright' // ↗ Upper right corner, vertical arrangement
| 'righttop' // ↗ Upper right corner, arranged horizontally
| 'bottomleft' // ↙ lower left corner, arranged vertically
| 'leftbottom' // ↙ lower left corner, arranged horizontally
| 'bottomright' // ↘ Lower right corner, arranged vertically
| 'rightbottom' // ↘ Lower right corner, arranged horizontally
| 'topcenter' // ↑ top center, arranged horizontally
| 'bottomcenter' // ↓ bottom center, arranged horizontally
| 'leftcenter' // ← left center, arranged vertically
| 'rightcenter' // → middle right, arranged vertically
| Element; // Pass in DOM as the container of the current control
method
| name | illustrate | type |
|---|---|---|
| getGeoLocation | Get the latitude and longitude of the current user’s location | () => Promise<[number, number]> |
| name | illustrate | type |
|---|---|---|
| setOptions | Update configuration, parameters need to refer to the corresponding componentConfiguration | (newOption: Partial<Option>) => void |
| getOptions | Get currentConfiguration | () => Option |
| show | display component | () => void |
| hide | Hidden component | () => void |
| getContainer | Get the information corresponding to the current controlDOMcontainer |
() => HTMLElement |
event
| Name | Description | Type |
|---|---|---|
| add | Event when component is added | (this) => void |
| remove | Event when component is removed | (this) => void |
| show | Events when the component is displayed | (this) => void |
| hide | Event when component is hidden | (this) => void |