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.hqwc.cn/news/452125.html

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

相关文章

基于场景文字知识挖掘的细粒度图像识别算法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;基于场景文字知识挖掘的细粒度图像识别算法1、研究背景2、方法提出方法模块 3、试验4、文章贡献 二、RNN代码学习2.1、什么是RNN2…

Python学习(15)|切片slice操作

38-切片 slice 操作类似字符串的切片操作&#xff0c;对于列表的切片操作和字符串类似。 切片操作&#xff1a; 切片是Python序列及其重要的操作&#xff0c;适用于列表、元组、字符串等。 切片slice操作可以让我们快速提取子列表或者修改。标准格式为&#xff1a; [起始偏移…

idea常用设置

1、内存优化 根据自己电脑本身的内存&#xff0c;对idea安装包里bin目录下的idea64.exe.vmoptions文件进行修改 -server -Xms256m -Xmx2048m -XX:MaxPermSize1024m -XX:ReservedCodeCacheSize256m -ea -Dsun.io.useCanonCachesfalse -Djava.Net.preferIPv4Stacktrue -Djsse.e…

使用vs查看虚函数的内存布局

使用vs自带的命令行&#xff0c;进入到相应的源文件目录中&#xff1a; 可以看到虚函数表的结构 命令&#xff1a; //最后的Base是类名 cl ConsoleApplication5.cpp /d1 reportSingleClassLayoutBase

机器学习系列——(六)数据降维

引言 在机器学习领域&#xff0c;数据降维是一种常用的技术&#xff0c;旨在减少数据集的维度&#xff0c;同时保留尽可能多的有用信息。数据降维可以帮助我们解决高维数据带来的问题&#xff0c;提高模型的效率和准确性。本文将详细介绍机器学习中的数据降维方法和技术&#…

MiniCPM:揭示端侧大语言模型的无限潜力

技术博客链接&#xff1a; &#x1f517;https://shengdinghu.notion.site/MiniCPM ➤ Github地址&#xff1a; &#x1f517;https://github.com/OpenBMB/MiniCPM ➤ Hugging Face地址&#xff1a; &#x1f517;https://huggingface.co/openbmb/MiniCPM-2B-sft-bf16 1 …

C++拷贝构造函数、赋值运算符重载

1.拷贝构造函数 拷贝构造函数的写法如图所示 调用方式如下 接下来我来说说它的特征 1.1特征 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存在的类类型对象创建新对象时由编译器自动调用。 拷贝构造函…

python接口自动化(二)--什么是接口测试、为什么要做接口测试(详解)

什么是接口测试 接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。  一般来说&#xff0c;测试接…

【JavaEE进阶】 图书管理系统开发日记——肆

文章目录 &#x1f343;前言&#x1f38d;约定前后端交互接⼝&#x1f340;服务器代码实现&#x1f6a9;控制层&#x1f6a9;业务层&#x1f6a9;数据层 &#x1f334;前端代码的修改⭕总结 &#x1f343;前言 今天我们来实现修改图书模块 首先我们先来看一下&#xff0c;需要…

前端学习笔记 | HTML5+CSS3静态网页制作的技巧(持续更新)

注&#xff1a;本文的css样式均使用less写法 1、字体居中 &#xff08;1&#xff09;先text-align:center;行内元素水平居中 &#xff08;2&#xff09;再line-heigh:(盒子高度);行内元素垂直居中 text-align: center;line-height: ( 30 / vw ); 2、盒子居中 情景1&#…

FCIS 2023:洞悉网络安全新前沿,引领未来安全创新狂潮

在数字化浪潮席卷全球的今天&#xff0c;网络安全问题愈发凸显其重要性。 FCIS 2023网络安全创新大会作为业界瞩目的盛会&#xff0c;不仅汇聚了国际顶尖的网络安全专家&#xff0c;更展示了最前沿的安全技术与研究成果。那么&#xff0c;参与这场大会&#xff0c;我们究竟能学…

寒假作业2月4号

第三章 类与构造函数 一&#xff0e;选择题 1、下列不能作为类的成员的是&#xff08;B&#xff09; A. 自身类对象的指针 B. 自身类对象 C. 自身类对象的引用 D. 另一个类的对象 2、假定AA为一个类&#xff0c;a()为该类公有的函数成员&#xff0c;x为该类的一个对象&am…