uni-app使用openlayers

发布于June 25, 2020

1.概要

uniapp在提供了强大的多端转换功能的同时，也会极大的限制用户的操作并且为用户提供大量的bug。但对于节约成本和快速上线的app可以还是值得使用的。

2.使用openlayers

在使用openlayers的时候，和在一般的vue框架中使用没有太大的差别。但是uni-app的一些特性会使得openlayers出现一些意外情况。

2.1问题原因

uniapp会脑残的将我们写的<button>等标签转换为他们自带的<uni-button>标签，同样的也会把样式中的button选择器翻译为uni-button选择器。我们的代码是放在mounted中，生成的dom中button等标签并未被翻译，但是引入的ol.css中的button选择器被翻译为了uni-button，这就导致dom找不到对应的css样式。

2.2解决方法

解决方式的主要思路就是和dom一样一起绕过uni-app的翻译阶段。在这里主要使用uni-app的renderjs。

<script module="openlayers" lang="renderjs">
import {Map, View} from 'ol';
import {Tile as TileLayer, Image as ImageLayer} from 'ol/layer';
import {OSM, XYZ,ImageStatic } from 'ol/source';
</script>

这样主要是可以直接操作dom元素，其他和普通的vue<script>一致。这里直接操作dom就可以手动插入一个<link>标签并将href指向ol.css,就可以绕过翻译阶段，是的样式能被正确的引用。

mounted(){
const style = document.createElement('link');
style.href = '../../../static/ol.css';//自己的ol.css文件地址
style.rel = 'stylesheet';
style.type = 'text/css';
document.getElementsByTagName('HEAD').item(0).appendChild(style);
//初始化map等操作
}

其中自己的ol.css文件存放地址在我的实验中目前只能放在static文件夹中，不然会出现mime不对应的问题。具体原因还需要进一步分析。

3.结语

目前通过这种方式使用openlayers实属无奈，以后还是尽量选择目标明确的框架吧。使用中其他的只有等后面遇到再来一一排雷吧。