如何查询网站二级页面流量,惠安建设局网站,常州网络公司鼎豪网络网站建设,python基础教程学什么一、概述
众所周知#xff0c;目前常见的地图#xff08;高德、百度、腾讯等#xff09;只提供在线API服务#xff0c;对于一些内网应用而言#xff0c;如果需要使用地图展示#xff0c;则由于不能访问互联网而无法使用类似的第三方地图服务。 本文#xff0c;通过将高…一、概述
众所周知目前常见的地图高德、百度、腾讯等只提供在线API服务对于一些内网应用而言如果需要使用地图展示则由于不能访问互联网而无法使用类似的第三方地图服务。 本文通过将高德地图瓦片数据 和 在线JS API做了本地部署并修改API将其所有的网络请求均变为本地请求。成功实现了私有化部署
二、爬取瓦片数据
1.获取地图下载器 这是一个开源项目使用Java开发的地图瓦片图下载工具支持OpenStreetMap、天地图、谷歌地图、高德地图、腾讯地图、必应地图的XYZ瓦片图下载与合并。点击以下任意链接获取工具。 1源码下载编译后使用 2百度网盘下载编译后的程序下载后直接使用即可。 链接https://pan.baidu.com/s/1odjFKYzefLnu6c1223Fb_w?pwdeocr 提取码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.js3.在页面中定义地图显示元素
div idmap-container stylewidth: 100%; height: 600px;4.在代码中直接new AMap即可vue项目的话不需要再去导入map插件配置如下图直接使用即可。
MapView.vue的全部代码如下
templatediv idmap-container stylewidth: 100%; height: 600px;/divdivbutton clickhandleMarker()标记/buttonbutton clickhandlePolyline()折线/buttonbutton clickhandleTextmark()文本标记/button/div
/templatescript
import ../../public/amap/AMap3.jsexport 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()}
}/scriptstyle
media (min-width: 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
/style应用效果如下
声明本项目仅供个人学习研究使用如应用于商业项目请先获得高德公司授权一切法律后果由使用者承担特此声明
