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

  • 获取地图范围

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

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

以北京故宫为例:

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

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

  • 素材处理

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

  • 代码逻辑

this._mapContext = uni.createMapContext("map", this);//map为map组件idthis._mapContext.addGroundOverlay({id: 11,src: `xxx.png`,//手绘地图素材路径bounds: {southwest: {//左下角GPSlongitude: southwest[1],latitude: southwest[0]},northeast: {//右上角GPSlongitude: 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:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/668086.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ps:文档窗口状态栏

状态栏 Status Bar位于每个文档窗口的底部&#xff0c;可显示诸如视图的缩放比例及文件相关的有用信息。 ◆ ◆ ◆ 缩放比例 显示当前视图的放大比例&#xff0c;例如 100% 表示实际大小。 有关视图的缩放&#xff0c;请参阅&#xff1a; 《Ps&#xff1a;缩放工具》 可以直接…

微信小程序 使用npm包

1. 微信小程序 使用npm包 1.1. npm初始化 如果你的小程序项目没有安装过npm包的话&#xff0c;你需要先初始化npm npm init1.2. 安装npm包 这里以vant-weapp(小程序UI组件库)为例&#xff1a; npm i vant-weapp -S --production1.3. npm包构建 1.3.1. 点击微信开发者工具右…

2024/2/4学习记录

微信小程序 网络数据请求 出于安全性方面的考虑&#xff0c;小程序官方对数据接口得请求做出了俩个限制 只能对 https 类型的接口必须将接口的域名添加到信任列表中 需要去这里设置 域名只支持 https 协议域名不能使用 ip 地址 或者localhost域名必须经过 ICP 备案 服务器域…

风险管理和采购管理核心考点梳理

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 PMP - 风险管理和采购管理核心考点梳理 风险管理 风险是一个中性词&#xff0c;包括机会和威胁。风险管理的子过程非常多&#xff0c;但是相对来说子过程之间的逻辑非常清晰&#xff0c;整个风险管理的过程都是在维…

Android BitmapShader setLocalMatrix缩放Bitmap高度重新onMeasure,Kotlin

Android BitmapShader setLocalMatrix缩放Bitmap高度重新onMeasure&#xff0c;Kotlin <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://sc…

OpenResty 安装

安装OpenResty 1.安装 首先你的Linux虚拟机必须联网 1&#xff09;安装开发库 首先要安装OpenResty的依赖开发库&#xff0c;执行命令&#xff1a; yum install -y pcre-devel openssl-devel gcc --skip-broken2&#xff09;安装OpenResty仓库 你可以在你的 CentOS 系统中…

docker常见操作

一、查看docker版本 docker version 二、查找docker镜像 docker search centos name&#xff1a;相关镜像的名称 description&#xff1a;镜像描述-尽量下载官方镜像 stars&#xff1a;星数 三、查看镜像 docker images 四、拉取镜像 docker pull 【image】 五、删除镜…

使用Nginx,后端服务器获取客户端IP地址

项目背景 多个客户端通过一个路由器访问在外部搭建的服务器&#xff1b;类似下图 目的 服务器获取客户端真实IP Nginx配置文件 location /api {proxy_pass http://198.1.1.127:8099/mark;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $pro…

软件价值6-扫雷游戏

扫雷是一种经典的单人电脑游戏&#xff0c;通常在矩形方格区域内进行。游戏规则简单明了&#xff1a; 1. 地雷布局 游戏开始时&#xff0c;玩家面对一个由未知格子组成的矩形区域。其中&#xff0c;一些格子下埋有地雷&#xff0c;而其他格子是安全的。 2. 目标 玩家的目标是…

【Android Gradle 插件】自定义 Gradle 插件模块 ⑤ ( 完整总结 )

一、创建自定义插件类型模块 ( Java or Kotlin Library ) 选择 " 菜单栏 / New / New Module… " 选项 , 在 " Create New Module " 对话框中 , 选择 创建 " Java or Kotlin Library " 类型的依赖库 ; 二、手动导入相关依赖 ( Java | Groovy | …

2 月 3 日算法练习-数论

简单数论 思路&#xff1a;各个相邻数的差值求最大公约数得到 d&#xff0c;然后就能求出最少项数。 c17用gcd&#xff0c;c11 用_gcd #include<bits/stdc.h> using namespace std; using ll long long; const int N 1e5 10; ll a[N]; int n; int main( ){cin>>…

vivado 综合、时序分析

以下综合 运行完成后&#xff0c;将打开Synthesis Completed对话框&#xff0c;如下所示图形 选择其中一个选项&#xff1a; •运行实施&#xff1a;启动当前实施项目的实施设置。 •打开综合设计&#xff1a;打开综合网表、活动约束集和将目标设备集成到综合设计环境中&…

spring boot3x登录开发-上(整合jwt)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 &#x1f30a;山高路远&#xff0c;行路漫漫&#xff0c;终有归途。 目录 前置条件 jwt简介 导依赖 编写jwt工具类 1.配置项直接嵌入代码&#xff0c;通过类名.静态方法使用 2.配置项写到…

最短编辑距离问题与动态规划----LeetCode 72.编辑距离

动态规划&#xff08;Dynamic Programming, DP&#xff09;是解决复杂问题的一个强大工具&#xff0c;它将问题分解成更小的子问题&#xff0c;并使用这些子问题的解决方案来构建整体问题的解决方案。在深入探讨最短编辑距离问题之前&#xff0c;让我们先理解什么是动态规划&am…

让cgteamwork自动为Houdini载入相机,角色道具的abc文件

一 需求 最近接到个需求&#xff1a;在创建EFX文件时&#xff0c;自动加载动画出的缓存abc文件相机&#xff0c; 不用手动一个个的载入&#xff0c;还容易出错 ABC文件自动导入到Houndini里 二 过程/效果 在CGTeamwork里打开对应的镜头&#xff0c;下面的文件列表显示相机和角…

格式化日期注解@JsonFormat的使用和TimeZone时区问题

JsonFormat的使用 目的 为了便于date类型字段的序列化和反序列化&#xff0c;需要在数据结构的Date、Timestamp、DateTime类型的字段上用JsonFormat注解进行注解 使用 JsonFormat注解是一个时间格式化注解&#xff0c;比如我们存储在mysql中的数据是date类型的&#xff0c;当…

自学Java的第58,59天

网络通信 网络通信三要素&#xff1a;ip地址&#xff0c;端口号&#xff0c;协议 ip地址 常用方法 写法 端口号 协议 UDP通信 快速入门 写法&#xff08;客户端&#xff09; &#xff08;服务端&#xff09; UDP通信 多发多收 TCP通信 写法&#xff08;客户端&#xff09; …

车载充电器(OBC)氮化镓(GaN)驱动(高压高功率)设计(第四篇)

上图来自于网络 1、GaN FET概念 GaN FET&#xff0c;全称为Gallium Nitride Field-Effect Transistor&#xff08;氮化镓场效应晶体管&#xff09;&#xff0c;是一种采用氮化镓&#xff08;Gallium Nitride, GaN&#xff09;材料制作的新型功率半导体器件。相较于传统的硅基…

物联网与智慧景区的未来:机遇与挑战并存

随着科技的不断发展&#xff0c;物联网技术在智慧景区中的应用越来越广泛&#xff0c;为旅游业带来了巨大的变革。然而&#xff0c;在物联网与智慧景区的未来发展中&#xff0c;机遇与挑战并存。本文将探讨物联网与智慧景区面临的机遇和挑战&#xff0c;并提出应对措施&#xf…

《幻兽帕鲁》解锁基地和工作帕鲁数量上限

帕鲁私服的游戏参数通常可通过配置文件 PalWorldSettings.ini 来进行修改&#xff0c;然而这个配置文件有个别参数对游戏不生效&#xff0c;让人很是头疼。没错&#xff01;我说的就是终端最大的帕鲁数量&#xff01; 其实还有另外一种更加高级的参数修改方式&#xff0c;那就…