如何制作手绘地图?如何将图片图层精确地对准在地图上?
2017-02-22 17:37
288 查看
最近大家常常在问,如何制作鼓浪屿手绘地图,如何将气象图层叠加在高德地图上啊?
其实地图上的研发量很小,几行代码就可以搞定。
关键是在图片绘制上,有较高的要求。
下面就用简单粗暴的方法来实现,如有不妥之处,请大家轻喷。
获取到左下角和右上角的坐标,这个就是图片的显示范围。
如下图,3是左下角,1是右上角。
图片的创作您可以任意发挥,每个人都有自己的特色。这里对制作图片就不赘述了。
请注意,绘制的图片,一定和您框选的范围一致!!
绘制过程中,保证绘制内容和底图高度重合!
这里一定要保证图片重合,后期无法通过纠偏、校准等方式对齐图片!一定注意!
绘制完毕后,保存图片。
请注意,生成的图片,一定和您框选的范围一致!!
也就是说,如果有白边,也需要保留。
---------------------------------------------------------------------
其实地图上的研发量很小,几行代码就可以搞定。
关键是在图片绘制上,有较高的要求。
下面就用简单粗暴的方法来实现,如有不妥之处,请大家轻喷。
确定图片绘制范围
以鼓浪屿地图为例,打开框选取点工具:http://zhaoziang.com/amap/getBounds.htm获取到左下角和右上角的坐标,这个就是图片的显示范围。
如下图,3是左下角,1是右上角。
bounds: new AMap.Bounds( [118.057708, 24.436293], //左下角 [118.077706, 24.454069] //右上角 )
制作图片
打开Photoshop,或者您有别的制图软件也可以,开始制作手绘地图吧。图片的创作您可以任意发挥,每个人都有自己的特色。这里对制作图片就不赘述了。
请注意,绘制的图片,一定和您框选的范围一致!!
绘制过程中,保证绘制内容和底图高度重合!
这里一定要保证图片重合,后期无法通过纠偏、校准等方式对齐图片!一定注意!
绘制完毕后,保存图片。
请注意,生成的图片,一定和您框选的范围一致!!
也就是说,如果有白边,也需要保留。
将图片叠加到高德地图上
代码很简单啊,创建地图,建立图片图层,就好了啊。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
]
});
快来体验吧~
http://zhaoziang.com/amap/gulangyu.htm
---------------------------------------------------------------------
若您还有其他问题,就去提工单吧
http://lbs.amap.com/dev/ticket#/faq
相关文章推荐
- 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
- 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
- 【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)
- (译)如何使用cocos2d制作基于tile地图的游戏教程:第一部分
- 如何使用google map api制作自己的地图(转载)
- 如何制作ICO图片
- 如何制作高度和宽度可以缩放的图片
- 如何制作一张简单的UT3地图(下 )
- 如何制作电子地图
- 如何用PS制作透明图片
- 如何制作gif图片
- [IPhone] 如何将制作图片放大缩小的动作
- 如何用asp制作图片
- 刘万祥老师讲如何利用条件格式色阶制作数据地图
- 【百度地图API】如何制作孪生姐妹地图?
- 电子地图如何制作简介
- 如何制作一张简单的UT3地图(上)
- [ActiveX]VS2005如何制作ActiveX控件(与及通过 ActiveX控件上传本地图片的代码)
- 如何制作图片轮换显示?
- 如何在DeepEarth中进行图形绘制(点、线、多边形以及自定义图片图层)