UNIAPP+leaflet在浏览器端正常,在安卓端打开地图缩放时会因为地图加载次序错乱导致地图图层闪烁。

        有个需求需要使用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商店进行更新。如果没有魔法的话可以在其他网站找到版本用来升级。

        

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Uniapp是一个基于Vue.js的跨平台开发框架,可以用于开发iOS、Android、H5等多个平台的应用程序。而Leaflet是一个开源的JavaScript库,用于在Web上创建交互式地图。天地图是中国国家地理信息公共服务平台提供的地图服务。 要在Uniapp中使用Leaflet加载地图热力图,可以按照以下步骤进行操作: 1. 在Uniapp项目中安装Leaflet库。可以使用npm或者yarn命令进行安装,例如:`npm install leaflet`。 2. 在需要使用地图的页面中引入Leaflet库。可以在页面的`<script>`标签中使用`import L from 'leaflet'`语句引入。 3. 创建一个地图容器。可以在页面的`<template>`标签中添加一个`<div>`元素作为地图容器,例如:`<div id="map"></div>`。 4. 初始化地图对象。在页面的`<script>`标签中,使用`L.map()`方法创建一个地图对象,并指定地图容器的id,例如:`const map = L.map('map')`。 5. 添加天地图瓦片图层。使用`L.tileLayer()`方法创建一个天地图瓦片图层对象,并将其添加到地图对象中,例如: ``` const tileLayer = L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=yourKey', { subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'], attribution: '天地图' }); tileLayer.addTo(map); ``` 其中,`yourKey`需要替换为你自己的天地图开发者密钥。 6. 加载热力图数据。使用`L.heatLayer()`方法创建一个热力图层对象,并将其添加到地图对象中,例如: ``` const heatLayer = L.heatLayer(data, { radius: 20, blur: 15, maxZoom: 10 }); heatLayer.addTo(map); ``` 其中,`data`是一个包含热力图数据的数组,每个数据点包含经纬度和权重信息。 至此,你就可以在Uniapp中使用Leaflet加载地图热力图了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值