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:

相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq3 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app