openlayers中渲染弹窗到地图上（overlay）

我在海底吃菠萝

已于 2023-03-21 10:21:37 修改

阅读量1k

点赞数

分类专栏： # openlayers 文章标签： javascript typescript react.js

于 2022-07-26 16:34:37 首次发布

本文链接：https://blog.csdn.net/HYHhmbb/article/details/125996799

版权

openlayers 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在JavaScript文件中（由于需求原因加载暗系地图风格，所以地图选择了高德，雀氏很方便）

可以根据个人喜好去封装方法，上代码（这个是高德地图添加弹窗，之前写的不严谨）

    //信息窗口
    static infoWindow(animalMarker, item, name) {
        const content = document.createElement("div");
        //创造infowindow实例
        const infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗口
            content: content, // 这里可能需要的是原生DOM，不是虚拟DOM，所以不能用react写的组件
            offset: new AMap.Pixel(16, 10),
        });
        ReactDOM.render(<FloatInfoWindow data={item} name={name} />, content); // 把虚拟DOM挂载到原生DOM上
        infoWindow.open(GdMap.map, animalMarker.getPosition());
        return infoWindow;
    }

在js这里是直接通过ReactDOM.render（）直接渲染组件

效果图：

在TypeScript中（openlayers）

封装的代码如下：

    //添加弹窗
    static addInfoOverlay(params) {
        const { data, lnglat, refresh } = params
        const info = document.createElement('div')
        const infoWindow = new Overlay({
            id: data.id,
            element: info,
            positioning: 'bottom-center',       //相对于其位置属性的实际位置
            stopEvent: false,                   //事件冒泡
            offset: [0, -20]
        })
        // this.map.getOverlayById(id)
        const element = React.createElement(InfoWin, { data: data, refresh: refresh });
        const root = ReactDOM.createRoot(
            info
        )
        root.render(element);
        // ReactDOM.render(<InfoWin data={ data } refresh = { refresh } />, info);
        infoWindow.setPosition(lnglat)
        // infoWindow.setPosition(undefined)
        if (!this.map.getOverlayById(data.id)) {
            this.map.addOverlay(infoWindow)
            setTimeout(() => {
                this.map.removeOverlay(infoWindow)
            }, 5000)
        }

        // this.map.removeOverlay(infoWindow)

    }

在使用ReactDOM.render直接渲染组件时无法直接渲染，会报错（具体是什么我忘记了）

需要先React.createElement（InfoWin，{ data: data, refresh: refresh }）创建react元素

第一个参数是必填，传入的是似HTML标签名称，eg: ul, li
第二个参数是选填，表示的是属性，eg: className
第三个参数是选填, 子节点，eg: 要显示的文本内容

InfoWin是一个已经封装好的函数组件（弹窗）

然后通过ReactDOM.createRoot().render()的方式渲染到页面上

效果图：