uni-app android平台使用leaflet renderjs监听事件无法调用逻辑层方法

在uni-app中，renderjs 是一种在视图层直接运行 JavaScript 的技术，可以显著提升性能，特别是在需要频繁操作 DOM 的场景中。然而，由于 renderjs 运行在视图层，它与逻辑层（即 Vue 实例）之间的通信需要通过特定的方式进行。在 Android 平台上使用 Leaflet 结合 renderjs 时，如果你发现监听事件无法调用逻辑层方法，可以使用 uni.$emit 和 $on 事件机制来解决这个问题。

下面是一个简单的代码示例，展示如何在 renderjs 中监听事件并调用逻辑层的方法：

1. 在页面的 <template> 中定义地图容器

<template>
  <view class="container">
    <view id="map" style="width: 100%; height: 100%;"></view>
  </view>
</template>

2. 在页面的 <script> 中初始化 Leaflet 并设置事件监听

<script>
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initMap();
      // 监听来自 renderjs 的事件
      uni.$on('mapEvent', this.handleMapEvent);
    });
  },
  beforeDestroy() {
    // 取消事件监听
    uni.$off('mapEvent', this.handleMapEvent);
  },
  methods: {
    initMap() {
      // 使用 renderjs 初始化 Leaflet 地图
      this.$refs.mapContainer.innerHTML = `
        <script type="text/renderjs">
          const mapContainer = document.getElementById('map');
          const map = L.map(mapContainer).setView([51.505, -0.09], 13);

          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          }).addTo(map);

          map.on('click', function(event) {
            // 触发自定义事件，传递数据到逻辑层
            uni.$emit('mapEvent', { lat: event.latlng.lat, lng: event.latlng.lng });
          });
        </script>
      `;
    },
    handleMapEvent(event) {
      console.log('Map clicked at:', event.lat, event.lng);
      // 在这里处理逻辑层的方法调用
    }
  }
};
</script>

3. 样式部分（可选）

<style>
.container {
  width: 100%;
  height: 100%;
}
</style>

在这个示例中，renderjs 内部的 Leaflet 地图监听点击事件，并通过 uni.$emit 触发一个名为 mapEvent 的自定义事件，将点击的经纬度数据传递给逻辑层。逻辑层通过 uni.$on 监听这个事件，并在 handleMapEvent 方法中处理接收到的数据。这种方式确保了 renderjs 和逻辑层之间的有效通信。