手把手教你搭建个人地图服务器(高德离线部署解决方案):获取地图瓦片数据、高德JS API、私有化部署和调用。。。

一、概述

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

二、爬取瓦片数据

1.获取地图下载器
这是一个开源项目,使用Java开发的地图瓦片图下载工具,支持OpenStreetMap、天地图、谷歌地图、高德地图、腾讯地图、必应地图的XYZ瓦片图下载与合并。点击以下任意链接获取工具。
1)源码下载,编译后使用
2)百度网盘下载编译后的程序,下载后直接使用即可。
链接:https://pan.baidu.com/s/1odjFKYzefLnu6c1223Fb_w?pwd=eocr
提取码:eocr

2.下载地图瓦片数据

PS:程序运行需要在全英文路径中
1)下载解压运行run.bat
2)选择地图资源 -> 选择省份/城市 -> 下载地图
在这里插入图片描述
3)选择层级我这里不需要太详细,所以到12层就够了,层级越高瓦片越多。命名风格选择/{z}/{x}/{y}.png,选择下载位置,点击下载开始下载
在这里插入图片描述

三、获取高德离线开发包

高德离线包已经存至我的Gitee项目中:(点击链接下载即可)高德地图离线开发包

如何使用高德地图请参考官方文档:快速上手-地图 JS API 2.0 | 高德地图API

四、如何在项目中使用

以vue项目为例:
1.将下载的瓦片数据和离线包放到项目的public下
在这里插入图片描述
2.在MapView.vue中直接加载下载的amap文件夹下的AMap3.js,其余文件不可删除!!!如下图:

import "../../public/amap/AMap3.js"

在这里插入图片描述
3.在页面中定义地图显示元素:

<div id='map-container' style="width: 100%; height: 600px;">

4.在代码中直接new AMap即可,vue项目的话不需要再去导入map插件配置,如下图直接使用即可。
在这里插入图片描述

MapView.vue的全部代码如下:

<template><div id='map-container' style="width: 100%; height: 600px;"></div><div><button @click="handleMarker()">标记</button><button @click="handlePolyline()">折线</button><button @click="handleTextmark()">文本标记</button></div>
</template><script>
import "../../public/amap/AMap3.js"export default {data() {return {mapObj: null,}},methods: {initMap() {// 自定义地图层const base_url = "/"const layers = [new AMap.TileLayer({getTileUrl: function (x, y, z) {return `${base_url}MAP_zxy/${z}/${x}/${y}.png`;},opacity: 1,zIndex: 99,})]this.mapObj = new AMap.Map('map-container', { // 设置地图容器idresizeEnable: true,zoom: 15,rotateEnable: true,pitchEnable: true,center: [113.098980, 23.361340],defaultCursor: 'pointer',showLabel: true,  //是否显示文字标注layers: layers,})},handleMarker() {const marker = new AMap.Marker({position: [113.098980, 23.361340], //位置});this.mapObj.add(marker); //添加到地图},handlePolyline() {const lineArr = [[113.098980, 23.361340],[113.092980, 23.361340],[113.092980, 23.366340]];const polyline = new AMap.Polyline({path: lineArr, //设置线覆盖物路径strokeColor: "red", //线颜色strokeWeight: 5, //线宽strokeStyle: "solid", //线样式});this.mapObj.add(polyline);},handleTextmark() {// 创建纯文本标记let text = new AMap.Text({text:'粤电花都燃气电厂',anchor:'center', // 设置文本标记锚点draggable:true,cursor:'pointer',angle:10,style:{'padding': '.75rem 1.25rem','margin-bottom': '1rem','border-radius': '.25rem','background-color': 'white','width': '10rem','border-width': 0,'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)','text-align': 'center','font-size': '20px','color': 'blue'},position: [113.098980, 23.362240]});text.setMap(this.mapObj);let text1 = new AMap.Text({text:'双一橡胶',anchor:'center', // 设置文本标记锚点draggable:true,cursor:'pointer',angle:10,style:{'padding': '.75rem 1.25rem','margin-bottom': '1rem','border-radius': '.25rem','background-color': 'white','width': '10rem','border-width': 0,'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)','text-align': 'center','font-size': '20px','color': 'blue'},position: [113.092980, 23.366340]});text1.setMap(this.mapObj)},},mounted() {this.initMap()}
}</script><style>
@media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>

应用效果如下:
在这里插入图片描述

声明:本项目仅供个人学习研究使用,如应用于商业项目,请先获得高德公司授权!一切法律后果由使用者承担,特此声明!

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

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

相关文章

非对象集合交、并、差处理

对于集合取交集、并集的处理其实有很多种方式,这里就介绍3种 第一种 是CollectionUtils工具类 第二种 是List自带方法 第三种 是JDK1.8 stream 新特性 1、CollectionUtils工具类 下面对于基本数据(包扩String)类型中的集合进行demo示例。 public static void main(String[]…

Django回顾【五】

目录 一、多表操作 【1】基于对象的跨表查 【2】基于双下滑线的连表查 【3】related_name 二、聚合查询与分组查询 【1】聚合查询 【2】分组查询 三、F与Q查询 【1】F查询 【2】Q查询 四、其他字段和字段参数 【1】其他字段 【2】ORM字段参数 【3】ForeignKey 属…

【刷题日志】牛客 HJ73 计算日期到天数转换

计算日期到天数转换 阅读题目解题方案 及 解题思路方法一 . 手撕日期类方法二 . 分别直接算出平年和闰年每个月的时间 并对应下标存入数组中&#xff0c;判断该年份为平年还是闰年&#xff0c;再 for循环依次求和优化&#xff1a;也不用分别算出平年和闰年的每个月的时间&#…

0041__网络协议——HTTP/1HTTP/2HTTP/3

网络协议——HTTP/1&HTTP/2&HTTP/3_′、、1http:/1http:/1_bdundun的博客-CSDN博客

win10、11系统安装班智达藏文输入法并正常使用(完美解决)

1. 结果图 2. 先闲聊两句 班智达输入法对于藏语初学者可谓是太好用了&#xff08;哈哈&#xff09;特别是联想提示的功能。不禁为开发团队点个赞。 表扬完了该批评批评了。班智达输入法的安装难度真是一言难尽。也许是开发者没有继续维护的缘故吧。想当年&#xff0c;哪个藏语…

关于QueryInterface的一个小理解

QueryInterface按照字面上的意思是查询获得接口&#xff0c;用时我们可以把他当做C#中的as 或 C中的dynamic_cast这样用即可&#xff08;不知道正不正确&#xff0c;请指教&#xff09;。 我们可以为QueryInterface写一个辅助函数&#xff1a; template<typename T>stat…

DCDC电源的选择

https://blog.csdn.net/xiahailong90/article/details/79086490 先说结论&#xff1a; 高开关频率的交换式电源转换器有利也有弊&#xff0c;本文提到的好处包括体积更小、瞬时响应更快以及电压overshoot 和undershoot 值都更小&#xff0c;主要缺点则是效率降低和热量增加。 …

朋友圈7大黄金发圈时间

众所周知&#xff0c;朋友圈运营是私域运营必不可少的重要环节。 因为做好朋友圈运营&#xff0c;能够打造形成高质量、高价值的私域流量&#xff0c;加快实现用户成交。 那么如何形成一个吸粉又吸金的人设&#xff0c;做出高质量的朋友圈发圈内容呢&#xff1f; 那么如何确保能…

深度学习在训练时更新和保存最佳训练结果的方法(字典方法,本地保存方法,模型深拷贝方法)

1.用参数字典 model.state_dict()更新最优参数 best_state_dict model.state_dict() # 训练前 best_state_dict model.state_dict() # 训练时更新最优state_dict完整代码&#xff1a; # 初始化一个变量来保存最优的state_dictbest_state_dict model.state_dict()for epoc…

光纤和光模块的那点事儿

你们好&#xff0c;我的网工朋友。 应该不少朋友在工作中会遇到光纤传输布线的活吧&#xff0c;不得不说&#xff0c;会遇上的问题还挺多&#xff0c;比如说…… 光纤收发器怎么接上不亮&#xff1f; 光纤收发器和交换机插光模块能不能搭配使用&#xff1f; 带光口的球机可…

第1章 理解知识图谱:知识图谱现状、知识图谱应用场景(二)

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

执行栈和执行上下文

前端面试大全JavaScript执行栈和执行上下文 &#x1f31f;经典真题 &#x1f31f;执行上下文 &#x1f31f;栈数据结构 &#x1f31f;执行上下文生命周期 &#x1f31f;真题解答 &#x1f31f;总结 &#x1f31f;经典真题 谈谈你对 JavaScript 执行上下文栈理解 &#…

强制进行innodb恢复(数据库崩溃恢复)

经常接触数据库的难免遇到数据库崩溃的问题&#xff0c;另外发现使用windows的&#xff0c;遇到的几率会高点。 问题描述&#xff0c;mysql/mariadb突然就不能访问了&#xff0c;然后也无法启动&#xff0c;查看数据库日志&#xff0c;报些莫名奇妙的错误。 [ERROR] mysqld g…

如何将unity项目托管到github(快速便捷)

如何将unity项目托管到github&#xff08;快速便捷&#xff09; 文章目录 如何将unity项目托管到github&#xff08;快速便捷&#xff09;前置准备Gitgithubgit-lfs 具体操作1.配置.gitignore文件2.配置.gitattributes3.使用git 前置准备 Git github git-lfs 这些内容省略&…

你的AI生成物侵权了吗?

你的AI生成物侵权了吗&#xff1f; 本文目录&#xff1a; 一、前置背景 1.1、什么是版权 1.2、什么是作品 1.3、什么是创作 1.4、什么是肖像权 1.5、什么是名誉 二、AI生成的作品是否具备版权&#xff1f;如果具备&#xff0c;版权应该属于谁&#xff1f; 三、AI 学习时…

ruby安装(vscode、rubymine)

https://rubyinstaller.org/downloads/ 下载exe安装即可 会弹出 输入3 安装成功 vscode插件市场安装ruby插件 新建一个目录&#xff0c;打开terminal bundle init //进行初始化&#xff08;如果执行不了&#xff0c;应该是环境变量没生效&#xff0c;重启vscode&#…

WT2605C语音芯片的无缝循环功能在产品设计中的应用介绍

随着科技的飞速发展&#xff0c;语音芯片已经成为许多产品不可或缺的一部分。而在这些功能中&#xff0c;无缝循环播放功能尤其引人注目&#xff0c;它能够为各种产品带来独特且富有吸引力的用户体验。本文将探讨语音芯片的无缝循环功能可以应用于哪些产品设计上。 1、智能家居…

菜鸟学习日记(python)——数据类型转换

在python中&#xff0c;数据类型的转换有两种方式&#xff1a;隐式类型转换和显示类型转换。 隐式类型转换一般在进行计算时&#xff0c;自动完成转换&#xff0c;显示类型转换一般要用到类型函数来完成转换&#xff0c;它的格式为&#xff1a;数据类型&#xff08;要转换的数…

使用Docker和Selenium构建自动化测试环境

随着软件开发的日益复杂和迭代速度的加快&#xff0c;自动化测试被越来越广泛地应用于软件开发流程中。它能够提高测试效率、减少测试成本&#xff0c;并保证软件质量的稳定性。在构建自动化测试环境方面&#xff0c;Docker 和 Selenium 是两个非常有用的工具。下面将介绍如何使…

springboot流浪动物救助管理系统源码丨文档+调试+答疑

&#x1f345; 简介&#xff1a;500精品计算机源码学习 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 文末获取源码 目录 一、以下学习内容欢迎领取&#xff1a; 二、文档资料截图&#xff1a; 三想了解更多&#xff0c;请收藏、评论、留言&#xff1a;…