当前位置:主页 > 查看内容

2020征文-手机地图组件TinyMap来啦!鸿蒙上第一个开源地图组件

发布时间:2021-08-11 00:00| 位朋友查看

简介:想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区 https://harmonyos.51cto.com/#zz 大家好!欢迎您来到51CTO鸿蒙专区。我是董昱。很荣幸成为HarmonyOS系统课程开发者。 欢迎大家观看我在51CTO中首发了我的最新免费的视频教程《精讲鸿蒙……

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

大家好!欢迎您来到51CTO鸿蒙专区。我是董昱。很荣幸成为HarmonyOS系统课程开发者。


欢迎大家观看我在51CTO中首发了我的最新免费的视频教程《精讲鸿蒙应用程序开发》,并提出宝贵的意见:

https://edu.51cto.com/course/26138.html

今天给大家介绍我自己开发的一个鸿蒙应用程序的地图控件:TinyMap。大家先看看效果


因为论坛上传gif动画的大小的闲置,实际的效果比这个还要好一些,平移的时候如丝般顺滑。

这个控件可以放置Google和高德的底图,并且可以添加自定义的底图元素(带图片的地理位置要素)

优势:

  • 开源,方便大家学习研究
  • 超级轻量化,目前仅包含3个类,适合源码研究和学习。
  • 可高德地图和Google地图作为地理底图,并且可以选择卫星影像和矢量底图数据。
  • 可添加自定义底图元素(Element)

部署教程:

将tinymap Module(也就是HAP)移到所需要的工程中,并且在需要调用的Module(HAP)中导入这个工程。 在build.gradle中插入以下代码:

  1. apply plugin: 'com.huawei.ohos.hap' 
  2.  
  3. ... 
  4.  
  5. dependencies { 
  6.  
  7. ... 
  8.  
  9. implementation project(':tinymap'
  10.  

使用说明

目前支持手势滑动平移,还不支持手势放大和缩小(在后期会加上这个功能)。

  • zoomIn()方法:缩小地图
  • zoomOut()方法:放大地图
  • refreshMap()方法:刷新地图
  • setMapSource(TinyMap.MapSource mapSource)方法:切换底图数据源。目前底图数据源包括5类:
  1. MapSource.GAODE_ROAD : 高德道路数据 
  2.  
  3. MapSource.GAODE_VECTOR : 高德矢量数据 
  4.  
  5. MapSource.GAODE_SATELLITE : 高德卫星数据 
  6.  
  7. MapSource.GOOGLE_VECTOR : Google矢量数据 
  8.  
  9. MapSource.GOOGLE_SATELLITE : Google卫星数据 

  • addElement(float x, float y, int resource)方法:添加底图元素(目前仅支持墨卡托投影坐标,后期会添加经纬度坐标方法)。例如:
  1. addElement(12956517.35f, 4864667.87f, ResourceTable.Media_dot)​ 

这个地图是怎么实现的呢?

我通过Component组件的Canvas画布进行绘制的。具体大家可以看代码,注释啥的都有,总共也不超过1000行。

开源地址:

https://gitee.com/dongyu1009/tiny-map-for-harmony-os

如果大家感兴趣,以后会给大家介绍具体的实现方法。哈哈。

©著作权归作者和HarmonyOS技术社区共同所有,如需转载,请注明出处,否则将追究法律责任

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz


本文转载自网络,原文链接:https://harmonyos.51cto.com/#zz
本站部分内容转载于网络,版权归原作者所有,转载之目的在于传播更多优秀技术内容,如有侵权请联系QQ/微信:153890879删除,谢谢!

推荐图文


随机推荐