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>