扩展自定义组件

DOM 组件

Amap组件是一个容器，你可以把自己的其他 DOM 组件作为<Amap>...</Amap>的子组件，从而实现沉浸式的地图 App。

// example

return (

<Amap>

<div

className="searchbox"

style={{ position: 'absolute', left: 0, top: 0 }}

>

... 你的搜索框UI

</div>

</Amap>

);

如果你的组件中需要访问所属的AMap.Map地图实例，可以使用useAmaphooks。

// example

import { useAmap } from '@amap/amap-react';

const map = useAmap(); // AMap.Map | undefined

地图组件

如果你需要基于AMap JSAPI开发更多复杂的地图组件，可以用useAmapComponent来引入更多的地图组件

例如，基于下面的代码模式，你可以实现一个自己的Heatmap组件。

// example

import { useEffect } from 'react';

import { useAmapComponent } from '@amap/amap-react';

export default function MyHeatmap(props) {

const heatmap = useAmapComponent(

(AMap, map) => {

// 初始化热力图

const heatmap = new AMap.HeatMap(map);

return heatmap;

},

['AMap.HeatMap'], // 加载AMap插件

);

const { dataset } = props;

useEffect(() => {

if (!heatmap) return;

// 响应数据更新

heatmap.setDataSet(set);

}, [heatmap, dataset]);

}

完整示例请看热力图 HeatMap

进阶用法

如果你需要基于AMap JSAPI开发更多复杂的地图组件，可以基于更原始的 hooks API 来实现，例如

// example

import { useEffect } from 'react';

import { useAmap, usePlugins } from '@amap/amap-react';

export default function MyHeatmap(props) {

const map = useAmap();

const AMap = usePlugins(['AMap.Heatmap']);

useEffect(() => {

if (map && AMap) {

// 这里执行初始化逻辑

const heatmap = new AMap.Heatmap(...);

map.add(heatmap);

return () => {

// 这里执行销毁逻辑

map.remove(heatmap);

};

}

}, [map, AMap]);

return null;

}

完整示例请看GLCustomLayer + regl