React集成高德地图实现行政区划浏览

在React中去使用高德地图，实际上有很多可以使用的第三方库，但这些第三方库有一个缺陷，就是不能够满足一些复杂的业务场景，倘若单纯使用地图的标记以及信息窗口的时候，现有的第三方库已经够满足我们需求了, 比如我需要在地图上描绘出某一个省份的区域，这时候很多第三方库都没有现成的，因此需要我们进行自定义。

在 create-react-app 中集成

创建项目

$ yarn create reatc-app amap-demo

我们需要在 public/index.html 中引入高德地图的JSAPI

<script src="https://webapi.amap.com/maps?v=2.0&key=Key值"></script>

Key值是在高德地图开放平台的控制台所申请的，详细申请步骤参考：lbs.amap.com/api/jsapi-v…

可以采用 React Class组件的方式去渲染地图，也可以采用React Hooks的方式渲染，React的class组件和Hooks两种方式有什么的区别，具体是怎么实现的可以参考：react.docschina.org/docs/gettin…

这里采用React Hooks的方式渲染

新建一个src/renderMap.tsx

export default function RenderMap() {

    useEffect(() => {
        renderMap()
    }, [])

    function renderMap() {
        const container = document.querySelector("#container");
        if (container) {
            // @ts-ignore
            const map = new AMap.Map("container", {
                zoom: 12,
                center: [120.164562,30.242387]
            });
        }
    }

    return (
        <div
            id="container"
            style={{
                width: "calc(100vw - 260px)",
                height: "calc(100vh - 140px)"
            }}
        />
    );
}

这样就简单的实现了高德地图的集成，如果要描绘某一个省份的范围如何操作？

这需要用到高德地图AMapUI组件里面的行政区划浏览，使用方式：

依旧需要在 public/index.html 中添加一个script 标签

<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

添加完成之后，在渲染地图完成之后，添加一个方法即可

function renderMap() {
    const container = document.querySelector("#container");
    if (container) {
        // @ts-ignore
        const map = new AMap.Map("container", {
            zoom: 12,
            center: [120.164562,30.242387]
        });
        // @ts-ignore
        AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
            // 创建一个实例
            const districtExplorer = new DistrictExplorer({
                map: map
            });
            // 行政区划代码
            const adcode = 130000;
            districtExplorer.loadAreaNode(adcode, function(error: any, areaNode: any) {
                //清除已有的绘制内容
                districtExplorer.clearFeaturePolygons();
                districtExplorer.renderParentFeature(areaNode, {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: 'green', //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: "#1890ff", //填充色
                    fillOpacity: 0.25, //填充透明度
                });
            });
        });
    }
}

这样就简单的实现行政区的区域范围绘制了，效果：

在 umi 或 Ant Design Pro中集成

由于Ant Design Pro是在umi的基础上进行搭建的，因此两者的集成方式是一致的

创建项目

$ yarn create umi amap-demo

只需要在 src/pages/document.ejs 中引入高德地图JSAPI的script 标签即可，若 src/pages 没有document.ejs，则需要手动进行创建。

需要注意的是 .ejs 文件是javascript模板引擎 EJS所产生的文件，其内容依旧是HTML。 因此可以将现有的HTML文件通过修改后缀获取ejs文件