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:

相关推荐
2501_915921435 小时前
iOS 抓包工具有哪些,开发者的选型与实战指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918416 小时前
iOS 26 应用管理实战 多工具协同构建开发与调试的高效体系
macos·ios·小程序·uni-app·objective-c·cocoa·iphone
游戏开发爱好者87 小时前
iOS 抓包工具实战 开发者的工具矩阵与真机排查流程
android·ios·小程序·https·uni-app·iphone·webview
星光一影17 小时前
供应链进销存源码uniapp全开源ERP多仓库管理系统pc+app手机端
mysql·elementui·uni-app·开源·php·phpstorm·1024程序员节
A腿长一米二17 小时前
【uniapp问题还是我的认知问题】
uni-app
2501_9159090621 小时前
网络调试工具推荐 Fiddler抓包工具使用教程与代理设置详解(HTTP/HTTPS配置与实战技巧)
网络·http·ios·小程序·fiddler·uni-app·webview
焚 城1 天前
uniapp实现PDF的预览
pdf·uni-app
一路向前的月光1 天前
uniapp(1)
uni-app
遗憾随她而去.1 天前
uniapp 实现一个底部悬浮面板
uni-app
Aress"1 天前
uniapp设置vuex公共值状态管理
javascript·vue.js·uni-app