详解百度地图API之自定义地图类型

开发 前端
本文将给大家介绍如何利用地图API实现自定义地图。百度地图API目前默认支持两种地图类型(map type):普通图和三维图。

今天的文章主要介绍如何利用地图API实现自定义地图。

  百度地图API目前默认支持两种地图类型(map type):普通图和三维图,它们分别通过常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP来表示,在1.2版本中这两个常量实际上是MapType对象的实例。当然开发者也可以自己实例化一个MapType从而实现一个自定义的地图。

  切图工具的使用

  我们先从切图工具的使用开始,接着再分析该工具产生的代码来详细了解自定义地图的方法。切图工具放在了github上,具体地址为:https://github.com/jiazheng/BaiduMapTileCutter,进入后请下载TileCutter.exe:

  注意,该工具是基于.NET平台开发的,所以要求有.NET Framework 4 以上的版本。

  启动这个exe后会出现这个界面:

首先我们要做的就是选择一张图片作为地图的底图(图片下载自这里):

点击下一步后需要设置输出的目录,这里我们直接选择桌面:

  继续下一步,这里要设置输出类型,我们使用默认值,即图块和相关代码都由工具生成:

  坐标设置我们使用默认值,即图片的中心点所在的位置。由于我们制作的是独立的地图类型,所以中心点设置为0, 0即可。

  级别范围设置:我们使用自定义,将范围设置为5到10级,原图放置在第10级,这样5到9级工具就会自动缩小图片。建议原图所在级别与最大级别一致,否则高于原图所在级别的时候图片会发虚(因为工具会将图片进行放大处理)。

设置地图类型的名称:

  一切就绪,最后可以确认所有的信息是否正确。然后就可以点击“开始切图”了。

完成了:

  这时我们会发现桌面多了一个index.html和一个tiles文件夹。我们打开index.html会看到结果:

源代码解析

  现在再来看看这个页面的代码部分:

  1.   <!DOCTYPE html> 
  2.   <html> 
  3.   <head> 
  4.   <title>自定义地图类型</title> 
  5.   <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> 
  6.   <script type="text/javascript"src="http://api.map.baidu.com/api?v=1.2"></script> 
  7. </head> 
  8.   <body> 
  9.   <div id="map"style="width:800px;height:540px"></div> 
  10.   <script type="text/javascript"> 
  11.   vartileLayer =newBMap.TileLayer();  
  12.   tileLayer.getTilesUrl =function(tileCoord, zoom) {varx =tileCoord.x;vary =tileCoord.y;return'tiles/'+zoom +'/tile'+x +'_'+y +'.png';  
  13.   }varMyMap =newBMap.MapType('MyMap', tileLayer, {minZoom: 5, maxZoom: 10});varmap =newBMap.Map('map', {mapType: MyMap});  
  14.   map.addControl(newBMap.NavigationControl());  
  15.   map.centerAndZoom(newBMap.Point(0, 0), 10);</script> 
  16.   </body> 
  17.   </html> 

  代码先创建了一个TileLayer实例,它代表一个图层,接着实现getTilesUrl方法提供图片的路径。getTilesUrl方法由API在铺图的时候进行调用,调用时会提供图块编号和级别信息,开发者要做的就是根据图块编号和级别信息返回正确图片地址(有关坐标和图块编号的内容可以阅读此文)。

  下面代码创建一个MapType实例,第一个参数为地图类型的名字,第二个参数为地图类型所对应的图层,这里我们直接传递之前创建的TileLayer实例,后面是一些可选的配置参数,这里指定了最小级别和最大级别。

  后面的代码就很简单了,创建map实例,并通过配置参数指定地图类型为MyMap。

  如果大家有月球或火星的图片,那么创建一个月球地图或者火星地图也就不是一件难事了。

原文链接:http://www.cnblogs.com/jz1108/archive/2011/10/08/2202239.html

【编辑推荐】

  1. 详解百度地图API之地图标注
  2. 百度地图API之如何制作驾车导航
  3. 架构师 如何从梦想变成现实?
  4. 谈谈对于企业级系统架构的理解
  5. 怎么成为一个软件架构师
责任编辑:彭凡 来源: 博客园
相关推荐

2011-09-29 11:00:54

百度地图API

2011-09-26 10:05:19

百度地图API

2011-09-16 10:37:42

地图API

2011-10-21 09:11:41

百度地图API

2011-09-16 14:39:02

百度地图API

2011-10-24 14:01:29

API

2011-10-21 10:16:25

百度地图API

2011-10-21 09:28:25

百度地图API

2021-06-15 14:33:00

高德百度腾讯

2013-04-08 14:59:54

Android学习笔记百度地图Overlay

2012-02-01 09:33:36

百度地图API

2022-03-27 10:04:23

Angular8项目vue

2011-12-29 16:18:14

API

2013-04-08 14:46:42

Android学习笔记百度地图

2012-02-03 14:01:15

地图

2011-05-25 14:36:17

2020-12-11 22:02:00

百度地图Apollo

2020-11-26 15:09:49

数据安全百度地图机器学习

2012-03-08 14:20:05

HTML 5

2010-09-03 09:28:30

点赞
收藏

51CTO技术栈公众号