先上效果图：

网站访问地址：https://pingxonline.com/app/freshman/

源代码：https://gitee.com/LiangJiaping/freshman_map

在百度地图上面使用自定义的图片作为背景来突出某一个区域，支持多级缩放， 多分辨率。瓦片图层应用的场景非常的多，在此介绍一种生成的方法。

一、环境

使用VUE脚手架搭建，一些依赖如下：

"iview": "^3.1.0",

"vue": "^2.5.17",

"vue-baidu-map": "^0.21.11"

本文使用的百度地图插件是vue-baidu-map：https://dafrok.github.io/vue-baidu-map/#/ 

二、开始使用

准备好一张需要处理的原图，建议背景透明，格式为PNG：

原图分辨率为：2853*2947

在vue-baidu-map提供了一个瓦片图层的接口，只需要简单的调用bm-tile标签：

<template>

  <baidu-map class="map" :center="{lng: 116.332782, lat: 40.007978}" :zoom="16">

    <bm-tile

      :isTransparentPng="true"

      tileUrlTemplate="//developer.baidu.com/map/jsdemo/demo/tiles/{Z}/tile{X}_{Y}.png">

    </bm-tile>

  </baidu-map>

</template>

在此用到的tileUrlTemplate为指定图块网址模板，该模板可以针对每个图块请求而展开，以根据现有的图块坐标系引用唯一的图块。模板的格式应该为：http://yourhost/tile?x={X}&y={Y}&z={Z}.png 其中 X 和 Y 分别指纬度和经度图块坐标，Z 指缩放级别，比如： http://yourhost/tile?x=3&y=27&z=5.png 如果您没有提供图块网址模板，您需要实现 TileLayer.getTileUrl() 抽象方法。

瓦片图层的原理是把一张大图根据经纬度坐标切成一块一块的小图片，每一层级的小图片可以组成为大图，但是分辨率会不一样。

这里使用的是一款免费的切片工具：https://github.com/jiazheng/BaiduMapTileCutter

使用的基本教程：http://www.jiazhengblog.com/blog/2011/10/08/422/

切片软件的基本配置如图：

这里有两点要注意：中心坐标和级别设置。

原图不管是根据哪个级别制作的，分辨率都会有很大的不同。如果生成的切片用在百度地图上，比例不符合（或大或小），这里有两种方法调整：

用PS进行调整原图分辨率大小，然后生成切片，直到瓦片图层能够完全覆盖原百度地图图层；

在切片工具中，调整原图级别。

确认瓦片图层原图的中心点，需要用到PS，打开原图，使用裁剪工具，找到原图的中点，如下图。

记住这个位置，然后到百度地图坐标拾取系统（http://api.map.baidu.com/lbsapi/getpoint/index.html），对该中点对应的百度地图的位置进行取点，拿到了中心点的经纬度，回到切片软件，填上去。

最后可以点击生成，等待切图完毕即可。因为原图，中点，级别设置等等原因会有些许误差，有耐心慢慢调整就可以了。

三、使用原图切片

最后只需要把切片放到网站目录，修改地址指向切片目录即可：

tileUrlTemplate="//developer.baidu.com/map/jsdemo/demo/tiles/{Z}/tile{X}_{Y}.png"

该切片软件不支持自定义切片名字，要修改接口的地址，在tile{X}_{Y}处修改为tile-{X}_{Y}以符合文件命名风格，修改后如下：

tileUrlTemplate="//developer.baidu.com/map/jsdemo/demo/tiles/{Z}/tile-{X}_{Y}.png"

四、关于源代码的使用

修改源代码你需要最基本的Vue开发知识。

运行项目：

 确保电脑已经安装了node.js

在源代码根目录运行：

# npm install

如果是开发模式，需要热更新，运行

# npm run serve

如果是部署模式，运行npm run build，运行后根目录会生成一个新的文件夹，里面是编译好的网站，把该文件夹部署到服务器即可

# npm run build

更多作品，访问我的博客