如何在uniapp中使用openlayers，mapbox等前端库

1. 前言

   在进行uniapp开发时，很多时候我们需要在移动设备上进行地图开发，但是原生的地图插件功能太少，样式太丑，完全不够用。

2. renderjs

renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

renderjs的主要作用有2个：

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

3. 引入openlayers
   1）视图层，创建view节点

<template>
	<view class="container">
		<view id="olMap" class="olMap">
		</view>
		</view>
	</view>
</template>

2）在页面里面重新创建一个script，引入ol

<script module="ol" lang="renderjs">
	import "ol/ol.css";
	import data from "@/static/china.json";
	export default {
		data() {
			return {
				map: null,
			}
		},
		mounted() {
			if (typeof window.ol === 'function') {
				this.initAmap()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js'
				script.onload = this.initAmap.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initAmap() {
				this.map = new ol.Map({
					layers: [
						new ol.layer.Tile({
							source: new ol.source.OSM()
						})
					],
					target: "olMap",
					view: new ol.View({
						zoom: 18,
						center: [114, 25],
						projection: "EPSG:4326"
					})
				})
				}
<script>

当然你可以通过import导入ol，但是我不建议那么做，因为那样导入会使得库变得非常大，影像到视图层的渲染。

4. 通信

   与原script间的通信，因为是外部引入，所以在app端进行通信时，不能再使用uniapp提供的相关接口，可以使用xhr方式发送网络请求。还有一种方法可以调用原script得方法就是

UniViewJSBridge.publishHandler('onWxsInvokeCallMethod', {
                
                    cid: this._$id,  
        
                    method:'testFunc',  
                    args:{'isScroll':this.isScroll} 
                
                })

 ownerInstance.callMethod('onViewClick', {  
                    test: 'test'  
                })  

这样你可以调用原script得方法来与原逻辑层script进行通信。

官方说明:renderjs
通信问题: 通信
ios真机测试