uniapp中引入使用leaflet地图

leaflet地图本身支持移动端，但对原生更友好，在uniapp中就较为复杂
如果是直接引入，在h5端是正常的，但真机运行后就会发现，地图加载不出来，需要用到uniapp的renderjs

renderjs官方描述

<view class="warp">
		<view id="map" class='map'>
		
		</view>
	</view>
	<script module="leaflet" lang="renderjs">
	import L from 'leaflet'
 
	export default {
		data() {
			return {};
		},
		components: {},
		created() {},
		mounted() {
		
			var map = L.map('map', {
				center: [29.09508, 119.07214],
				zoom: 13,
				minZoom: 1,
				maxZoom: 24,
				zoomControl: false,
			});
			 L.tileLayer(
				'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				}).addTo(map);
 
		},
		computed: {},
		methods: {}
	};
</script>

这样子一个最基本的地图就出来了。

关于功能交互

官方描述中注意事项里有这么几句话

在renderjs里的script是拿不到正常的this对象的，包括uni的接口也用不了，比如你在renderjs的mouted中打印一个storage信息

结果就是h5端正常打印，但在真机上就会报错，导致连地图也出不来
所以可以写两个script，一个逻辑层，一个视图层，
两个script之间的交互则需要这么写

<template>
    <div>
      <view :layers="layers" :change:layers="leaflet.changeLayers">

      </view>
    </div>
</template>
<script module="leaflet" lang="renderjs">
import L from 'leaflet'
export default {
    data() {
      return{}
    },
    mounted(){
        var map = L.map('map', {
				center: [29.09508, 119.07214],
				zoom: 13,
				minZoom: 1,
				maxZoom: 24,
				zoomControl: false,
			});
			 L.tileLayer(
				'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				}).addTo(map);
    },
    methods:{
        changeLayers(newValue, oldValue, ownerInstance, instance){
            console.log(newValue, oldValue, ownerInstance, instance);
            
        },
    }
}
</script>
<script>
export default {
    data() {
      return{
          layers:null
      }
    },
    mounted(){},
    methods:{}
}
</script>
<script>
export default {
    data() {
      return{}
    },
    mounted(){},
    methods:{}
}
</script>
<style scoped>

</style>

在view标签上绑定正常script的数据，通过:change绑定的事件来操作，当数据改变时可以监听到，然后触发绑定的事件，以此来操作地图功能交互