1.在html中,amapPoints是要传的参数,test是renderjs模块的名称,getData是视图层中的函数,从而在视图层拿到在逻辑层定义的amapPoints数据。

<template>
    <!-- :data='amapPoints' 和 :change:data="test.getData 缺一不可 -->
	<view class="">
		<view id="container" :data='amapPoints' :change:data="test.getData"></view>
	</view>
</template>

2.在逻辑层中(不带有renderjs),我们通过调用接口,拿到需要的数据

<script>
	// 逻辑层
	export default {
		data() {
			return {
				amapPoints: null,  // 这就是我们需要向视图层传递的数据
			}
		},
		mounted() {
			this.initPoints();
		},
		methods: {
			initPoints() {
				uni.request({
					url: "http://123.56.139.127:8899/geoserver/points/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=points%3Apoints&maxFeatures=20&outputFormat=application%2Fjson",
					header: {
						// 'Content-Type': 'application/x-www-form-urlencoded'
						'Content-Type': 'application/json' //自定义请求头信息
					},
					method: 'GET', //请求方式,必须为大写
					success: (res) => {
						const features = res.data.features;
						// console.log("定位", features);
						// 将GeoJSON格式转换为高德地图可识别的格式
						this.amapPoints = features.map((feature) => {
							const coordinates = feature.geometry
								.coordinates; // 坐标格式为 [longitude, latitude]
							const id = feature.id.split(".")[1];
							return {
								lnglat: coordinates,
								id
							};
						});
					}
				})
			},
		}
	}
</script>

3.在逻辑层接收逻辑层传递过来的数据

<script module="test" lang="renderjs">
	// 视图层
	export default {
		data() {
			return {
				points: []  // 定义数组,接收传递过来的值
			}
		},
		mounted() {
            // html中绑定的方法
			getData(newValue) {
				console.log("newValue", newValue);
				// console.log("oldValue", oldValue);
				if (newValue) {
					this.points = newValue  // 将传递过来的值赋值给points,这样就可以在视图层中使用
				}
				// console.log("this.points", this.points)
			},
		}
	}
</script>

更多推荐