UniApp中使用render.js进行OpenLayers、ArcGIS等地图操作实战指南

//test为render.js模块的名称，lang是固定写法  lang="renderjs"表示这个script内是render.js
<script module="test" lang="renderjs">
	export default {
		mounted() {
			// ...
		},
		methods: {
			// ...
		}
	}
</script>

<template>
    <view class="demo">
        <!-- info随便写，但是要与chang后面的一致，text是renderjsmodule名称 -->
        <!--data是要想renderjs发送的数据，updateData是renderjs中的监听方法 -->
        
//下面这个写法，会监听逻辑层变量data，data值发生变化的时候，会自动调用视图层text中定义的updateData方法
<view  @click="text.onClick" :info="data" :change:info="text.updateData"  ref="video"></view>
        <view> {{data}}</view>
         <button @click="text.emitData">直接调用renderjs中的emitData的方法</button>
		

    </view>
</template>
<!-- 普通的script标签 -->
<script>
    export default {
       data(){
            return {
              data: "hello"
            }
        },
        methods:{
              sendMsg(msg) {
                  console.log(msg) // 不好
              },
              
            getMessage(options){
				console.log("测试renderjs调用此方法："+JSON.stringify(options))
			}
             // 接收renderjs发回的数据
            receiveRenderData(val) {
               console.log('renderjs返回的值-->', val);
             },
        }
    }
</script>
<!-- renderjs的script标签 -->
<script module="text" lang="renderjs">
    export default {
           data(){
                return {
                   name:'我是render.js中的值'
                }
            },
            methods:{
              onClick(event, ownerInstance) {
                // 向 uni 的script发送信息,实现视图层向逻辑层发送数据
                ownerInstance.callMethod('sendMsg', '不好')
                //或者另外一个写法
               this.$ownerInstance.callMethod('sendMsg', '不好')
              },
              updateData(newValue, oldValue, ownerInstance, instance) {
                  // newValue: 新数据
                  // oldValue: 老数据
                  	ownerInstance.callMethod('getMessage',{
					test: '123'     
				})     //调用vue页面普通script标签内的getMessage方法，传递个json{test:'123'}
                  // 向uni-app页面组件发送信息
				this.sendMsg();

                },
                // 发送数据到逻辑层
               emitData(e, ownerVm) {
                  ownerVm.callMethod('receiveRenderData', this.name)
                }
               sendMsg() {
				// 向页面传参
				this.$ownerInstance.callMethod('getMessage','123')
			},
          }
    }
</script>