获取地图范围
获取需要手绘地图左下角和右上角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:
