@uiw/react-baidu-map-tile-layer

^{使用 我的应用 也是一种 支持 我的方式：}

TileLayer 地图图层
===


此类表示一个地图图层，您可以向地图中添加自定义图层，官方原生实例：https://lbsyun.baidu.com/jsdemo.htm#g0_2。

``jsx
import { TileLayer, useTileLayer } from '@uiw/react-baidu-map';
// 或者单独安装使用
import TileLayer, { useTileLayer } from '@uiw/react-baidu-map-tile-layer';
`

$3

`jsx mdx:preview
import React from 'react';
import { useState, useRef } from 'react';
import { Map, APILoader, TileLayer } from '@uiw/react-baidu-map';

const Example = () => {
const [show, setShow] = useState(true);
return (
<>
setShow(!show)}>
{show ? '关闭' : '开启'}

http://lbsyun.baidu.com/jsdemo/demo/tiles/${zoom}/tile${x}_${y}.png;
}}
/>


);
}

const Demo = () => (


export default Demo;
`

$3

tileLayer, setTileLayer, visiable, setVisiable

`jsx mdx:preview
import React from 'react';
import { useRef, useEffect, useState } from 'react';
import { Map, APILoader, Provider, useMap, useTileLayer } from '@uiw/react-baidu-map';

const Example = () => {
const divElm = useRef(null);
const [show, setShow] = useState(true);
const { setContainer, map } = useMap({
zoom: 16, center: { lng: 116.332782, lat: 40.007978 },
widget: ['NavigationControl']
});

const { setVisiable } = useTileLayer({
visiable: show,
map, getTilesUrl: (tileCoord, zoom) => {
const { x, y } = tileCoord;
// 根据当前坐标，选取合适的瓦片图
return http://lbsyun.baidu.com/jsdemo/demo/tiles/${zoom}/tile${x}_${y}.png;
}
});

useEffect(() => {
if (divElm.current && !map) {
setContainer(divElm.current);
}
}, [map]);
return (
<>
{
setShow(!show)
setVisiable(!show)
}}>
{show ? '关闭' : '开启'}