uni-app renderjs 使用leaflet示例

rendererjs是什么？

rendererjs是一个运行在视图层的js，只支持app-vue和h5

renderjs的用处

• 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
• 在视图层操作dom，运行 for web 的 js库

renderjs用法

在保证已有script下在创建一个新的script标签，标签中定义land=“renderjs” module=“任意名”

module相当于id，后面需要通过module属性来调用方法

<template>
     <view:msg="msg":change:msg="renderScript.receiveMsg">{{msg}}</view>
</template>
 // 这是逻辑层
<script>
  export default {
    data() {
      return {
        msg: '我是service层原来的msg',
      };
    },
    methods: {
       //接收renderjs发回的数据,同时触发:change:msg,调用enderjs中的emitData的方法
	  serviceClick(e){
		  this.msg=e
	  }
    }
  };
</script>
 // 这是视图层
<script module="renderScript" lang="renderjs">
    export default {
      methods: {
		  receiveMsg(newValue, oldValue, ownerVm, vm) {
		  	// 调用 service层的serviceClick方法,传值
			console.log(event,ownerInstance)
		  	ownerVm.callMethod('serviceClick', {
		  		test: '这是点击renderjs的区域，向service层传递变量'
		  	})
		  },
      }
    };
</script>

逻辑层和视图层的通信

逻辑层到视图层

在元素上定义一个逻辑层中的属性，在通过change:(属性名)=module.方法名

视图层到逻辑层

通过this.$ownerInstance.callMethod()方法可以调用service中的方法，第一个参数是方法名，第二个参数是传过去的参数

下面是通过renderjs使用leaflet地图示例

<template>
	<view id="content" >
		<view id="leaflet" :prop="markerDataArr" :change:prop="leaflet.createMarker"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// 标记数据
				markerDataArr:[],
			}
		},
		mounted() {
			this.getPsGis();
		},
		methods:{
			// 获取点位坐标
			getPsGis(){
				this.$http('/smoke/smokeData/getPsRealityDataGis','get').then(rel=>{
					if(rel.data.success){
						this.markerDataArr = rel.data.result
						console.log(this.markerDataArr)
					}
				})
			},
			// 测试
			test(val){
				console.log(val)
			}
		}
	}
</script>

<script module="leaflet" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
			}
		},
		mounted(){
			const link = document.createElement('link');
			link.rel = 'stylesheet';
			link.href = 'https://unpkg.com/leaflet@1.9.3/dist/leaflet.css';
			document.head.appendChild(link);
			
			const script = document.createElement('script');
			script.src = 'https://unpkg.com/leaflet@1.9.3/dist/leaflet.js';
			script.type = "text/javascript";
			script.onload = this.initLeaflet.bind(this);
			document.head.appendChild(script);
		},
		methods:{
			// 初始地图
			initLeaflet(){
				this.map = L.map('leaflet',{
					minZoom: 4,
					maxZoom: 17,
					zoom: 13,
					center: [37.632111, 114.89480237], 
					attributionControl: false,
					zoomControl: false,
				});
				L.tileLayer("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}").addTo(this.map);
			},
			// 创建标记
			createMarker(newValue, oldValue, ownerInstance, instance){
				ownerInstance.$vm.markerDataArr.map((item,index)=>{
					let color = this.colorSelect(item)
					let divIcon = L.divIcon({
						html:`<div style='background:${color};width:20px;height:20px;border-radius:20px'>
						</div>`,
						className:'ss',
					});
					
					let marker = L.marker([item['lat'],item['lon']],{icon:divIcon}).addTo(this.map).on('click',(rel)=>{
						console.log(rel)
						console.log(marker);
						let dom = `<div>
						纬度：${rel['latlng']['lat']}<br/>
						经度：${rel['latlng']['lng']}
						</div>`
						let options = {
							className:'popup',
							// autoClose:false,
							closeOnEscapeKey:false,
						}
						rel['target'].bindPopup(dom,options);
						ownerInstance.callMethod('test','测试')
					})
				})
				
			},
			colorSelect(item){
				if(item.smoke === null){
					return '#7a7e83'
				}else if(item.smoke < 0.9){
					return '#5ED323'
				}else if(item.smoke > 0.9 && item.smoke < 1){
					return '#FC8402'
				}else if(item.smoke > 1){
					return '#d81e06'
				}
			},
		}
	}
</script>
<style>
	#content{
		width: 100%;
		height: 100vh;
	}
	#leaflet{
		width: 100%;
		height: 100vh;
		border: 1px solid #aaa;
		z-index: 1;
	}
</style>

效果展示