leaflet 修改popup样式

### 修改 Leaflet Popup 样式的方案

#### CSS 穿透设置自定义样式
为了实现 Vue 和 Leaflet 的集成并修改 `popup` 组件的样式，在项目中的 `.vue` 文件内，可以为 `<style>` 添加 `scoped` 属性，并采用深度作用符（如 `/deep/` 或者 `>>>`），以便让样式能够影响到由 Leaflet 渲染出来的 DOM 节点。例如：

<style scoped>
/* 使用 >>> 符号 */
/deep/.custom-popup {
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
}
</style>

此处展示了如何通过添加特定类名为 `custom-popup` 来覆盖默认外观[^1]。

#### 创建自定义 Popup 类
除了调整现有样式的视觉效果外，还可以构建一个新的 JavaScript 对象继承于原生 Popup 构造函数，从而拥有更多灵活性来自定义行为和布局。下面是一个例子说明怎样做到这一点:

class CustomPopup extends L.Popup {
    _initLayout() {
        super._initLayout();
        this._container.classList.add('custom-popup'); // 增加自定义 class 名字
    }
}

// 应用于地图对象上
const customPopup = new CustomPopup()
    .setLatLng([latitude, longitude])
    .setContent('<p>这里是内容。</p>')
    .openOn(map);

这段代码片段中，通过扩展 `_initLayout()` 方法给弹窗容器附加了一个额外的 CSS 类名称 `custom-popup`，之后就可以按照前面提到的方式去编写对应的样式规则了[^2]。

#### 结合 Vue 组件作为 Popup 内容
如果希望进一步增强交互性和可维护性，则可以把整个 `popup` 当作一个独立的小型应用来看待——即把它封装成一个完整的 Vue 单文件组件 (SFC)，再将其渲染至页面当中。以下是关于这部分操作的一个简单示范：

首先确保已经安装好必要的依赖项，接着引入所需的模块以及声明全局变量指向当前的地图实例；最后一步是在适当的地方调用 `new Vue({...})` 来启动该组件。

import Vue from 'vue';
import MyCustomPopupComponent from './path/to/component.vue';

function initMap() {
    const map = L.map('map').setView([lat, lng], zoomLevel);

    // ...其他初始化逻辑...

    function onEachFeature(feature, layer) {
        layer.bindPopup(() => {
            return createApp(MyCustomPopupComponent).mount(document.createElement('div')).$el.outerHTML;
        });
    }

    // ...
}

这里的关键在于每当触发绑定事件时动态生成新的 Vue 实例并将之转换为 HTML 字符串形式返回给 Leaflet 处理[^3]。