博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
百度地图API:利用瓦片生成工具,自定义背景图片
阅读量:6134 次
发布时间:2019-06-21

本文共 1114 字,大约阅读时间需要 3 分钟。

       参考酸奶小妹的博文《【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈》 ()。

       及博文 《百度地图:新的瓦片生成工具来了》 链接:,开发的工具下载地址:。

一、制作地图的准备工作

  其实,你只需要准备一些地图的瓦片图,就可以了。

  用切片工具,把一张完整的图片(最好大一些,清楚一些),切成小片,可使用 TileCutter工具。

二、了解百度地图API的地图图层接口

构造函数 描述
TileLayer([opts:TileLayerOptions]) 创建一个地图图层实例。

     接口地址:

使用这个接口,就可以将切好的地图瓦片铺在原有的百度地图上。 

var tileLayer = new BMap.TileLayer();
tileLayer.getTilesUrl = function(tileCoord, zoom) {
var x = tileCoord.x;
var y = tileCoord.y;
var url = 'images/tiles/' + zoom + '/tile' + x + '_' + y + '.png';
return url;
}

三、限制地图的显示级别

  如果,你只切了1-4级的地图,那么你的魔兽地图应该只能显示1-4级。

  所以,要对map的显示做一个限制。看下面源代码第一行。

  还需要规定出自定义地图类型,看源代码第二行。

  第三行,添加的鱼骨控件,只会显示1-4级哟~因为在第一行控制了minZoom和maxZoom。

var MyMap = new BMap.MapType('MyMap', tileLayer, {minZoom: 1, maxZoom: 4});
var map = new BMap.Map('container', {mapType: MyMap});
map.addControl(new BMap.NavigationControl());

----------------------------------------------------------------------------------

我是采用的

1.利用TileCutter工具将原始图片切为1-5级,原始图片所在级别为2级。

2.直接修改了离线API的js

改为:Uc.getTilesUrl=function(a,b,c){var x=a.x,y=a.y,e=1,z=b;return "tiles/"+z+"/"+x+"/tile"+x+"_"+y+".png";};

3.替换瓦片地图文件夹images/tiles/XXX

 

转载地址:http://zveua.baihongyu.com/

你可能感兴趣的文章
python模块之hashlib: md5和sha算法
查看>>
解决ros建***能登录不能访问内网远程桌面的问题
查看>>
pfsense锁住自己
查看>>
vsftpd 相关总结
查看>>
bash complete -C command
查看>>
解决zabbix 3.0中1151端口不能运行问题
查看>>
售前工程师的成长---一个老员工的经验之谈
查看>>
Get到的优秀博客网址
查看>>
dubbo
查看>>
【Git入门之四】操作项目
查看>>
老男孩教育每日一题-第107天-简述你对***的理解,常见的有哪几种?
查看>>
Python学习--time
查看>>
在OSCHINA上的第一篇博文,以后好好学习吧
查看>>
高利率时代的结局,任重道远,前途叵测
查看>>
phpcms v9栏目列表调用每一篇文章内容方法
查看>>
python 自定义信号处理器
查看>>
luov之SMTP报错详解
查看>>
软件概要设计做什么,怎么做
查看>>
dwr
查看>>
java的特殊符号
查看>>