有个需求需要使用uniapp制作安卓端应用,并且需要包含地图。在实际开发测试的时候发现在leaflet地图组件在浏览器端正常,但在安卓端缩放地图时会出现图层闪烁现象。
最初问题排查后,发现在魅族flyme 10.0.0.2A系统版本中,因为部分代码问题导致图层缩放闪烁,原因位置。
<view id="content" >
<u-navbar :is-back="false" title="地图">
</u-navbar>
<!-- <u-dropdown ref="uDropdown" style="background-color: white;">
<u-dropdown-item title="底图类型">
<view class="slot-content">
<view class="u-text-center">
其他自定义内容
</view>
<u-button type="primary" @click="closeDropdown">确定</u-button>
</view>
</u-dropdown-item>
<u-dropdown-item title="选择图层">
<view class="slot-content">
<view class="u-text-center">
<u-checkbox-group>
<u-checkbox
@change="addCunjie"
v-model="cunjiechecked">
村界
</u-checkbox>
</u-checkbox-group>
<u-checkbox-group>
<u-checkbox
@change="addtuban"
v-model="tubanchecked">
图斑
</u-checkbox>
</u-checkbox-group>
</view>
<u-button type="primary" @click="closeDropdown">确定</u-button>
</view>
</u-dropdown-item>
</u-dropdown>
<view :props = "cunjiechecked" :change:props="leafletmap.addCunjie"></view>
<view :props = "tubanchecked" :change:props="leafletmap.addtuban"></view>
-->
<view id="leaflet" :props="options" :change:props="leafletmap.createMarker" ></view>
</view>
当地图上存在上方<u-dropdown>标签的时候,下方地图缩放会闪烁(此标签最初用来设置图层管理,因为项目需要,实际会出现若干图层分类)。同时因为地图需要渲染两个wms图层及两个瓦片图层,使用leaflet的L.control.layers进行地图图层管理:
// 图层组1
this.baseLayers = {
'图层1': this.vec_group,
'图层2': this.img_group,
}
//图层组2
this.overLayer = {
'图层3': this.tuceng1,
'图层4': this.tuceng2,
}
// 图层控件
L.control.layers(this.baseLayers,this.overLayer , {
position: 'topright',
collapsed: true
}).addTo(this.map);
此后在魅族真机上调试缩放闪烁问题解决。同时测试小米,华为一未知型号的机型测试未出现闪烁。但在华为meta30测试中,缩放时仍发现频闪,查看设置后,发现在手机开发者选项中开启“强制gpu进行2d渲染”,关闭此选项后,重启应用,leaflet闪烁问题解决。
今日再oppo某机型测试中,再次出现缩放闪烁问题,根据华为meta30经验,再次打开开发者选项,发现在该系统版本中,“强制gpu进行2d渲染”选项消失。因考虑安卓的uniapp依赖于webview实现,故查看webview版本,发现webview版本为97,升级webview版本至118版本之后,重启手机,频闪问题解决。
注:安卓webview版本查看在开发者选项中,能找到webview实现,点开即可看到webview版本,想要升级webview最好在google商店进行更新。如果没有魔法的话可以在其他网站找到版本用来升级。