高德地图覆盖自定义瓦片图

前提：前端数据展示大屏需要展示一张1G左右的水库周边全景图（原计划20G，实际1G左右就已经够用了），此文章只作为本人项目工作经验总结。1G直接加载的话对浏览器的压力太大，而且需要缩放和拖拽，所以借鉴地图的展示原理。

项目需求：

1.展示一张1G的全景图

2.需要拖拽、缩放

3.限制缩放范围（zooms）

4.限制拖拽区域

5.将图片切成瓦片图

需要的工具和文档

1.ps （需要将tiff格式的图片转成能用的png或jpg、需要确定初始的放大倍率，将图片完美嵌入到卫星云图中）

2.切片工具

（1）maptile专业测试版（需要付费使用，测试版有水印）

这个软件很好用，可以加微信买正版，网上有教程，很全面

https://blog.csdn.net/bq_cui/article/details/47372005?spm=1001.2014.3001.5502

下载地址

http://www.1hwj.net/forum.php?mod=viewthread&tid=1&extra=page%3D1

（2）高德切图工具（开源的，但是处理不了大图，也有百度切图工具，感兴趣的可以下一个玩一下）

下载地址：GitHub - jiazheng/BaiduMapTileCutter: Tile cutter for baidu map api

（3）高德地图文档（捡几个关键的）

图层-参考手册-地图 JS API | 高德地图API （瓦片地图参考api）

高德坐标拾取（拾取地图经纬度）

限制地图显示范围-地图属性-示例中心-JS API 示例 | 高德地图API （限制拖拽区域）

思路：

1.确定地图的放大倍数区间

2.使用切片工具切成瓦片，让后端传到服务器上（注意同源策略）

切出来的每一放大级别都放在各自文件夹下（文件夹名称对应地图zoom）

var layer_std = new AMap.TileLayer();this.map = new AMap.Map("mapView", {rotateEnable: true,pitchEnable: true,zoom:14,zooms:[14,19],center: [120.145147, 36.868],  // 中心点resizeEnable: false, //是否监控地图容器尺寸变化showLabel: false,//是否显示标注mapStyle: "amap://styles/30a69840de521825d1c73041ed88fbb6",layers: [layer_std,new AMap.TileLayer.Satellite()],//叠加图层});var tilerLayer = new AMap.TileLayer({zIndex:10,getTileUrl: function(x,y,z){// console.log('http://zz.xizhengtech.com/resource/tiles/' + z + '/' + x +'_' + y + '.png')return 'http://*********/resource/tiles/' + z + '/' + x +'_' + y + '.png'}});tilerLayer.setMap(this.map);

zooms是指定的的放大区间

new AMap.TileLayer.Satellite()是将地图设置成卫星云图

var tilerLayer = new AMap.TileLayer({
          zIndex:10,
          getTileUrl: function(x,y,z){
            // console.log('http://zz.xizhengtech.com/resource/tiles/' + z + '/' + x +'_' + y + '.png')
            return 'http://*********/resource/tiles/' + z + '/' + x +'_' + y + '.png'
          }
        });
tilerLayer.setMap(this.map);

getTileUrl 这里是按照放大倍数，区域位置请求线上的图片资源

 var tilerLayer = new AMap.TileLayer({zIndex:10,getTileUrl: function(x,y,z){//return /*dir*/'tiles/' + z + '/' + x + '_' + y + '.png'; return /*dir*/'tiles/' + z + '/' + x + '_' + y + '.png'; }});
tilerLayer.setMap(map);

这个是取本地资源的方法

限制拖拽区域用的高德的公用方法

限制地图显示范围-地图属性-示例中心-JS API 示例 | 高德地图API （限制拖拽区域）

 lockMapBounds(){var bounds = this.map.getBounds();this.map.setLimitBounds(bounds);this.logMapInfo();},logMapInfo() {var limitBounds = this.map.getLimitBounds();if (limitBounds) {document.querySelector("#ne").innerText = limitBounds.northeast.toString();document.querySelector("#sw").innerText = limitBounds.southwest.toString();} else {document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";}},

其他的想起来再补充

高德地图在添加marker的时候会有缩放导致marker位置发生位移的情况需要提前设置一个偏移量

　var marker = new AMap.Marker({offset: new AMap.Pixel(-18,-38),});

高德地图覆盖自定义瓦片图相关推荐

020：Mapbox GL加载高德地图（影像瓦片图）
第020个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中加载高德地图(影像瓦片图). 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果文章目录示例效果 ...
百度地图瓦片 android,百度地图自定义瓦片图获取
nodejs代码 const request = require('request'); const fs = require('fs'); const bagpipe = require('bagp ...
只用一个marker 替换高德_Android基于高德地图完全自定义Marker的实现方法
前言相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...
WebGIS——OpenLayers 3 地图叠加自定义卫星/航拍/手绘地图（任意瓦片图）
使用OpenLayers 3 第一步首先创建Html文件的结构,在body中放入一个Div作为地图显示的容器,调整其宽度高度使其全屏显示 html页结构如下,其中id为map的div为显示地图的容器 ...
tablueau地图标记圆形_高德地图实现自定义小蓝点自定义点标记绘制多边形/圆形区域根据地图的移动显示或者隐藏自定义点标记的相关实现...
最近项目中有需要应用到高德地图的模块,在参考别的app地图相关模块实现过程中,自己产生了一些想法.首先说明要实现的功能需求.类似支付宝app内的跑腿功能,在全市的所有商铺,电梯广告等任意地点发布任务, ...
高德地图自定义点标记大小_高德地图实现自定义小蓝点自定义点标记绘制多边形/圆形区域根据地图的移动显示或者隐藏自定义点标记的相关实现...
最近项目中有需要应用到高德地图的模块,在参考别的app地图相关模块实现过程中,自己产生了一些想法.首先说明要实现的功能需求.类似支付宝app内的跑腿功能,在全市的所有商铺,电梯广告等任意地点发布任务, ...
android 高德地图动画,Android 高德地图上自定义动画
高德提供了SmoothMoveMarkerAPI的调用,用于平滑移动,只需要给point点就好了还有animation的封装,对 RotateAnimation,AlphaAnimation,Sca ...
高德地图实现自定义小蓝点自定义点标记绘制多边形/圆形区域根据地图的移动显示或者隐藏自定义点标记的相关实现
最近项目升级改版,项目中本来应用了苹果自带的定位模块,但升级改版有需要应用到高德地图的模块,在参考别的app地图相关模块实现过程中,自己产生了一些想法.首先说明要实现的功能需求.类似支付宝app内的跑 ...
android高德地图设置经纬度,安卓高德地图开发自定义线路规划(按着自己定义的经纬度规划线路)...
[实例简介] 自定义地图的线路规划问题,代码可以直接的借用,方便大家学习 [实例截图] [核心代码] (YN)安卓高德地图自定义线路规划(按着指定的经纬度规划线路) └── YnGaoDeThreeM ...

高德地图覆盖自定义瓦片图

高德地图覆盖自定义瓦片图相关推荐

最新文章

热门文章