Openlayers：为Overlay创建element的四种方式

Carlos_sam2025-04-05 16:27

element属性是Overlay的核心，它定义了Overlay的内容。因此在创建Overlay的时候，如何创建它的element就成了一个至关重要的问题。

如果Overlay的结构非常简单，那么利用DOM API 就可以创建一个HTMLElement作为element。但是如果Overlay的结构非常复杂，比如说我希望Overlay当中展示一个echarts绘制的饼图，或者在Overlay中使用Element UI的轮播图组件，又或者我的Overlay内部的结构非常复杂，在这些情况下我们就应该考虑其它的创建element的方式了。在这篇文章中我就将会介绍四种给创建element的方法。

一、通过JS DOM API 创建element

JS本身有一整套完整的DOM API，让我们可以函数式的方式创建DOM树。这是最简单的一种创建element的方式，如果Overlay中的内容特别简单，比如层级特别浅就只有一两个元素，那么可以使用这种方法。

JavaScript 复制代码 
// DOM API
const el_blue = document.createElement("div");
el_blue.className = "test-overlay blue";
el_blue.innerText = "蓝色overlay";

addOverlay(window.map, {
  position: e.coordinate,
  element: el_blue.cloneNode(true),
});

需要注意的是一个元素只能绑定一个Overlay，如果你希望多个Overlay都绑定同样的元素，那么可以使用cloneNode方法对元素进行复制，或者通过一个函数来获取元素。

JavaScript 复制代码 
element.cloneNode(true)

或

JavaScript 复制代码 
function getOverlayElement(){
  return document.createElement("div");
}

二、将DOMString 作为element

如果element内部的层级较深，那么就不再适合使用DOM API去创建了，那样很麻烦。此时建议可以使用DOMString来创建element。

JavaScript 复制代码 
 // DOMString
  let el_blue = `<div class="test-overlay blue">
                      <div>
                          <div>
                              <div>
                                  蓝色overlay
                              </div>
                          </div>            
                      </div>
                  </div>`;

但是请注意Overlay的element属性只接收HTMLElement不接收DOMString，所以需要创建一个元素包装一下。

JavaScript 复制代码 
  // DOMString
  let el_blue = `<div class="test-overlay blue">
                      <div>
                          <div>
                              <div>
                                  蓝色overlay
                              </div>
                          </div>            
                      </div>
                  </div>`;


  //创建一个包装元素，将DOMString转换为HMTLElement
  const container = document.createElement("div");
  container.innerHTML = el_blue;
  el_blue = container.firstChild;

  addOverlay(window.map, {
    position: e.coordinate,
    element: el_blue,
  });

三、引用Vue单文件组件中的部分元素作为element

前两种方法简单方便，但是无法应付一些复杂的情况。曾经我为此很是苦恼，那是我就想如果能将Vue组件作为Overlay的element就好了，这样的话既可以很方便的去定义dom树的内容，又可以使用vue的语法。这第三种方案正是可以在一定程度上实现上述的想法。

1.基本思路

整体的思路也很简单，在一个vue文件中的<template>部分写好Overlay element的内容。然后在<script>部分通过模版引用获取到dom，进而创建Overlay。

JavaScript 复制代码 
<template>
  <base-map @loadend="onLoadEnd" />

  <!-- overlay -->
  <div class="text-overlay" v-show="textOverlayVisible" ref="textOverlay">
    我是一个overlay
  </div>
</template>

<script setup>
  import { ref, useTemplateRef, onMounted, nextTick } from "vue";
  import * as echarts from "echarts";
  import {
    addOverlay,
    findOverlay,
    removeOverlay,
    clearOverlay,
    setOverlayVisibility,
    toggleOverlayVisibility,
  } from "@/utils/overlay.js";


  const textOverlayVisible = ref(false);
  const textOverlay = ref(null);

  function onLoadEnd() {
    window.map.on("click", e => {
      textOverlayVisible.value = true;
      addOverlay(window.map, {
        position: e.coordinate,
        element: textOverlay.value,
      });
    });
  }

</script>

<style lang="less">
.chart-overlay {
  width: 600px;
  height: 250px;
  #main {
    width: 100%;
    height: 100%;
  }
}
</style>

2.实现对element的复用

如果是希望复用某一个element，那么就可以通过列表渲染在<template>中将一个element复制多份，跟多个Overlay进行绑定。

JavaScript 复制代码 
<template>
  <base-map @loadend="onLoadEnd" />

  <template v-for="overlay in textOverlayList" :key="overlay.id">
    <div class="text-overlay" v-show="overlay.visible" :id="overlay.id">
      我是一个overlay
    </div>
  </template>
</template>

<script setup>
import { ref, useTemplateRef, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import {
  addOverlay,
  findOverlay,
  removeOverlay,
  clearOverlay,
  setOverlayVisibility,
  toggleOverlayVisibility,
} from "@/utils/overlay.js";


const textOverlayList = ref([]);

function onLoadEnd() {
  window.map.on("click", e => {
    const overlayConfig = {
      id: "text-overlay-" + (textOverlayList.value.length + 1),
      visible: true,
    };

    textOverlayList.value.push(overlayConfig);

    nextTick(() => {
      addOverlay(window.map, {
        position: e.coordinate,
        element: document.getElementById(overlayConfig.id),
      });
    });
  });
}

</script>

<style lang="less">
.chart-overlay {
  width: 600px;
  height: 250px;
  #main {
    width: 100%;
    height: 100%;
  }
}
</style>

3.在Overlay中展示echarts图表

利用这种方式当然也就可以实现，带有echarts图表的Overlay

JavaScript 复制代码 
<template>
  <base-map @loadend="onLoadEnd" />
  <template v-for="chartOverlay in chartOverlayList" :key="chartOverlay.id">
    <div
      class="chart-overlay"
      v-show="chartOverlay.visible"
      :id="chartOverlay.id">
      <div id="main"></div>
    </div>
  </template>
</template>

<script setup>
import { ref, useTemplateRef, onMounted, nextTick } from "vue";
import * as echarts from "echarts";
import {
  addOverlay,
  findOverlay,
  removeOverlay,
  clearOverlay,
  setOverlayVisibility,
  toggleOverlayVisibility,
} from "@/utils/overlay.js";

const chartOverlayList = ref([]);

function onLoadEnd() {
  window.map.on("click", e => {
    const overlayConfig = {
      id: "chart-overlay-" + (chartOverlayList.value.length + 1),
      visible: true,
    };

    chartOverlayList.value.push(overlayConfig);

    nextTick(() => {
      initChart(document.querySelector(`#${overlayConfig.id}>#main`));

      addOverlay(window.map, {
        position: e.coordinate,
        element: document.getElementById(overlayConfig.id),
      });
    });
  });
}

function initChart(containerDOM) {
  // 初始化echarts图表
  const chartInstance = echarts.init(containerDOM);
  chartInstance.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
      type: "scroll",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  });
}
</script>

<style lang="less">
.chart-overlay {
  width: 300px;
  height: 200px;
  border-right-color: pink;
  #main {
    width: 100%;
    height: 100%;
  }
}
</style>

4.缺陷

这种方法虽然相比前两种方法有了很大的进步但是依旧还有一些不足：

  1. 与单文件组件高度绑定，所有的逻辑无论是<template>中的HTMLElement还是添加Overlay的代码，都必需放在单文件组件当中，导致灵活性不足。
  2. 复用element时较为繁琐，需要通过列表渲染才能实现对element的复用，而列表渲染又需要我们去管理一个数组，相对来说比较麻烦。

四、通过Vue实例创建element

Vue是渐进式的开发框架，虽然平时我们更多的是在单文件组件中使用它，但是Vue是可以渐进式增强静态的 HTM，也可以在任何的页面中作为Web Component插入。因此我完全可以在一个js文件中使用Vue去创建我想要的Overlay.element。

当然在Vue2和Vue3中实现的语法上是有一定的差别的，下面我将一 一介绍

1.Vue3中的实现方法

基本的思路如下：

基于上面的思路我便可以将创建图表Overlay的代码封装到一个js文件中，在项目中任何我需要的地方调用里面的方法创建Overlay。

JavaScript 复制代码 
import { createApp, ref, onMounted, nextTick, h } from "vue";
import * as echarts from "echarts";
import Overlay from "ol/Overlay.js";

// 导入overlay的样式
import "./chartOverlay.less";

// 添加图表Overlay
export const addChartOverlay = (map, position) => {
  const chartElement = getChartElement();
  // console.log(chartElement);

  const chartOverlay = new Overlay({
    element: chartElement,
    position: position,
    positioning: "center-center",
  });

  map.addOverlay(chartOverlay);
};

// 获取图表Overlay的element
const getChartElement = () => {
  const vm = createApp({
    setup() {
      const chartContainer = ref(null);

      onMounted(() => {
        nextTick(() => {
          initChart(chartContainer.value);
        });
      });

      function initChart(containerDOM) {
        // 初始化echarts图表
        const chartInstance = echarts.init(containerDOM);
        chartInstance.setOption({
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
            type: "scroll",
          },
          series: [
            {
              name: "Access From",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: "Search Engine" },
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
                { value: 300, name: "Video Ads" },
              ],
            },
          ],
        });
      }

      return () =>
        h("div", { class: "chart-overlay" }, [
          h("div", { id: "main", ref: chartContainer }),
        ]);
    },
  }).mount(document.createElement("div"));

  return vm.$el;
};

上面我使用的是组合式API，也可以使用选项式API

JavaScript 复制代码 
import { createApp, ref, onMounted, nextTick, h } from "vue";
import * as echarts from "echarts";
import Overlay from "ol/Overlay.js";

// 导入overlay的样式
import "./chartOverlay.less";

export const addChartOverlay = (map, position) => {
  const chartElement = getChartElement();
  // console.log(chartElement);

  const chartOverlay = new Overlay({
    element: chartElement,
    position: position,
    positioning: "center-center",
  });

  map.addOverlay(chartOverlay);
};

const getChartElement = () => 
  {
    const vm = createApp({
      render: () =>
        h(
          "div",
          { class: "chart-overlay" },
          [
            h("div", {
              id: "main",
              ref: "chartContainer",
            }),
          ]
        ),

      mounted() {
        const chartContainer = this.$refs.chartContainer;
        this.initChart(chartContainer);
      },
      methods: {
        initChart(containerDOM) {
          nextTick(()=>{
            // 初始化echarts图表
            const chartInstance = echarts.init(containerDOM);
            chartInstance.setOption({
              tooltip: {
                trigger: "item",
              },
              legend: {
                top: "5%",
                left: "center",
                type: "scroll",
              },
              series: [
                {
                  name: "Access From",
                  type: "pie",
                  radius: ["40%", "70%"],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                  },
                  label: {
                    show: false,
                    position: "center",
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 40,
                      fontWeight: "bold",
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                  data: [
                    { value: 1048, name: "Search Engine" },
                    { value: 735, name: "Direct" },
                    { value: 580, name: "Email" },
                    { value: 484, name: "Union Ads" },
                    { value: 300, name: "Video Ads" },
                  ],
                },
              ],
            });
          })
        },
      },
    }).mount(document.createElement("div"));

    return vm.$el;
  };

还可以直接将一个外部组件作为构建Vue实例时的根组件。

外部组件:

JavaScript 复制代码 
 <template>
  <div class="chart-overlay">
    <div id="main" ref="chartContainer"></div>
  </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from "vue";
import * as echarts from "echarts";

const chartContainer = ref(null);
onMounted(() => {
  nextTick(() => {
    // 初始化echarts图表
    const myChart = echarts.init(chartContainer.value);
    myChart.setOption({
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
        type: "scroll",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    });
  });
});
</script>

<style lang="less">
.chart-overlay {
  width: 200px;
  height: 150px;
  #main {
    width: 100%;
    height: 100%;
  }
}
</style>

创建Overlay的方法

JavaScript 复制代码 
import { createApp, ref, onMounted, nextTick, h } from "vue";
import Overlay from "ol/Overlay.js";

// 导入overlay的模板组件
import chartOverlay from "./chartOverlay.vue";

export const addChartOverlay = (map, position) => {
  const chartElement = getChartElement();
  const chartOverlay = new Overlay({
    element: chartElement,
    position: position,
    positioning: "center-center",
  });

  map.addOverlay(chartOverlay);
};

const getChartElement = () => {
  const vm = createApp(chartOverlay).mount(document.createElement("div"));
  return vm.$el;
};

2.Vue2中的实现方式

在Vue2中使用实例创建overlay.element的是思路和步骤与Vue3中基本一致，唯一的区别就是Vue2中通过Vue函数创建实例而不是createApp。

JavaScript 复制代码 
import Vue from "vue";
import * as echarts from "echarts";
import Overlay from "ol/Overlay.js";

// 导入overlay的样式
import "./chartOverlay.less";

export const addChartOverlay = (map, position) => {
  const chartElement = getChartElement();
  // console.log(chartElement);

  const chartOverlay = new Overlay({
    element: chartElement,
    position: position,
    positioning: "center-center",
  });

  map.addOverlay(chartOverlay);
};

const getChartElement = () => 
  {
    const vm = Vue({
      render: () =>
        h(
          "div",
          { class: "chart-overlay" },
          [
            h("div", {
              id: "main",
              ref: "chartContainer",
            }),
          ]
        ),

      mounted() {
        const chartContainer = this.$refs.chartContainer;
        this.initChart(chartContainer);
      },
      methods: {
        initChart(containerDOM) {
          nextTick(()=>{
            // 初始化echarts图表
            const chartInstance = echarts.init(containerDOM);
            chartInstance.setOption({
              tooltip: {
                trigger: "item",
              },
              legend: {
                top: "5%",
                left: "center",
                type: "scroll",
              },
              series: [
                {
                  name: "Access From",
                  type: "pie",
                  radius: ["40%", "70%"],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: "#fff",
                    borderWidth: 2,
                  },
                  label: {
                    show: false,
                    position: "center",
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 40,
                      fontWeight: "bold",
                    },
                  },
                  labelLine: {
                    show: false,
                  },
                  data: [
                    { value: 1048, name: "Search Engine" },
                    { value: 735, name: "Direct" },
                    { value: 580, name: "Email" },
                    { value: 484, name: "Union Ads" },
                    { value: 300, name: "Video Ads" },
                  ],
                },
              ],
            });
          })
        },
      },
    }).$mount(document.createElement("div"));

    return vm.$el;
  };

参考资料

  1. OpenLayers v10.5.0 API - Class: Overlay
  2. Vue.js
  3. API --- Vue.js
相关推荐
Mintopia1 分钟前
计算机图形学进阶探索与实践
前端·javascript·计算机图形学
代码小学僧3 分钟前
团队协作必备！pnpm 版本管理与 corepack 使用指南
前端·node.js·团队管理
一天睡25小时3 分钟前
前端工程化&&Webpack 和 Vite 的区别
前端·前端框架
gxn_mmf4 分钟前
页面需要重加载才能显示的问题修改
前端·bug
北京_宏哥5 分钟前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇（详解教程）
前端·jmeter·面试
天生我材必有用_吴用6 分钟前
鸿蒙开发入门到进阶：从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao7 分钟前
自定义指令 - 去除所有空格和换行
前端
三思而后行，慎承诺8 分钟前
详解React Fiber架构中，reconcile阶段的具体工作流程
javascript·react.js·ecmascript
前端太佬9 分钟前
微信公众号网页登录：前端视角下的技术实现精要
前端·javascript·微信
热门推荐
01西电B测-计算机网络综合实验(含验收问题)02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU05yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记06我决定放弃搞 Java 了07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】09DeepSeek各版本说明与优缺点分析10Coze扣子平台完整体验和实践（附国内和国际版对比）