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,一经查实,立即删除!

相关文章

clickhouse query log

查询当前进行中的query SELECT query_id, read_rows, total_rows_approx, memory_usage, initial_user, initial_address, elapsed, query, client_hostname FROM system.processes; 查询最后一个状态为”查询完成“的query SELECT * FR…

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 备案 服务器域…

自然语言处理中所有任务的概括

简介&#xff1a; 自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是人工智能领域中的一个重要分支&#xff0c;致力于让计算机能够理解、解释、处理人类语言。NLP的发展为我们提供了许多强大的工具和技术&#xff0c;使得计算机能够执行各种…

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

个人总结&#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…

go-基于逃逸分析来提升性能程序

go-基于逃逸分析来提升性能程序 为什么要学习逃逸分析&#xff1a; 为了提高程序的性能&#xff0c;通过逃逸分析我们能知道指标是分配到堆上还是栈上&#xff0c;如何是 分配到栈上&#xff0c;内存的分配和释放都是由编译器进行管理的&#xff0c;分配和释放的速度都非常的…

OpenResty 安装

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

20240204金融读报1分钟小得

1、金融监督管理总局2024目标&#xff1a;全力推进中小金融机构改革化险、积极稳妥防控重点领域风险、全面强化“五大监管”、跨前一步强化央地监管协同。 重点领域风险&#xff1a;一是强化信用风险管理&#xff0c;加大不良资产处置力度&#xff1b;二是加快推进城市房地产融…

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;打开综合网表、活动约束集和将目标设备集成到综合设计环境中&…

ncc匹配(三,opencv相关性匹配ncc与数学相关性匹配对比解惑)

opencv关于ncc说&#xff0c;&#xff0c;完全匹配p1&#xff0c;完全不匹配p-1&#xff0c;p0表示无关联。 数学书概率论中说&#xff0c;|p|1&#xff0c;是线性相关&#xff0c;p0&#xff0c;不相关。 我在程序中验证后&#xff0c;发现&#xff0c;数学书更准确。 第一…

Liunx网络设置

目录 1. 配置网卡的文件位置 2. 如果后续需要重启网卡 3. 配置快捷方式 4. 如果想关闭/打开某个网卡 1. 配置网卡的文件位置 cd /etc/sysconfig/network-scripts ONBOOT是否开机启动BOOTPROTOip地址分配,DHCP表示动态主机分配协议HWADDR硬件地址,MAC地址 2. 如果后续需要重…

PHP://filter过滤器

今天刷题遇到了php://filter过滤器的知识点考察&#xff1b;不会&#xff0c;看了几篇写的不错的文章&#xff0c;本来想转载的&#xff0c;但是代码复制过来后发现格式很乱&#xff0c;和原文格式差太多了&#xff1b;算了&#xff0c;直接把文章连接拿过来吧&#xff0c;在这…

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

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