解决uniapp中使用openlayers在APP中不生效bug

大家好，我是梦起，今天和大家一起探讨在uniapp中使用openlayers在安卓端不生效的问题。

首先，我们需要下载openlayers的依赖包

npm install ol

然后开开心心把代码一码，运行到Chrome一看，嗯~效果实现了

<template>
	<view>
		<view id="map"class="map"></view>
	</view>
</template>

<script>
	import 'ol/ol.css'
	import { Map, View } from 'ol'
	import ollayerTile from 'ol/layer/Tile'
	import olsourceOSM from 'ol/source/OSM'
	import {get as getProjection} from 'ol/proj';
	import TileLayer from 'ol/layer/Tile'
	import XYZ from 'ol/source/XYZ'
	import { ScaleLine, defaults as defaultControls, MousePosition } from 'ol/control'
	import { transform } from 'ol/proj'
	export default {
	    name: 'c-ol-map',
	    data () {
	        return {
	            map:null,
	            view: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=XXX',
				    projection: 'EPSG:3857',
				    crossOrigin: '*',
				  }),
				})
				//天地图标注
				var tdtLabel = new TileLayer({
				  source: new XYZ({
				    url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=XXX',
				    projection: 'EPSG:3857',
				  }),
				})
				this.map = new Map({
				  controls: defaultControls({
				    attribution: false,
				    zoom: false,
				    rotate: false,
				  }),
				  target: 'map',
				  layers: [tdt, tdtLabel],
				  view: new View({
				    projection: 'EPSG:3857',
				    center: transform([102.712251, 25.040609], 'EPSG:4326', 'EPSG:3857'),
				    // center: [102.712251, 25.040609],
				    zoom: 10,
				    maxZoom: 18, //最大缩放级别
				  }),
				})
			},
		}
	}
</script>

<style scoped>
    .map {
        height: 600px;
    }
</style>

完事了，发行测试版，准备打开掘金摸鱼。可是安装好后打开一看，雪白的一片，人都麻了。于是，我只好默默的打开hbuilderx，打开夜神模拟器，看下到底哪里出了问题。 哦豁，报错了

Cannot read property 'createElement' of undefined

不支持创建元素节点。

为了能继续打开掘金摸鱼，只好快点处理，然后各种查找资料，功夫不负有心人，被我发现一个好东西——renderjs 官网上对它的形容是：renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和web。 renderjs的主要作用有2个：

1. 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2. 在视图层操作dom，运行 for web 的 js库

在视图层操作dom，这不就能解决我那个不支持创建元素节点的bug吗，果断一改，然后完美运行了，收工，坐等下班。

<template>
	<view>
		<view id="map"class="map"></view>
	</view>
</template>

<script module="ol" lang="renderjs">
	import 'ol/ol.css'
	import { Map, View } from 'ol'
	import ollayerTile from 'ol/layer/Tile'
	import olsourceOSM from 'ol/source/OSM'
	import {get as getProjection} from 'ol/proj';
	import TileLayer from 'ol/layer/Tile'
	import XYZ from 'ol/source/XYZ'
	import { ScaleLine, defaults as defaultControls, MousePosition } from 'ol/control'
	import { transform } from 'ol/proj'
	export default {
	    name: 'c-ol-map',
	    data () {
	        return {
	            map:null,
	            view: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=cef191b507ff5cb698811cd8a9b11ca0',
				    projection: 'EPSG:3857',
				    crossOrigin: '*',
				  }),
				})
				//天地图标注
				var tdtLabel = new TileLayer({
				  source: new XYZ({
				    url: 'http://t2.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cef191b507ff5cb698811cd8a9b11ca0',
				    projection: 'EPSG:3857',
				  }),
				})
				this.map = new Map({
				  controls: defaultControls({
				    attribution: false,
				    zoom: false,
				    rotate: false,
				  }),
				  target: 'map',
				  layers: [tdt, tdtLabel],
				  view: new View({
				    projection: 'EPSG:3857',
				    center: transform([102.712251, 25.040609], 'EPSG:4326', 'EPSG:3857'),
				    // center: [102.712251, 25.040609],
				    zoom: 10,
				    maxZoom: 18, //最大缩放级别
				  }),
				})
			}
		}
	}
</script>

<style scoped>
    .map {
        height: 600px;
    }
</style>

新问题：放页面上可以正常食用，但是封装为组件就无法显示了，坐等大佬在评论区解惑。