当前位置:   article > 正文

高德js离线部署方案_高得 js api2离线

高得 js api2离线

一、概述
众所周知,目前常见的地图(高德、百度、腾讯等)只提供在线API服务,对于一些内网应用而言,如果需要使用地图展示,则由于不能访问互联网而无法使用类似的第三方地图服务。
本文,通过将高德地图瓦片数据 和 在线JS API做了本地部署,并修改API,将其所有的网络请求均变为本地请求。成功实现了私有化部署!

二、爬取瓦片数据
1.获取地图下载器
这是一个开源项目,使用Java开发的地图瓦片图下载工具,支持OpenStreetMap、天地图、谷歌地图、高德地图、腾讯地图、必应地图的XYZ瓦片图下载与合并。点击以下任意链接获取工具。

百度网盘下载编译后的程序,下载后直接使用即可。
链接:https://pan.baidu.com/s/1odjFKYzefLnu6c1223Fb_w?pwd=eocr
提取码:eocr

2.下载地图瓦片数据

PS:程序运行需要在全英文路径中*


1)下载解压运行run.bat
2)选择地图资源 -> 选择省份/城市 -> 下载地图
————————————————

3)选择层级就是zoom等级层级越多瓦片越多,缩放越清晰,内存也就越大。命名风格选择/{z}/{x}/{y}.png,选择下载位置,点击下载开始下载 *** 路径一定要全英文,不然会下载失败

三、获取高德离线开发包

(点击链接下载即可)高德地图离线开发包icon-default.png?t=N7T8https://gitee.com/gz-allen/gaode-map-offline-solution

四在项目中使用


1.将下载的瓦片数据和离线包放到项目的public下

在代码中直接new AMap即可,如报错则在index.html中引入/amap/AMap3.js

具体写法参照下文

  1. <template>
  2. <div class="content">
  3. <div id="homeMap" style="width: 100%;height: 100%;"></div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. map: null,
  11. };
  12. },
  13. mounted() {
  14. this.$nextTick(() => {
  15. this.init();
  16. });
  17. },
  18. //页面销毁销毁实例
  19. beforeDestroy(){
  20. if(this.map){
  21. this.map.destroy();
  22. }
  23. },
  24. methods: {
  25. //初始化地图
  26. init() {
  27. const layers = new AMap.TileLayer({
  28. getTileUrl: function (x, y, z) {
  29. return `/map_zxy/${z}/${x}/${y}.png`;
  30. },
  31. opacity: 1,
  32. zIndex: 99,
  33. })
  34. this.map = new AMap.Map("homeMap",{
  35. mapStyle: "amap://styles/blue",
  36. // mapStyle: "amap://styles/darkblue",
  37. zoom: 10, //地图级别
  38. center: [123.900000, 42.223383], //地图中心点
  39. layers: [layers],
  40. });
  41. },
  42. },
  43. };
  44. </script>

运行结果页面正常显示


参考文章链接:https://blog.csdn.net/hualinger/article/details/134787040

本项目仅供个人学习研究使用

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/424920
推荐阅读
相关标签
  

闽ICP备14008679号