uniapp中，openlayers的使用以及renderjs传参数

效果展示

步骤

1、安装ol

npm install ol

2、使用renderjs渲染地图

如果直接渲染，h5调试没有问题，但是真机运行地图不出现，必须用renderjs进行地图渲染

<template>
  <view  id="map" class="map">
    <slot name="mapContent"></slot>
  </view>
</template>

<script module="olMap" lang="renderjs">
import { Feature, Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { defaults as defaultControls } from 'ol/control'

export default {
	name: 'c-ol-map',
	provide() {
		return {
			map: this.map,
		};
	},
	data() {
		return {
			map: null,
		}
	},
	mounted() {
		this.initMap();
	},
	methods: {
		initMap() {
			let that = this
			var tdt = new TileLayer({
				source: new XYZ({
					url: 'http://t2.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=',  // tk需要自己提供
				}),
			})
			var tdtLabel = new TileLayer({
				source: new XYZ({
					url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=', // tk需要自己提供
				}),
			})
			this.map = new Map({
				controls: defaultControls({
					attribution: false,
					zoom: false,
					rotate: false,
				}),
				target: 'map',
				layers: [tdt, tdtLabel],
				view: new View({
					projection: "EPSG:4326",
					center: [118.0313, 27.7608],
					minZoom: 5,
					maxZoom: 20,
					zoom: 13
				}),
			})
		},
	}
}
</script>

renderjs中视图层和逻辑层分离，以及传参

<template>
  <view id="map" class="map" :data="msg" :change:data="olMap.receiveMsg">
    <slot name="mapContent"></slot>
  </view>
</template>
<script>
export default {
  data() {
    return {
      msg: [],
    }
  },
  mounted() {
     this.changeMsg()
  },
  methods: {
    // renderjs 接收数据
    changeMsg() {
      this.msg =[{11.245,34.466}]
    },
  },
}
</script>
<script module="olMap" lang="renderjs">
import { Feature, Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { defaults as defaultControls } from 'ol/control'

export default {
	name: 'c-ol-map',
	provide() {
		return {
			map: this.map,
		};
	},
	data() {
		return {
			map: null,
		}
	},
	mounted() {
		this.initMap();
        this.receiveMsg()
	},
	methods: {
		initMap() {......},
    // 接收 逻辑层发送的数据
    receiveMsg(val) {
      console.log('val',val)
       if(val)
        this.itemPoints =val
    },
  watch:{
    itemPoints: { // 这里是要监听的变量名
      handler(newValue, oldValue) { //这里的第一个参数是改变后的值，第二个参数是原来的值
           }
        },
        deep: true,
      }
  },
}

重点在于，在view上绑定逻辑层的data（也就是这里的msg），在view绑定change:data（数据改变事件）与olMap中的receiveMsg关联，从而在视图层获得数据，然后就可以在逻辑层进行与其他页面的通信，然后在传到视图层进行打点或者画线等地图操作。

参考：https://blog.csdn.net/weixin_62186125/article/details/135599809