uniapp /微信小程序 使用map组件实现手绘地图方案

获取地图范围

点图拾取坐标-地图开放平台|腾讯位置服务

获取需要手绘地图左下角和右上角GPS坐标

以北京故宫为例:

截取需要手绘地图进行手绘地图制作

​​​​​​​​​​​​​​

素材处理

由于地图素材文件比较大,小程序又限制包大小<=2M,无法存放本地,所以素材只能存放云端

代码逻辑

javascript 复制代码
this._mapContext = uni.createMapContext("map", this);//map为map组件id

this._mapContext.addGroundOverlay({
					id: 11,
					src: `xxx.png`,//手绘地图素材路径
					bounds: {
						southwest: {//左下角GPS
							longitude: southwest[1],
							latitude: southwest[0]
						},
						northeast: {//右上角GPS
							longitude: northeast[1],
							latitude: northeast[0]
						}
					},
					visiable: true,
					zIndex: 1000,
					success: () => {
						console.log("显示成功", southwest, northeast)
					},
					fail: (e) => {
						console.log("显示失败", e)
					}
				})

效果

素材模糊处理方案

采用大分辨率素材,并将素材裁剪成M*N个瓦片,通过拼接的方式对手绘地图进行拼接

本人是一名:Uniapp(小程序、APP、H5)、ReactNative、React、VUE、小程序原生开发、DCloud云函数、小程序云函数开发者,业余时间进行兼职开发,如果有任何项目需求可加V:

相关推荐
小白_ysf3 小时前
uniapp 开发微信小程序,获取经纬度并且转化详细地址(单独封装版本)
微信小程序·uni-app
iOS阿玮6 小时前
三年期已满,你的产品不再更新将于90天后下架。
uni-app·app·apple
bug总结1 天前
深入理解 uni-app 的 uni.createSelectorQuery()
uni-app
真上帝的左手1 天前
25. 移动端-uni-app
uni-app
编程猪猪侠1 天前
基于Uni-app+vue3实现微信小程序地图固定中心点范围内拖拽选择位置功能(分步骤详解)
uni-app
小徐_23331 天前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
前端·uni-app·trae
斯~内克1 天前
UniApp 页面传参方式详解
网络协议·udp·uni-app
大聪明了1 天前
uniapp vue3 使用 pinia
javascript·vue.js·uni-app
有梦想的刺儿2 天前
uniapp手机端video标签层级过高问题
uni-app
&白帝&2 天前
Uniapp 获取系统信息:uni.getSystemInfo 与 uni.getSystemInfoSync
uni-app