uniapp使用render.js和Leaflet进行数据通信和地图加载

// render.js
import L from 'leaflet';
import 'leaflet-echarts';
 
export default {
  props: {
    // 接收外部传递的参数
    mapData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      map: null,
      tileLayer: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = L.map('map', {
        center: [this.mapData.center.lat, this.mapData.center.lng],
        zoom: this.mapData.zoom,
        zoomControl: false,
        attributionControl: false
      });
 
      this.tileLayer = L.tileLayer(this.mapData.url, {
        maxZoom: this.mapData.maxZoom,
        minZoom: this.mapData.minZoom
      }).addTo(this.map);
 
      // 监听地图视图变化事件
      this.map.on('moveend', () => {
        const center = this.map.getCenter();
        this.$emit('update:center', { lat: center.lat, lng: center.lng });
        this.$emit('update:zoom', this.map.getZoom());
      });
    }
  }
};

这段代码定义了一个Vue组件，它在mounted钩子中初始化了Leaflet地图，并设置了地图的中心点、缩放级别以及TileLayer图层。同时，它还监听了地图的moveend事件，当地图的中心点或者缩放级别变化时，通过$emit触发事件来更新父组件中的数据。这样做既保证了地图的交互性，也实现了地图数据与应用状态的同步。