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

原创

已于 2023-03-21 10:21:37 修改 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #typescript #react.js

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

本文探讨了在JavaScript（使用高德地图）和TypeScript（使用OpenLayers）环境下，如何创建和渲染地图弹窗。在JavaScript中，通过ReactDOM.render直接将React组件挂载到原生DOM上实现弹窗。而在TypeScript的OpenLayers中，由于直接使用ReactDOM.render会报错，因此需要先使用React.createElement创建React元素，再通过ReactDOM.createRoot().render()进行渲染。两种方法展示了不同库与React集成的差异。

在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（）直接渲染组件

效果图：