因为爱GIS,我们聚集于此
  • 快捷登录:

【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室 ...

2014-6-13 11:17| 发布者: admin| 查看: 9020| 评论: 5|原作者: giser

摘要: 关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧。在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊。聚合marker里面还有一些复杂 ...

以前写过从零开始学百度地图API系列,写得比较浅显。如今,自己在LBS领域成长了几年,学到比较多的专业知识,所以此次再次写到”从零系列”,希望加上更多功能,更多想法。比如这期的地图展现,不单单只是告诉大家,一张2D地图如何用代码写出来,同时,还会加上3D地图,卫星图,街景,交通流量图,麻点图,仙剑奇侠传地图等。也希望借此可以和大家更多的交流。
250834443102265.gif
-----------------------------------------------------------------------
一、万物的首先第一步,当然是申请一个key。
申请key:http://yuntu.amap.com/datamanager/index.html
登录之后,点新建地图,就有一个自动的key了。
250834443102265.gif
key在右上角密钥管理处
250834443102265.gif


二、 2D地图
2D地图,就是一张普通的高德地图。只需要简单几句话就可以实现。
  1. var mapObj;
  2. var point = new AMap.LngLat(120.148373,30.290422);
  3. function mapInit(){ //初始化地图对象,加载地图。 mapObj = new AMap.Map("iCenter",{ center : point, //地图中心点 level : 15 //地图显示的缩放级别
  4. });
  5. }
复制代码
其中,level指的是地图级别,默认为[3,18]。3为世界地图,18为街道级地图。
center指的是地图的中心点,可以用坐标拾取工具来取点。坐标拾取工具:http://zhaoziang.com/amap/picpoint.html
2D效果图:
250834443102265.gif


三、实时路况
添加实时路况,只需要两句话
  1. var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
  2. trafficLayer.setMap(mapObj); //添加实时路况图层
复制代码
消除实时路况有2种方法,一是隐藏hide方法,二是重置地图setMap(null)
  1. trafficLayer.setMap(null); //隐藏实时路况图层
  2. trafficLayer.hide(); //隐藏实时路况图层
复制代码
实时路况效果:
250834443102265.gif

四、路网,卫星图
路网、卫星图,都跟实时路况路况差不多,只是换了个类名。
添加路网、卫星图,只需要两句话
  1. var roadNetLayer = new AMap.TileLayer.RoadNet({zIndex:10}); //实例化路网图层
  2. roadNetLayer.setMap(mapObj); //在map中添加路网图层
  3. var satellLayer = new AMap.TileLayer.Satellite({zIndex:10}); //实例化卫星图
  4. satellLayer.setMap(mapObj); //在map中添加卫星图
复制代码
消除路网、卫星图,有2种方法,一是隐藏hide方法,二是重置地图setMap(null)
  1. roadNetLayer.setMap(null); //隐藏路网
  2. roadNetLayer.hide(); //隐藏路网
  3. satellLayer.setMap(null); //隐藏卫星图
  4. satellLayer.hide(); //隐藏卫星图
复制代码
路网、卫星图效果: 250834443102265.gif
250834443102265.gif

五、3D地图
3D地图,是在地图比较详细的级别17-18的时候,有三维楼块效果的地图。
所以,要看到3D效果,必须把地图级别调整到17-18才可以看到。
  1. var buildingLayer = new AMap.Buildings(); //实例化3D地图图层
  2. buildingLayer.setMap(mapObj); //在map中添加3D图层
  3. mapObj.setZoom(18); //改变地图级别到17-18
复制代码
3D地图没有hide方法,所以隐藏他,需要重置地图。
  1. buildingLayer.setMap(null);
复制代码
3D地图效果:250834443102265.gif

六、麻点图
(记得以前研究百度地图API的时候,麻点图的制作很苦难,要自己去对准坐标,自己生成麻点图,然后自己切片……实在费力……)
高德地图API最好用的就是麻点图。不用自己生成麻点图,不用自己切图。只需要在云图上点一点,就可以完成所有操作。
打开云图管理台:http://yuntu.amap.com/datamanager/index.html
新建或打开已有的地图:
250834443102265.gif
点右上角的按钮,可以手工一个一个标注你自己的麻点。
当然也可以批量导入你的数据。
250834443102265.gif
数据填充完毕后,记录下你的tableid。这就是你的云图层(麻点图)的id,放到下面的代码里。
  1. //加载云图层插件  mapObj.plugin('AMap.CloudDataLayer', function () { var layerOptions = { query:{keywords: ''}, clickable:true }; var cloudDataLayer = new AMap.CloudDataLayer('【您的tableid】', layerOptions); //实例化云图层类  cloudDataLayer.setMap(mapObj); //叠加云图层到地图  });
复制代码
云图层,就是麻点图,是实时渲染的,你在云图管理台操作之后,立马在你的前台得到显示。
这真是我用过最好用的麻点图了。marker大于500之后,终于有如此方便的解决方案了。
250834443102265.gif

更多关于云图的教程,可以看我以前发过的教程
云存储:http://www.cnblogs.com/milkmap/p/3623775.html
三甲医院例子:http://www.cnblogs.com/milkmap/p/3637899.html
东莞酒店例子:http://www.cnblogs.com/milkmap/p/3657829.html

七、仙剑地图
这个算是投机取巧,将仙剑地图直接覆盖在高德地图上,属于图片覆盖物。
图片覆盖物需要指定一个显示范围,取左下角和右上角。
显示范围设定后,不管地图放大缩小,图片都只在这个范围中显示。
这样的图片覆盖物,比较适合制作校园地图,厂区地图,小区地图等。
而且,跟云图一样,图片覆盖物不需要切图
(又想感叹一句!真真是开发者的福音!为何高德API做得那么好,之前我都不知道!!)
  1. var bounds = new AMap.Bounds(new AMap.LngLat(120.120993,30.271596), new AMap.LngLat(120.184593,30.309171)), groundImageOpts = { opacity: 1, //图片透明度  clickable: true,//图片相应鼠标点击事件,默认:false  map: mapObj //图片叠加的地图对象
  2. }; //实例化一个图片覆盖物对象  var groundImage = new AMap.GroundImage('xianjian.jpg', bounds, groundImageOpts);
复制代码
仙剑地图效果:
250834443102265.gif

八、自定义地图
这里用谷歌的底图作为例子,将高德底图直接换为谷歌底图。跟上一段的内容不一样,不是图片覆盖物那么简单哦。
高德的切图方式,和谷歌的一样。所以,在网上找的谷歌地图的切图工具,都可以适用于高德地图。
  1. google = new AMap.TileLayer({ tileUrl:"http://mt{1,2,3,0}.google.cn/vt/lyrs=m@142&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galil"//图块取图地址
  2. }); google.setMap(mapObj);
复制代码
谷歌地图:
250834443102265.gif

九、街景
高德地图街景覆盖城市共33个,分别为:杭州,南京,成都,西安,拉萨,昆明,烟台,沈阳,哈尔滨,长春,常州,南通,林芝,泰安,日照,那曲,东营,日喀则,德州,滨州,聊城,莱芜,郑州,洛阳,平顶山,开封,安阳,信阳,新乡,焦作,商丘,周口,驻马店。
使用街景,必须将您的网页文件传到服务器上。
  1. var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
  2. trafficLayer.setMap(mapObj); //添加实时路况图层0
复制代码
  1. var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
  2. trafficLayer.setMap(mapObj); //添加实时路况图层1
复制代码
街景效果:
250834443102265.gif

十、全部源代码,请点击这里:
250834443102265.gif250834443102265.gif
  1. var trafficLayer = new AMap.TileLayer.Traffic({zIndex:10}); //实时路况图层
  2. trafficLayer.setMap(mapObj); //添加实时路况图层2
复制代码
View Code

示例demo在线看:
http://zhaoziang.com/amap/zero_1_1.html

效果预览:
250834443102265.gif

酸奶小妹
1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

发表评论

最新评论

引用 云轻星灿 2014-5-20 13:48
赞一个
引用 FlyAC2010 2014-5-23 15:19
本帖最后由 FlyAC2010 于 2014-5-23 15:29 编辑

帖子很细致,是转贴的话最好注明转载并写明原文地址哦!
引用 wbx2009010281 2014-5-29 22:47
谢谢楼主的帮助!!
引用 clodissy 2014-5-30 16:26
看了楼上的教程,很有体会~ 这里想请教下,我们公司有做三维地图招商项目的,做出来的三维地图是正交斜45°的,底图较顶视图的在纵向上有压缩,请问怎么跟2d地图的坐标相对应呢?就是在三维地图上作的资源点和热区,如何在2d地图上也能对应的显示出来,我估计会存在误差的。本身是三维设计的,对这方面知道的只是些毛皮,希望不吝赐教,有什么问题相互交流~
引用 kekebaba 2016-5-9 14:29
多谢您的分享!

查看全部评论(5)

关闭

热门推荐上一条 /1 下一条

© 2013-2014 GIS520 ( 陕ICP备14003560号-1 )Powered by Discuz! X3.2 Template by giscafer   
返回顶部