最近你们经常在问,如何制做鼓浪屿手绘地图,如何将气象图层叠加在高德地图上啊?工具
其实地图上的研发量很小,几行代码就能够搞定。url
关键是在图片绘制上,有较高的要求。spa
下面就用简单粗暴的方法来实现,若有不妥之处,请你们轻喷。code
以鼓浪屿地图为例,打开框选取点工具:http://zhaoziang.com/amap/getBounds.htmhtm
获取到左下角和右上角的坐标,这个就是图片的显示范围。blog
以下图,3是左下角,1是右上角。图片
bounds: new AMap.Bounds( [118.057708, 24.436293], //左下角 [118.077706, 24.454069] //右上角 )
打开Photoshop,或者您有别的制图软件也能够,开始制做手绘地图吧。get
图片的创做您能够任意发挥,每一个人都有本身的特点。这里对制做图片就不赘述了。class
请注意,绘制的图片,必定和您框选的范围一致!!软件
绘制过程当中,保证绘制内容和底图高度重合!
这里必定要保证图片重合,后期没法经过纠偏、校准等方式对齐图片!必定注意!
绘制完毕后,保存图片。
请注意,生成的图片,必定和您框选的范围一致!!
也就是说,若是有白边,也须要保留。
代码很简单啊,建立地图,创建图片图层,就行了啊。
var imageLayer = new AMap.ImageLayer({ url: 'gulangyu.png', bounds: new AMap.Bounds( [118.057708, 24.436293], //左下角 [118.077706, 24.454069] //右上角 ), zooms: [15, 18] }); var map = new AMap.Map('container', { resizeEnable: true, center: [118.067042,24.444673], zoom: 15, layers: [ new AMap.TileLayer(), imageLayer ] });
---------------------------------------------------------------------